<h1 mat-dialog-title class="prevent-select">Planes de mantenimiento relacionados</h1>
<div mat-dialog-content class="prevent-select">
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
    <mat-spinner align="center"></mat-spinner>
    <h3>Cargando datos ...</h3>
  </div>
  <div class="has-error animated fadeIn pt-64" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="dialog_details_column animated fadeIn" [ngClass]="{ hidden: isLoading || hasError }">
    <p><b>{{ equipment!.CODIGO }} - {{ equipment!.TIPO_EQUIPAMIENTO }} - {{ equipment!.MODELO }} ({{ equipment!.ID_EQUIPAMIENTO }})</b></p>
    <mat-tab-group>
      <mat-tab label="Planes de mantenimiento preventivo">
        <div class="maintenance-plains-container">
          <button mat-mini-fab color="primary" matTooltip="Ir al módulo" class="override_no_shadow navigation-module-button white_font pink_primary_background" 
          (click)="navigateToModule('preventive')">
            <mat-icon>engineering</mat-icon>
          </button>
          <table mat-table [dataSource]="preventiveOrders!">
            <ng-container matColumnDef="ID">
              <th mat-header-cell *matHeaderCellDef>ID</th>
              <td mat-cell *matCellDef="let row">{{ row.IDORDEN }}</td>
            </ng-container>
            
            <ng-container matColumnDef="FECINI">
              <th mat-header-cell *matHeaderCellDef>Fecha de inicio</th>
              <td mat-cell *matCellDef="let row">{{ row.FECHAINICIO }}</td>
            </ng-container>
            
            <ng-container matColumnDef="FECFIN">
              <th mat-header-cell *matHeaderCellDef>Fecha final</th>
              <td mat-cell *matCellDef="let row">{{ row.FECHAFINAL == null ? '-' : row.FECHAFINAL }}</td>
            </ng-container>
            
            <ng-container matColumnDef="ACTI">
              <th mat-header-cell *matHeaderCellDef>Activador</th>
              <td mat-cell *matCellDef="let row">Activador #{{ row.ACTIVADOR }}</td>
            </ng-container>
            
            <ng-container matColumnDef="PRIO">
              <th mat-header-cell *matHeaderCellDef>Prioridad</th>
              <td mat-cell *matCellDef="let row">
                <span [style.color]="row.PRIORIDAD_OBJ.color" style="font-weight: 500;">
                  {{ row.PRIORIDAD_OBJ.label }}
                </span>
              </td>
            </ng-container>

            <ng-container matColumnDef="ESTADO">
              <th mat-header-cell *matHeaderCellDef>Estado</th>
              <td mat-cell *matCellDef="let row">{{ row.ESTATUS }}</td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="preventiveDisplayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: preventiveDisplayedColumns"></tr>
  
            <tr class="mat-row" *matNoDataRow>
              <td class="mat-cell p-80 centre" colspan="100%">
                <object data="assets/img/empty_data.svg" width="150"></object>
                <h2>Sin datos</h2>
              </td>
            </tr>
          </table>
        </div>
      </mat-tab>
      <mat-tab label="Planes de mantenimiento correctivo">
        <div class="maintenance-plains-container">
          <button mat-mini-fab color="primary " matTooltip="Ir al módulo" class="override_no_shadow navigation-module-button white_font pink_primary_background">
            <mat-icon>construction</mat-icon>
          </button>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>