

<nb-card class="col-xl-9"
accent="info">
    <nb-card-header>
        <h2 style="text-transform: capitalize;">{{user.username}}</h2>
    </nb-card-header>
    <nb-card-body>

        <h3>Rank</h3>
        <span *ngIf="!manageUser">
            {{user.rank}}
        </span>
        <nb-select 
            *ngIf="manageUser"
            [(selected)]="user.rank" 
            placeholder="Rank"
            (selectedChange)="onSelectRank()">

          <nb-option *ngFor="let rank of ranks" [value]="rank" >{{rank}}</nb-option>
        </nb-select>

        <h3 *ngIf="myProfile || manageUser">Password</h3>
        <form (ngSubmit)="submitPasswordChange()" #form="ngForm" aria-labelledby="title" *ngIf="myProfile || manageUser">
            <input nbInput
                fullWidth
                type="password"
                [(ngModel)]="newPw"
                name="newPw"
                id="input-newPw"
                pattern=".+"
                placeholder="New Password"
                fieldSize="small"
                autofocus
                [required]="true">

            <input nbInput
                fullWidth
                type="password"
                [(ngModel)]="newPwConfirm"
                name="newPwConfirm"
                id="input-newPwConfirm"
                pattern=".+"
                placeholder="Confirm Password"
                fieldSize="small"
                autofocus
                [required]="true">

            <button nbButton
                fullWidth
                status="primary"
                size="small"
                [disabled]="!form.valid || newPw != newPwConfirm"
                [class.btn-pulse]="submitted">
                Change
            </button>
        </form>
        <br />

        <h3>Available Reserves</h3>
        {{user.MC}} MC |
        {{user.BWL}} BWL |
        {{user.ZG}} ZG |
        {{user.AQ20}} AQ20 |
        {{user.AQ40}} AQ40 |
        {{user.Naxx}} Naxx
        <br />
      <ng-container *ngFor="let char of characters">
          <character [name]="char.charactername" [link]="'character'"></character>
      </ng-container>
    </nb-card-body>
</nb-card>
