<clinical-header></clinical-header>

<div class="container_page">
    <div class="container mt-3" align="right">
      <button routerLink='/clinic/user/new' type="submit" mat-raised-button>New User(s)...</button>
    </div>
    <div class="container mt-3">
        <h4>{{this.currentClinicName}}</h4>
        <div class="buttons">
            <mat-checkbox [checked]="true" (change)="toggleClinicians($event)" style="margin-right: 20px;"> Clinicians </mat-checkbox>
            <mat-checkbox [checked]="true" (change)="toggleParents($event)"> Parents </mat-checkbox>
        </div>
        <br>

        <!-- Clinicians starts here -->

        <div *ngIf="showClinicians">
          <label style="font-weight:bold"> Clinician </label>
         <h5> </h5>
            <table class="table table-bordered table-inverse">
              <tr>
                <th width="20%"> Clinician UserName </th>
                <th width="10%"> Prefix </th>
                <th width="20%"> Current number of Parents in Clinic </th>
                <th width="20%"> Total Parent Limit for Clinic</th>
              </tr>
              <tr>
                <td> <a [routerLink]="['/clinic/user/c', loggedInUser[0].userId]">{{loggedInUser[0].username}}</a> </td>
                <td>{{ loggedInUser[0].prefix }}</td>
                <td>{{ count }}</td>
                <td>{{ clinicParentLimit }}</td>
              </tr>
            </table>
         </div>
        <!-- Clinicians ends here -->

        <div *ngIf="showClinicians && showParents"><hr></div>

        <!-- Parents starts here -->

        <div *ngIf="showParents">
            <label style="font-weight:bold"> Parents </label>

            <div style="width: 100%; white-space:nowrap; overflow-x: auto">
                <input style="width: 25%; display: inline-block;  margin-left: 5px;" placeholder="Search..." type="text" class="form-control"
                    name="p_search" [(ngModel)]="p_search"/>

            </div>

            <table class="table table-bordered table-inverse">
                <tr>
                  <th width="20%"> Parent Username </th>


                </tr>
                <tr *ngFor="let u of parentList | searchFilter: p_search; index as i"
                    [hidden]="hideUnassignedParents && !clinicianNames[u.assignedclinician] ||
                     (filtered && filtered_clinicians.indexOf(clinicianNames[u.assignedclinician]) === -1)"
                >
                    <td><a [routerLink]="['/clinic/user/p', u.userId]"> {{ u.username }} </a></td>
                </tr>
            </table>

        </div>

        <!-- Parents ends here -->

	</div>
</div>
