<div class="card">

  <div *ngIf="isLoading" class="spinner-container">
    <p-progressSpinner></p-progressSpinner>
  </div>
  <div *ngIf="hasError && !isLoading" class="error-message-container">
    <p>{{ 'Data Loading Error' | translate }}</p>
  </div>

  <p-toolbar styleClass="p-mb-4" *ngIf="!isLoading && !hasError">
    <ng-template pTemplate="left"></ng-template>
    <ng-template pTemplate="right">
      <p-button *ngIf="id" (onClick)="handleFileToTestModal()">{{ 'Test' | translate }}</p-button>
      <p-button (onClick)="save()" [disabled]="!documentConverterForm.valid">{{ 'Save' | translate }}</p-button>
      <p-button (onClick)="cancel()">{{ 'Cancel' | translate }}</p-button>
    </ng-template>
  </p-toolbar>

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

  <p-dialog [(visible)]="displayConverterTestModal" (onHide)="converterFilesTableValues = []" [modal]="true"
    [style]="{width: '60vw'}" [baseZIndex]="10000" [draggable]="false" [resizable]="false">
    <ng-template id="modal-title" pTemplate="header">
      <h4 style="font-weight: 600; font-style: 1.25rem  ;">{{ 'Document converter functionality test' | translate }}
      </h4>
    </ng-template>
    <div id="main-modal-content" class="file-box">
      <div class="row">
        <p-button (onClick)="clickHiddenInput()">{{ 'Select one or more file to test' | translate }}</p-button>
        <div *ngIf="converterFilesTableValues.length === 0">
          <span>{{ ('No file selected' | translate) }}</span>
        </div>
        <input class="file-upload" [hidden]=true id="fileToTestUpload" type='file'
          (change)="addNewFile($event.target.files)" (click)="$event.target.value=null" multiple>
      </div>
      <div class="row">
        <p-table [columns]="converterFilesTableColumns" [value]="converterFilesTableValues" responsiveLayout="scroll">
          <ng-template pTemplate="header" let-columns>
            <tr>
              <th *ngFor="let col of columns">
                {{ col.header | translate }}
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-converterFilesTableValues let-rowIndex="rowIndex" let-columns="columns">
            <tr>
              <td *ngFor="let col of columns; let i = index">
                <ng-container *ngIf="col.field === 'fileName'">
                  {{ converterFilesTableValues[col.field] }}
                </ng-container>
                <ng-container *ngIf="col.field === 'nameIdentifier'">
                  <span class="nameIdentifier-container">
                    <input value="{{ converterFilesTableValues[col.field] }}" pInputText
                      [(ngModel)]="converterFilesTableValues.nameIdentifier" />
                    <button pButton pRipple type="button" class="p-button-rounded p-button-warning" icon="pi pi-trash"
                      (click)="removeFile(rowIndex)"></button>
                  </span>
                </ng-container>
              </td>
            </tr>
          </ng-template>
        </p-table>
      </div>
    </div>
    <span id="test-error-output" class="p-float-label" *ngIf="thisFailedTestError">
      <textarea id="test-error-output-textarea" autoResize="false" pInputTextarea>{{ thisFailedTestError }}</textarea>
      <label for="test-error-output-textarea">{{ 'Error description' | translate }}</label>
    </span>
    <ng-template pTemplate="footer">
      <p-button icon="pi pi-check" [disabled]="converterFilesTableValues.length === 0" label="Test"
        (click)="executeTest()" styleClass="p-button-text" pTooltip="{{ 'Run test' | translate }}" tooltipPosition="top"></p-button>
    </ng-template>
  </p-dialog>

  <p-table styleClass="p-datatable-customers">
    <ng-template pTemplate="caption">
      <div id="tableTitle" class="p-d-flex p-flex-column p-jc-start p-flex-md-row p-jc-md-start table-header">
        {{ 'Document converter detail' | translate }}
      </div>
    </ng-template>
  </p-table>

  <br>
  <form *ngIf="!isLoading && !hasError && converterTypes" [formGroup]='documentConverterForm' (ngSubmit)="onSubmit()">
    <div id="sharedInputsFormDiv">
      <span class="p-float-label">
        <input id="float-input-name" type="text" pInputText formControlName='name'>
        <label for="float-input-name">{{ 'Name *' | translate }}</label>
      </span>
      <small *ngIf="!documentConverterForm.get('name').valid && documentConverterForm.get('name').touched"
        class="p-invalid">{{ 'Name field is required' | translate }}</small>
      <span class="p-float-label">
        <input id="float-input-key" type="text" pInputText formControlName='key'>
        <label for="float-input-key">{{ 'Identifier *' | translate }}</label>
      </span>
      <small *ngIf="!documentConverterForm.get('key').valid && documentConverterForm.get('key').touched"
        class="p-invalid">{{ 'Identifier field is required' | translate }}</small>
      <div id="dropdown-converter-types">
        <label for="dropdown-converter-types">{{ 'Document converter type: *' | translate }}</label>
        <p-dropdown [options]="converterTypes" optionLabel="name" optionValue="type" formControlName='type'
          placeholder="Seleziona un tipo">
        </p-dropdown>
        <small *ngIf="!documentConverterForm.get('type').valid && documentConverterForm.get('type').touched"
          class="p-invalid">{{ 'Converter type field is required' | translate }}</small>
      </div>
    </div>
    <div
      *ngIf="this.documentConverterForm.get('type').value && this.documentConverterForm.get('type').value.name !== ''"
      [ngSwitch]="this.documentConverterForm.get('type').value">
      <div *ngSwitchCase="'it.almaviva.gestionepratiche.document.converters.pdfxml.PdfToXmlDocumentConverter'">
        <app-pdf-xsl formControlName='dynamicFormPart'></app-pdf-xsl>
      </div>
      <div *ngSwitchCase="match_expression_2">...</div>
      <div *ngSwitchDefault>{{ 'Error viewing converter type options' | translate}}</div>
    </div>
  </form>
</div>