<div class="dialog-container">
  <div class="dialog-header">
    <h2>{{ interService.get('detalles_tarea') }}</h2>
    <button mat-icon-button (click)="close()">
      <mat-icon>close</mat-icon>
    </button>
  </div>

  @if (isLoading) {
  <div class="loading-container">
    <mat-progress-spinner diameter="50"></mat-progress-spinner>
    <p>{{ interService.get('cargando_informacion') }}</p>
  </div>
  } @else if (task) {
  <div class="dialog-content">
    <div class="detail-row">
      <strong>{{ interService.get('id') }}:</strong>
      <span>{{ task.ID_TAREA }}</span>
    </div>
    <div class="detail-row">
      <strong>{{ interService.get('nombre') }}:</strong>
      <span>{{ task.NOMBRE_TAREA }}</span>
    </div>
    <div class="detail-row">
      <strong>{{ interService.get('descripcion') }}:</strong>
      <span>{{ task.DESCRIPCION }}</span>
    </div>
    <div class="detail-row">
      <strong>{{ interService.get('secuencia') }}:</strong>
      <span>{{ task.SECUENCIA }}</span>
    </div>
    <div class="detail-row">
      <strong>{{ interService.get('requiere_validacion') }}:</strong>
      <span>
        <mat-icon
          [style.color]="task.REQUIERE_VALIDACION === 1 ? '#4CAF50' : '#757575'"
        >
          {{ task.REQUIERE_VALIDACION === 1 ? "check_circle" : "cancel" }}
        </mat-icon>
        {{ task.REQUIERE_VALIDACION === 1 ? interService.get('si') : interService.get('no') }}
      </span>
    </div>
    <div class="detail-row">
      <strong>{{ interService.get('usuario_validador') }}:</strong>
      <span>{{ task.USUARIO_VALIDADOR || interService.get('na') }}</span>
    </div>
    <div class="detail-row">
      <strong>{{ interService.get('regla_validacion') }}:</strong>
      <span>{{ task.REGLAS_VALIDACION || interService.get('na') }}</span>
    </div>
    <div class="detail-row">
      <strong>{{ interService.get('modulo') }}:</strong>
      <span>{{ task.ID_MODULO || interService.get('na') }}</span>
    </div>
    <div class="detail-row">
      <strong>{{ interService.get('funcion') }}:</strong>
      <span>{{ task.ID_FUNCION || interService.get('na') }}</span>
    </div>
    <div class="detail-row">
      <strong>{{ interService.get('estado') }}:</strong>
      <span>{{ task.ESTADO }}</span>
    </div>
    <div class="detail-row">
      <strong>{{ interService.get('usuario_registro') }}:</strong>
      <span>{{ task.USUARIO_REGISTRO || interService.get('na') }}</span>
    </div>
    <div class="detail-row">
      <strong>{{ interService.get('fecha_registro') }}:</strong>
      <span>{{ formatDate(task.FECHA_REGISTRO) }}</span>
    </div>
    @if (task.FECHA_MODIFICA) {
    <div class="detail-row">
      <strong>{{ interService.get('fecha_modifica') }}:</strong>
      <span>{{ formatDate(task.FECHA_MODIFICA) }}</span>
    </div>
    }
  </div>
  }

  <div class="dialog-actions">
    <button mat-button (click)="close()">{{ interService.get('cerrar') }}</button>
  </div>
</div>
