<div class="action-bar">
  <mat-form-field>
    <mat-label>Recherche</mat-label>
    <input matInput type="text" [(ngModel)]="searchQuery"/>
    <button mat-button *ngIf="searchQuery" matSuffix mat-icon-button (click)="searchQuery=''">
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
  <div class="button-add">
    <button *ngIf="hasEditPermission" mat-raised-button color="accent" routerLink="/color/add">Ajouter</button>
  </div>
</div>

<mat-expansion-panel class="table-title" *ngFor="let companyRecipes of (recipes$ | async)"
                     [hidden]="isCompanyHidden(companyRecipes.recipes)" [expanded]="panelForcedExpanded">
  <mat-expansion-panel-header>
    <mat-panel-title>
      {{companyRecipes.company}}
    </mat-panel-title>
  </mat-expansion-panel-header>

  <ng-container *ngTemplateOutlet="recipeTableTemplate; context: {recipes: companyRecipes.recipes}"></ng-container>
</mat-expansion-panel>

<ng-template
  #recipeTableTemplate
  let-recipes="recipes">
  <table class="mx-auto" mat-table [dataSource]="recipes">
    <!-- Recipe's info -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Nom</th>
      <td mat-cell *matCellDef="let recipe">{{recipe.name}}</td>
    </ng-container>

    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef>Description</th>
      <td mat-cell *matCellDef="let recipe">{{recipe.description}}</td>
    </ng-container>

    <ng-container matColumnDef="sample">
      <th mat-header-cell *matHeaderCellDef>Échantillon</th>
      <td mat-cell *matCellDef="let recipe">#{{recipe.sample}}</td>
    </ng-container>

    <!-- Icons -->
    <ng-container matColumnDef="iconNotApproved">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let recipe" [class.disabled]="recipe.approbationDate">
        <mat-icon svgIcon="alert" class="color-warning" title="Cette recette n'est pas approuvée"></mat-icon>
      </td>
    </ng-container>

    <!-- Buttons -->
    <ng-container matColumnDef="buttonView">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let recipe">
        <button mat-flat-button color="accent" routerLink="/color/explore/{{recipe.id}}">Voir</button>
      </td>
    </ng-container>

    <ng-container matColumnDef="buttonEdit">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let recipe" [class.disabled]="!hasEditPermission">
        <button mat-flat-button color="accent" routerLink="/color/edit/{{recipe.id}}">Modifier</button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="tableCols"></tr>
    <tr mat-row *matRowDef="let row; columns: tableCols" [hidden]="!searchRecipe(row)"></tr>
  </table>
</ng-template>
