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

  <div class="dialog-content">
    <div class="detail-row">
      <strong>{{ interService.get('id') }}:</strong>
      <span>{{ workflowData.ID_WORKFLOW }}</span>
    </div>

    <div class="detail-row">
      <strong>{{ interService.get('nombre') }}:</strong>
      <span>{{ workflowData.NOMBRE_WORKFLOW }}</span>
    </div>

    <div class="detail-row">
      <strong>{{ interService.get('descripcion') }}:</strong>
      <span>{{ workflowData.DESCRIPCION }}</span>
    </div>

    <div class="detail-row">
      <strong>{{ interService.get('modulos') }}:</strong>
      <span>{{ workflowData.MODULOS }}</span>
    </div>

    <div class="detail-row">
      <strong>{{ interService.get('predeterminado') }}:</strong>
      <span>
        <mat-icon
          [style.color]="workflowData.PREDETERMINADO ? '#4CAF50' : '#757575'"
        >
          {{ workflowData.PREDETERMINADO ? "check_circle" : "cancel" }}
        </mat-icon>
        {{ workflowData.PREDETERMINADO ? interService.get('si') : interService.get('no') }}
      </span>
    </div>

    <div class="detail-row">
      <strong>{{ interService.get('version') }}:</strong>
      <span>{{ workflowData.VERSION }}</span>
    </div>

    <div class="detail-row">
      <strong>{{ interService.get('estado') }}:</strong>
      <span>{{ workflowData.ESTADO }}</span>
    </div>

    <div class="detail-row">
      <strong>{{ interService.get('usuario_modifica') }}:</strong>
      <span>{{ workflowData.USUARIO_MODIFICA }}</span>
    </div>

    <div class="detail-row">
      <strong>{{ interService.get('fecha_modifica') }}:</strong>
      <span>{{ formatDate(workflowData.FECHA_MODIFICA) }}</span>
    </div>
  </div>

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