<admin-header></admin-header>

<div class="container_page">
    <div class="container mt-3" align="right">
        <button routerLink='/admin/clinic/new' type="submit" mat-raised-button>New Clinic...</button>
    </div>


    <div class="container mt-3">
        <span> {{ ffqclinicList.length }} {{ ffqclinicList.length | i18nPlural: {'=1': 'clinic', 'other': 'clinics'} }} </span>
        <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="12.5%"> Clinicians Number Limit </th>
            <th width="12.5%"> Parents Number Limit </th>
        </tr>
        <tr *ngFor="let c of ffqclinicList; index as i">
            <td><a [routerLink]="['/admin/clinic/', c.clinicId]"> {{ c.clinicname }} </a></td>
            <td> {{ clinicianNames[c.headclinician] }}</td>
            <td> {{ c.address }} </td>
            <!--<td> {{ c.datebuilt }} </td>-->
            <td> {{ (ffqclinicianList | clinicianFilter: c.clinicId).length }} </td>
            <td> {{ (ffqparentList | parentFilter: c.clinicId).length }} </td>
            <td> {{ c.cliniciansLimit }} </td>
            <td> {{ c.parentsLimit }} </td>
        </tr>
        </table>
    </div>

</div>
