
<div class="display-container">
  <div class="header-content">
    <div style="width: calc(100% / 3)">
      <header id="navigation" class="btn-navigate mb-8" style="width: 90% !important;">
        <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" matRipple [routerLink]="['/sam/ANFA/failure']">
          <mat-icon style="color: white">arrow_back</mat-icon>
          <div class="page-name ml-4">Bitácora de Fallas</div>
        </div>
      </header>
    </div>
    <div style="width: calc(100% / 3)"> <mat-card-title class="mat-card-title centre">Gráfica de Fallas</mat-card-title> </div>
    <div style="width: calc(100% / 3)" align="end">
      <button mat-raised-button class="teal_primary_background white_font mt-14 mb-8 mr-32" (click)="openDialog()" [disabled]="this.arrSelectedFailures.length !== 1">
        <mat-icon>calculate</mat-icon>
        Generar Cálculo de Fallas
      </button>
    </div>
  </div>
  <div class="panel-l">

    <h2>Información de la Gráfica</h2>
    <mat-grid-list cols="2" rowHeight="82px" [formGroup]="formGroupPeriodicity">
      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline">
          <mat-label>Código del Equipamiento</mat-label>
          <input matInput type="text" formControlName="equipment" readonly>
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline">
          <mat-label>Periodo</mat-label>
          <mat-date-range-input  [rangePicker]="picker" [max]="currentDate">
            <input formControlName="periodStart" matStartDate placeholder="Start date">
            <input formControlName="periodEnd" matEndDate placeholder="End date" (dateChange)="changeListFailure()">
          </mat-date-range-input>
          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-date-range-picker #picker startView="year"></mat-date-range-picker>
        </mat-form-field>
      </mat-grid-tile>
    </mat-grid-list>



    <h2>Lista de Fallas</h2>
    <!-- 248px - Tamaño del formulario | 32px - Tamaño del título "Lista de Fallas" | 16px - Paddings -->
    <div style="height: calc(100% - 248px - 32px - 16px); overflow: auto;">
      <mat-selection-list #shoes [(ngModel)]="arrSelectedFailures" (ngModelChange)="changeListFailure()">
        <mat-list-option *ngFor="let failure of arrFailures" [value]="failure">{{ failure.FALLA }}</mat-list-option>
      </mat-selection-list>
    </div>
  </div>

  <div class="panel-r">

    <canvas id="myChart" class="failure-chart"></canvas>
    <div style="width: 100%; display: flex; justify-content: space-around;">
      <b style="width: 3%; color: #7c7c7c">{{ periodStart?.value.getFullYear() }}</b>
      <div style="width: 94%;"></div>
      <b style="width: 3%; color: #7c7c7c">{{ periodEnd?.value !== null ? periodEnd?.value.getFullYear() : '????' }}</b>
    </div>
  </div>
</div>
