<h2 mat-dialog-title class="prevent-select">{{ interService.get('ver_flujo') }}</h2>
<div mat-dialog-content class="prevent-select">
  <div class="action-options">
    <div class="override-buttons" style="justify-content: flex-end;">
      <button mat-mini-fab [matTooltip]="interService.get('actualizar_datos')" (click)="getTaskByWorkflow()"
      class="orange_primary_background white_font override_no_shadow ml-8">
        <mat-icon>refresh</mat-icon>
      </button>
    </div>
  </div>
  <app-loading-card [isLoading]="isLoading" [txtLoading]="interService.get('cargando_informacion_tareas')" />
  <div class="flow-container" id="flow-container" [style.visibility]="isLoading ? 'hidden' : 'visible'">
    <f-flow fDraggable>
      <f-canvas>
        @for (flowTask of flowTasks; track $index) {
          <div fNode fDragHandle [fNodePosition]="{ x: flowTask.positionX, y: flowTask.positionY }" fInputConnectableSide="left"
          fNodeOutput [fOutputId]="flowTask.outputID!" fNodeInput [fInputId]="flowTask.inputID!" fOutputConnectableSide="right"
          fOutputConnectableSide="right">{{ flowTask.label }}</div>
        }
        @for (flowConnection of flowConnections; track $index) {
          <f-connection [fReassignDisabled]="true" fType="segment" [fOutputId]="flowConnection.outputID!" [fInputId]="flowConnection.inputID!" 
          [fBehavior]="eConnectionBehaviour.FIXED">
            <svg viewBox="0 0 10 10" fMarker [type]="eMarkerType.START" [height]="10" [width]="10" [refX]="5" [refY]="5">
              <circle cx="5" cy="5" r="5" stroke="none" fill="var(--connection-gradient-1)"></circle>
            </svg>
            <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.END" [height]="10" [width]="10" [refX]="9" [refY]="5">
              <path fill="var(--connection-gradient-2)" d="M0,0L700,350L0,700L150,350z"></path>
            </svg>
          </f-connection>
        }
      </f-canvas>
    </f-flow>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>