<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <p class="fl-detail" i18n>Here you can assign options to this product.</p>
  <p class="fl-detail" i18n>If option cycles do not match product cycles the option will not be available on order.</p>

  <table *ngIf="confOptions.length" mat-table
         [dataSource]="confOptions" class="full-width">
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef i18n>Name</th>
      <td mat-cell *matCellDef="let element">
        <span class="fl-detail">{{element.display_name}}</span>
      </td>
    </ng-container>
    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef class="hide-lt-md" i18n>Internal name</th>
      <td mat-cell *matCellDef="let element" class="hide-lt-md">
        <span class="fl-detail">{{ element.name }}</span>
      </td>
    </ng-container>
    <ng-container matColumnDef="cycles_match">
      <th mat-header-cell *matHeaderCellDef i18n>Product cycles match</th>
      <td mat-cell *matCellDef="let element">
        <span class="fl-detail fl-green-color" *ngIf="element.cycles_match" i18n>
          Option has all product cycles
        </span>
        <span class="fl-detail fl-red-color" *ngIf="!element.cycles_match" i18n>
          Option does not have all product cycles
        </span>
      </td>
    </ng-container>
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <app-object-actions [objectActions]="actions[element.id]" maxVisibleActions="3">
        </app-object-actions>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <div layoutDirection="row" class="fl-margin-top">
    <button mat-button color="primary" (click)="associateOption()" i18n>Associate option</button>
  </div>
</div>
