<div class="header-addnew">
  <rb-icon-button *ngIf="sampleSelect" mode="secondary" icon="close" (click)="sampleSelect = false"
                  class="validation-close" iconOnly></rb-icon-button>
  <rb-icon-button [icon]="sampleSelect ? 'checkmark' : 'clear-all'"
                  mode="secondary" (click)="validate()">
    {{sampleSelect ? 'Validate' : 'Validation'}}
  </rb-icon-button>
</div>

<div class="status-selection">
  <label class="label">Status</label>
  <rb-form-checkbox name="status-validated" [(ngModel)]="materialStatus.validated"
                    [disabled]="!materialStatus.new && !materialStatus.deleted"
                    (ngModelChange)="loadMaterials()">
    validated
  </rb-form-checkbox>
  <rb-form-checkbox name="status-new" [(ngModel)]="materialStatus.new"
                    [disabled]="!materialStatus.validated && !materialStatus.deleted"
                    (ngModelChange)="loadMaterials()">
    new
  </rb-form-checkbox>
  <rb-form-checkbox name="status-deleted" [(ngModel)]="materialStatus.deleted"
                    [disabled]="!materialStatus.validated && !materialStatus.new"
                    (ngModelChange)="loadMaterials()">
    deleted
  </rb-form-checkbox>
</div>

<div class="material-search space-right">
  <rb-form-input label="search" [(ngModel)]="materialSearch" icon="close"></rb-form-input>
  <span class="rb-ic rb-ic-close clickable" (click)="materialSearch = ''"></span>
</div>

<ng-container *ngTemplateOutlet="paging"></ng-container>

<rb-table ellipsis scrollTop>
  <tr>
    <th *ngIf="sampleSelect">
      <rb-form-checkbox name="select-all" (change)="selectAll($event)">all</rb-form-checkbox>
    </th>
    <th>Name</th>
    <th>Supplier</th>
    <th>Group</th>
    <th *ngFor="let key of templateKeys">{{key.label}}</th>
    <th>Numbers</th>
    <th></th>
  </tr>
  <tr *ngFor="let material of (materials || []).filter(materialFilter(materialSearch))
    .slice((page - 1) * pageSize, page * pageSize); index as i">
    <td *ngIf="sampleSelect">
      <rb-form-checkbox *ngIf="material.status !== 'deleted'" [name]="'validate-' + i"
                        [(ngModel)]="material.selected">
      </rb-form-checkbox>
    </td>
    <td>{{material.name}}</td>
    <td>{{material.supplier}}</td>
    <td>{{material.group}}</td>
    <td *ngFor="let key of templateKeys">{{material.properties[key.key] | exists}}</td>
    <td>{{material.numbers}}</td>
    <td>
      <a [routerLink]="'/materials/edit/' + material._id" *ngIf="material.status !== 'deleted'">
        <span class="rb-ic rb-ic-edit clickable"></span>
      </a>
      <span class="rb-ic rb-ic-undo clickable" *ngIf="material.status === 'deleted'"
            (click)="restoreMaterial(material._id, restoreConfirm)"></span>
  </td>
  </tr>
</rb-table>

<ng-container *ngTemplateOutlet="paging"></ng-container>

<ng-template #paging>
  <div class="paging">
    <button class="rb-btn rb-link" type="button" (click)="page = page - 1" [disabled]="page === 1">
      <span class="rb-ic  rb-ic-back-left"></span>
    </button>
    <rb-form-input label="page" [(ngModel)]="page"></rb-form-input>
    <span>
      of {{pages}}
    </span>
    <button class="rb-btn rb-link" type="button" (click)="page = page + 1" [disabled]="page >= pages">
      <span class="rb-ic  rb-ic-forward-right"></span>
    </button>
  </div>
</ng-template>

<ng-template #restoreConfirm>
  <rb-dialog dialogTitle="Restore sample">
    Do you really want to restore this sample?
  </rb-dialog>
</ng-template>
