<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>

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

    <h5>{{ 'Document template detail' | translate }}</h5>

    <br>
    <p-tabView>
      <p-tabPanel header="Dati di base">
        <form [formGroup]='documentTemplateForm'>
          <span class="p-float-label">
            <input id="float-input-name" type="text" pInputText formControlName='name'>
            <label for="float-input-label">{{ 'Name *' | translate }}</label>
          </span>
          <small *ngIf="!documentTemplateForm.get('name').valid && documentTemplateForm.get('name').touched"
            class="p-invalid">{{ 'Name field is required' | translate }}</small>
        </form>
        <div class="button-box">
          <p-fileUpload #form mode="basic" auto="true" accept=".pdf" chooseIcon="" [customUpload]="true"
            (uploadHandler)="uploadDocumentTemplate($event, form)" chooseLabel="{{ 'Upload document template' | translate }}">
          </p-fileUpload>
          <p-button [disabled]="isNew" (onClick)="downloadDocumentTemplate()"
            label="{{ 'Download document template' | translate }}"></p-button>
        </div>
      </p-tabPanel>
    </p-tabView>
  </div>

</div>