<div class="items-container animated fadeIn prevent-select" (window:resize)="onResize()">
  <div id="navigation" class="mb-8">
    <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" (click)="goBack(1)" matRipple>
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Órdenes de trabajo preventivo</div>
    </div>
  </div>
  <mat-card class="override-elevation-z8" style="width: 100%; height: 100%;">
    <mat-card-title style="text-align: center; margin: 15px 0;">Asignación del análisis presupuestario de la orden #{{ idOrder }}</mat-card-title>
    <mat-card-content>
      <div class="form-order-container" *ngIf="isLoading">
        <div class="is-loading animated fadeIn fast">
          <mat-spinner align="center"></mat-spinner>
          <h3>Cargando datos ...</h3>
        </div>
      </div>

      <div class="form-order-container" *ngIf="!isLoading && hasError">
        <div class="has-error animated fadeIn fast">
          <mat-icon class="red_primary_font mb-40" >error</mat-icon>
          <h3>{{ errorStr }}</h3>
        </div>
      </div>

      <div class="form-order-container" *ngIf="!isLoading && !hasError">
        <div class="analysis-column">
          <h3>Especialidades u oficios requeridos:</h3>
          <div class="analysis-item" *ngFor="let item of staffArr">
            <div class="analysis-item-header mb-8">
              <span style="font-weight: 500;">{{ item.NAME }},</span> {{ item.CANT }} integrante(s):
            </div>
            <div class="analysis-item-content">
              <div class="content-row">
                <span class="mr-4 mb-20 ml-8">&bullet;</span>
                <mat-form-field appearance="outline" style="width: 360px;">
                  <mat-label>Costo por hora</mat-label>
                  <input matInput class="right-align" [id]="'cost-' + item.ID" (input)="validateNumber(cost.value, item.ID)" #cost 
                  [value]="item.PREC">
                  <span matTextPrefix>$&nbsp;</span>
                </mat-form-field>
                <span class="mr-8 mb-20 ml-8">-</span>
                <mat-form-field appearance="outline" style="width: 240px;">
                  <mat-label>Horas de contrato</mat-label>
                  <input matInput [id]="'hour-' + item.ID" disabled #duration [value]="item.HORA">
                  <button mat-icon-button matSuffix (click)="openDurationPicker(duration.value, item.ID)">
                    <mat-icon>schedule</mat-icon>
                  </button>
                  <mat-hint>Tiempo expresado en horas*</mat-hint>
                </mat-form-field>
                <span class="mr-8 mb-20 ml-8">- Costo total: ${{ item.TOTA }}</span>
              </div>
            </div>
          </div>
          <mat-form-field appearance="outline" class="w-100 mt-8">
            <mat-label>Comentarios extra</mat-label>
            <textarea rows="5" style="resize: none;" matInput [formControl]="extraComments"></textarea>
          </mat-form-field>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions align="end">
      <button mat-button (click)="openOrderDetails()">Ver detalles</button>
      <button mat-button (click)="asignAnalysis()">Asignar análisis</button>
    </mat-card-actions>
  </mat-card>
</div>