<div class="card">

  <div *ngIf="isTaskLoading || isFormLoading || isWorkflowLoading" class="spinner-container">
    <p-progressSpinner></p-progressSpinner>
  </div>

  <div [hidden]="isTaskLoading || isFormLoading || isWorkflowLoading">
    <p-toolbar styleClass="p-mb-4">
      <ng-template pTemplate="left"></ng-template>
      <ng-template pTemplate="right">
        <p-button *ngIf="canUnclaim" (onClick)="unclaim()" [disabled]="false">{{ 'Untake charge' | translate }}
        </p-button>
        <p-button *ngIf="canClaim" (onClick)="claim()" [disabled]="false">{{ 'Take charge' | translate }}</p-button>
        <p-button *ngIf="canSave" (onClick)="save()" [disabled]="!isFormValid || isCustomValidationLoading">{{ 'Save' |
          translate }}</p-button>
        <p-button (click)="cancel()">{{ 'Cancel' | translate }}</p-button>
      </ng-template>
    </p-toolbar>

    <p-confirmDialog [style]="{width: '40vw'}" [baseZIndex]="10000000" rejectButtonStyleClass="p-button-text">
    </p-confirmDialog>

    <h5>Dettaglio {{ 'Activities' | translate }}</h5>

    <br>
    <p-tabView>
      <p-tabPanel [header]="task.name">
        <div class="form-box">
          <p-button *ngIf="canSave && isDraftProcessingPermissionEnabled()" (click)="saveDraft()">{{ 'Save draft' |
            translate }}</p-button>
          <p-button *ngIf="canSave && isDraftProcessingPermissionEnabled()" (click)="confirmGetDraft()"
            [hidden]="!formDraft">{{ 'Load draft' | translate }}</p-button>
        </div>
        <app-formio-viewer
          #formViewer
          [input]="form.content"
          [processInstanceVariables]="variables"
          [isReadOnly]="false"
          *ngIf="canSave && !!form && !!form.content && !!variables"
          (onFormValid)="handleFormInput($event)"></app-formio-viewer>
        <app-formio-viewer
          [input]="form.content"
          [processInstanceVariables]="variables"
          [isReadOnly]="true"
          *ngIf="!canSave && !!form && !!form.content && !!variables"
          (onFormValid)="handleFormInput($event)"></app-formio-viewer>
        <div *ngIf="isFormError && !isFormLoading" class="error-message-container">
          <p>{{ 'Data Loading Error' | translate }}</p>
        </div>
      </p-tabPanel>

      <p-tabPanel header="{{ 'Variables' | translate }}">
        <app-form-variables-detail *ngIf="task && !isTaskError && !isTaskLoading"
          [processInstanceVariables]="task.variables" [processInstanceVariableOrigins]="task.variableOrigins">
        </app-form-variables-detail>
        <div *ngIf="isTaskError && !isTaskLoading" class="error-message-container">
          <p>{{ 'Data Loading Error' | translate }}</p>
        </div>
      </p-tabPanel>

      <p-tabPanel header="{{ 'Documents' | translate }}">
        <app-form-documents-detail *ngIf="task.procedureInstanceId && !isTaskError && !isTaskLoading"
          [procedureInstanceId]="task.procedureInstanceId"></app-form-documents-detail>
        <div *ngIf="isTaskError && !isTaskLoading" class="error-message-container">
          <p>{{ 'Data Loading Error' | translate }}</p>
        </div>
      </p-tabPanel>

      <p-tabPanel header="Workflow">
        <app-workflow-navigated-viewer *ngIf="isWorkflowLoaded && !isWorkflowError && !isWorkflowLoading"
          [input]="workflow" [selectedTasks]="[task.activityId]">
        </app-workflow-navigated-viewer>
        <div *ngIf="isWorkflowError && !isWorkflowLoading" class="error-message-container">
          <p>{{ 'Data Loading Error' | translate }}</p>
        </div>
      </p-tabPanel>

      <p-tabPanel header="{{ 'Submissions' | translate }}">
        <app-submissions-list *ngIf="submissions && !isSubmissionsError && !areSubmissionsLoading"
          [submissions]="submissions" [formModules]="submissionFormModules"></app-submissions-list>
        <div *ngIf="isSubmissionsError && !areSubmissionsLoading" class="error-message-container">
          <p>{{ 'Data Loading Error' | translate }}</p>
        </div>
      </p-tabPanel>
    </p-tabView>
  </div>

</div>