<admin-header></admin-header>

<div class="container_page">
    <div class="container mt-3" align="center">
      <div class="row">
        <button routerLink='/admin/clinic/new' type="submit" mat-raised-button>New Clinic...</button>
        <span style="margin: 40px"></span>
        <button routerLink='/admin/user/new' type="submit" mat-raised-button>New User(s)...</button>
      </div>
    </div>

    <div class="container mt-3">
      <span> {{ ffqclinicList.length }} {{ ffqclinicList.length | i18nPlural: {'=1': 'clinic', 'other': 'clinics'} }} </span>
      <div style="margin-bottom: 15px">
        <input style="width: 25%; display: inline-block;  margin-left: 5px;" placeholder="Search..." type="text" class="form-control"
               name="search" [(ngModel)]="searchClinics"/>
      </div>

      <table class="table table-bordered table-inverse">
        <tr>
          <th width="20"> Clinic Name </th>
<!--          <th width="20%"> Head Clinician </th>-->
          <th width="34%"> Location </th>
          <!--<th width="14%"> Integration Date </th>-->
          <th width="13.5%"> No. of Clinicians </th>
          <th width="12.5%"> No. of Parents </th>
          <th width="20%"> Parent Limit for Clinic </th>
        </tr>
        <tr *ngFor="let c of ffqclinicList | searchFilter: searchClinics; index as i">
          <td><a [routerLink]="['/admin/clinic/', c.clinicId]"> {{ c.clinicname }} </a></td>
<!--          <td> {{ clinicianNames[c.headclinician] }}</td>-->
          <td> {{ c.address }} </td>
          <td> {{ (ffqclinicianList | clinicianFilter: c.clinicId).length }} </td>
          <td> {{ (ffqparentList | parentFilter: c.clinicId).length }} </td>
          <td> {{ c.parentsLimit }} </td>

        </tr>
      </table>

      <br>
        <span>{{ ffqclinicianList.length + ffqparentList.length }} user(s)</span>
        <div>
            <input style="width: 25%; display: inline-block;  margin-left: 5px;" placeholder="Search..." type="text" class="form-control"
                name="search" [(ngModel)]="searchClinicians"/>
            <span style="color:gray; margin-left: 20px; margin-right: 20px; font-size: x-large;"> | </span>
            <mat-checkbox (change)="toggleParents()" [checked]="true" color="primary"> Show Parents </mat-checkbox>
            <span style="color:gray; margin-left: 20px; margin-right: 20px; font-size: x-large;"> | </span>
            <mat-checkbox (change)="toggleClinicians()" [checked]="true" color="primary"> Show Clinicians </mat-checkbox>
            <span style="color:gray; margin-left: 20px; margin-right: 20px; font-size: x-large;"> | </span>
            <mat-checkbox (change)="toggleAdmins()" [checked]="true" color="primary"> Show Admins </mat-checkbox>
            <span style="color:gray; margin-left: 20px; margin-right: 20px; font-size: x-large;"> | </span>
            <mat-form-field>
                <mat-label appearance="fill">Filter by Clinic...</mat-label>
                <mat-select matNativeControl multiple>
                  <mat-option *ngFor="let c of ffqclinicList" [value]="c.clinicname" (click)="filterByClinic(c.clinicname)">{{ c.clinicname }}</mat-option>
                </mat-select>
            </mat-form-field>
        </div>

        <table class="table table-bordered table-inverse">
            <tr>
                <th width="25%"> Username </th>
                <th width="15%"> Account Type </th>
                <th width="60%"> Clinic </th>

            </tr>
            <tr *ngFor="let u of ffqclinicianList | searchFilter: searchClinicians; index as i" [hidden]="!showClinicians || (filtered && filteredClinics.indexOf(clinicNames[u.assignedclinic]) === -1)">
                <td><a [routerLink]="['/admin/user/' + usertype.clinician, u.userId]"> {{ u.username }} </a></td>
                <td> Clinician </td>
                <td> {{ clinicNames[u.assignedclinic] }} </td>

            </tr>
            <tr *ngFor="let u of ffqparentList | searchFilter: searchClinicians; index as i" [hidden]="!showParents || (filtered && filteredClinics.indexOf(clinicNames[u.assignedclinic]) === -1)">
                <td><a [routerLink]="['/admin/user/' + usertype.parent, u.userId]"> {{ u.username }} </a></td>
                <td> Parent </td>
                <td> {{ clinicNames[u.assignedclinic] }} </td>

            </tr>
            <tr *ngFor="let u of ffqadminList | searchFilter: searchClinicians; index as i" [hidden]="!showAdmins">
                <td> {{ u.username }} </td>
                <td> Admin </td>

            </tr>
        </table>

    </div>
</div>
