<h1 mat-dialog-title class="prevent-select">Validar cierre de la orden SM{{ idOrder }}</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" *ngIf="!isLoading && !hasError">
    <h2>Información de la orden</h2>
    @for (item of displayedData; track $index) {
      <p><b>{{ item.label }}: </b>{{ item.value }}</p>
    }
    <h2>Actividades realizadas</h2>
    <p *ngIf="activities.length <= 0"><b>No se realizó ninguna actividad</b></p>
    <ol *ngIf="activities.length > 0">
      @for (activity of activities; track activity) {
        <li>{{ activity.value }}</li>
      }
    </ol>
    <h2>Evidencias adjuntadas</h2>
    <div class="form-row w-100">
      @for (imageURL of evidence; track $index) {
        <div class="form-cell C04">
          <div class="image-cell">
            <img [src]="imageURL" [alt]="'IMG-' + $index">
          </div>
        </div>
      }
    </div>
    <mat-form-field appearance="outline" class="w-100 mt-8">
      <mat-label>Validado por</mat-label>
      <input matInput #validatedBy [formControl]="validatedByControl">
      <mat-error *ngIf="validatedByControl.hasError('required')">
        Este campo es obligatorio.
      </mat-error>
    </mat-form-field>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button [mat-dialog-close]="'Si-' + validatedByControl.value" [disabled]="validatedByControl.invalid">Si</button>
  <button mat-button [mat-dialog-close]="'No-' + validatedByControl.value" [disabled]="validatedByControl.invalid">No</button>
</div>