<div class="card">

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

  <div *ngIf="!isError && !isLoading">
    <p-toolbar styleClass="p-mb-4">
      <ng-template pTemplate="left"></ng-template>
      <ng-template pTemplate="right">
        <p-button *ngIf="IdControl && IdControl.value !== -1 && !isNew" [disabled]='isExportProcedureButtonDisabled'
          (onClick)="exportProcedure()">{{ 'Export procedure' | translate }}</p-button>
        <div>
          <div *ngIf="StatusControl.value !== EntityStatus.PUBLISHED">
            <p-button *ngIf="canPublish && !isNew" (onClick)="confirmPublishingOperation()"
              [disabled]="!procedureForm || !procedureForm.valid">{{ 'Publish the procedure' | translate }}</p-button>
            <p-button (onClick)="save(true)"
              [disabled]="!procedureForm.valid || (!configurationsForm  && TypeControl.value.code !== ProcType.SUB_WORKFLOW_BASED) || (!workflowForm.valid && TypeControl.value.code === ProcType.WORKFLOW_BASED)">
              {{ 'Save' | translate }}</p-button>
            <p-button (onClick)="updateAndPublish()" [hidden]="isNew" [disabled]="!procedureForm || !procedureForm.valid || !configurationsForm || !configurationsForm.valid ||
                           (TypeControl.value.code === ProcType.STANDARD &&  selectedForm.id === -1) || (TypeControl.value.code === ProcType.WORKFLOW_BASED && (WorkflowIdControl.value === '' ||
                            !WorkflowIdControl.value))">
              {{ 'Save and publish' | translate }}</p-button>
            <p-button (click)="cancel()">{{ 'Cancel' | translate }}</p-button>
            <app-procedure-scope-modal [showProcedureScopeModal]="showProcedureScopeModal"
              (onProcedureScopeCanceled)="showProcedureScopeModal = false"
              (onProcedureScopeSelected)="onProcedureScopeSelected($event)">
            </app-procedure-scope-modal>
          </div>
          <p-dialog *ngIf="showValidationErrorsModal" header="Errori di validazione"
            [(visible)]="showValidationErrorsModal" [modal]="true" [style]="{width: '60vw'}" [baseZIndex]="10000"
            [draggable]="false" [resizable]="false">
            <div class="error-message">{{ 'The following mistakes have been found in the workflow, it is necessary to
              correct them in order to publish' | translate }}</div>
            <p-table #dt [value]="validationErrors" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true"
              [filterDelay]="0">
              <ng-template pTemplate="header">
                <tr>
                  <th style="width: 40%">{{ 'Error' | translate }}</th>
                  <th style="width: 60%">{{ 'Where is it' | translate }}</th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-error>
                <tr class="p-selectable-row">
                  <td>
                    <span class="image-text" style="vertical-align: middle">{{ error.code | translate }}</span>
                  </td>
                  <td>
                    <ng-container>
                      <span *ngFor="let place of error.locations, let i = index">{{ place | translate }}<span
                          *ngIf="i !== error.locations.length - 1">, </span></span>
                    </ng-container>
                  </td>
                </tr>
              </ng-template>
            </p-table>
          </p-dialog>
          <div *ngIf="StatusControl.value === EntityStatus.PUBLISHED">
            <p-button (click)="confirmPublishingOperation()">{{ 'Cancel publication' | translate }}e</p-button>
          </div>
        </div>

      </ng-template>
    </p-toolbar>

    <h5>{{ 'Procedure detail' | translate }}</h5>
  </div>

  <br>
  <p-tabView [hidden]="isLoading">
    <p-tabPanel>
      <ng-template pTemplate="header">
        {{ 'Basic data' | translate }}
      </ng-template>
      <div *ngIf="showForm">
        <form [formGroup]='procedureForm'>

          <span class="p-float-label">
            <p-dropdown [options]="procedureTypes" [style]="{width: '100%'}" [formControl]="TypeControl"
              optionLabel="name" [disabled]="StatusControl.value === EntityStatus.PUBLISHED">
            </p-dropdown>
            <label for="float-input-domain">{{ 'Procedure type *' | translate }}</label>
          </span>

          <span class="p-float-label">
            <input id="float-input-name" type="text" pInputText [formControl]="NameControl" />
            <label for="float-input-name">{{ 'First name *' | translate }}</label>
          </span>
          <small *ngIf="!NameControl.valid && NameControl.touched" class="p-invalid">{{ 'Name field is required' |
            translate }}</small>

          <span class="p-float-label calendar-container"
            [hidden]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED">
            <p-calendar showButtonBar="true" [formControl]="EndedAtControl" [utc]="true" [showIcon]="true"
              inputId="enddate-icon" class="my-p-calendar" dateFormat="dd-mm-yy" [readonlyInput]="true"
              [disabled]="StatusControl.value === EntityStatus.PUBLISHED">
            </p-calendar>
            <label for="enddate-icon">{{ 'Ending date' | translate }}</label>
          </span>

          <span class="p-float-label form" *ngIf="TypeControl.value?.code === ProcType.STANDARD">
            <input disabled id="float-input-form" type="text" pInputText [formControl]='FormNameControl'>
            <label for="float-input-form">{{ 'Form *' | translate }}</label>
          </span>
          <p-button
            *ngIf="StatusControl.value !== ProcStatus.PUBLISHED && TypeControl.value?.code === ProcType.STANDARD"
            class="form-button" (click)="onSelectFormButtonClick()">{{ 'Choose form' | translate }}</p-button>
          <p-dialog *ngIf="showFormSelectionModal" header="Elenco moduli" [(visible)]="showFormSelectionModal"
            [modal]="true" [style]="{width: '80vw'}" [baseZIndex]="10000" [draggable]="false" [resizable]="false">
            <p-table #dt [value]="forms" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true"
              [filterDelay]="0" [rows]="10" [paginator]="true" [lazy]="true" (onLazyLoad)="loadForms($event)"
              [totalRecords]="formsTotalRecords">
              <ng-template pTemplate="header">
                <tr>
                  <th style="width: 28%">{{ 'Name' | translate }}</th>
                  <th style="width: 28%">{{ 'Creation date' | translate }}</th>
                  <th style="width: 28%">{{ 'Last edit date' | translate }}</th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-form>
                <tr class="p-selectable-row" (click)="onFormClicked(form)">
                  <td><span class="image-text" style="vertical-align: middle">{{ form.name }}</span></td>
                  <td>{{ form.createdAt | date: 'medium' }}</td>
                  <td>{{ form.updatedAt | date: 'medium' }}</td>
                </tr>
              </ng-template>
              <ng-template pTemplate="emptymessage">
                <tr>
                  <td colspan="3">{{ 'No items found' | translate }}</td>
                </tr>
              </ng-template>
            </p-table>
          </p-dialog>

          <div class="inline-box-container" *ngIf="showMultiSelect"
            [hidden]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED">
            <div class="viewer-box">
              <span class="p-float-label">
                <p-chips id="float-input-domain" [readonly]="true" [disabled]="true"
                  class="p-fluid p-inputwrapper-filled" [formControl]='DomainsControl'>
                  <ng-template let-item pTemplate="item">
                    {{ item.name }}
                  </ng-template>
                </p-chips>
                <label for="float-input-domain">{{ 'Domains' | translate }}</label>
              </span>
            </div>
            <div class="button-box">
              <p-button [disabled]="StatusControl.value === EntityStatus.PUBLISHED"
                (click)="displayDomainsDialog = true" label="{{'Select domains' | translate }}">
              </p-button>
            </div>
          </div>

          <span class="p-float-label" *ngIf="showMultiSelect && TypeControl.value?.code !== ProcType.STANDARD"
            [hidden]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED">
            <p-multiSelect id="float-input-statuses" [options]="procedureStatuses"
              [style]="{width: '100%', height: '35px'}" optionLabel="label"
              [disabled]="StatusControl.value === EntityStatus.PUBLISHED" [formControl]='ProcedureStatusControl'>
              <ng-template let-value pTemplate="selectedItems">
                <ng-container *ngFor="let option of value">
                  <p-chip class="p-multiselect-token" [removable]="option.key !== 'OPEN' && option.key !== 'CLOSED'"
                    (onRemove)="updateProcedureStatusControl(option)">
                    {{ option.label }}
                  </p-chip>
                </ng-container>
              </ng-template>
            </p-multiSelect>
            <label for="float-input-statuses">{{ 'Procedure statuses' | translate }}</label>

          </span>

          <div [hidden]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED">
            <label style="margin: 10px 0 2px 5px">{{ 'Description' | translate }}</label>
            <p-editor id="float-input-description" [readonly]="StatusControl.value === EntityStatus.PUBLISHED"
              [formControl]="DescriptionControl" [style]="{'height':'320px'}"></p-editor>
          </div>

          <div>
            <label style="margin: 15px 8px 0px 8px" for="float-input-name">{{ 'State:' | translate }}</label>
            <p-badge [value]="procedureStatusTranslated"></p-badge>
          </div>
        </form>
      </div>
    </p-tabPanel>

    <p-tabPanel [disabled]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED">
      <ng-template pTemplate="header">
        {{ 'Configurations' | translate }}
      </ng-template>

      <form [formGroup]='configurationsForm'>
        <div class="folder-box">
          <span class="p-float-label input-container">
            <input id="float-input-documentsBasePath" type="text" pInputText disabled class="folder"
              [formControl]='DocumentsBasePathControl'>
            <label for="float-input-documentsBasePath">{{ 'Document saving folder *' | translate }}</label>
          </span>
          <div class="button-box">
            <p-button class="folder-selection-button" [disabled]="StatusControl.value === EntityStatus.PUBLISHED"
              (onClick)="displayTreeDialog=true">{{ 'Choose folder' | translate }}</p-button>
          </div>
          <span class="p-float-label input-container">
            <input id="float-input-documentsPathPattern" type="text" pInputText class="folder"
              [(ngModel)]="procedure.documentsPathPattern" formControlName='documentsPathPattern'
              [attr.disabled]="StatusControl.value === EntityStatus.PUBLISHED ? true : null">
            <label for="float-input-documentsPathPattern">{{ 'Document path pattern' | translate }}</label>
            <small *ngIf="!DocumentsBasePathControl.valid && DocumentsBasePathControl.touched" class="p-invalid">
              {{ configurationsForm.get('documentsPathPattern').getError('error') | translate }}
              {{ ' Please read carefully the instructions by hovering the question mark on the right.' | translate }}
            </small>
          </span>
          <button pButton pRipple type="button" id="info-icon" class="p-button-rounded p-button-info"
            icon="pi pi-question" tooltipPosition="left"
            pTooltip="Per favore, attenersi alle seguenti istruzioni:&#13;&#10;-Il primo carattere deve essere '/'&#13;&#10;-L'ultimo carattere NON deve essere '/' od uno spazio&#13;&#10;-E' possibile utilizzare dei 'placeholders' per assegnare dinamicamente dei valori all'apertura della pratica&#13;&#10;&#13;&#10;I placeholder disponibili sono:&#13;&#10;-${day}&#13;&#10;-${month}&#13;&#10;-${year}&#13;&#10;-${procedureName}&#13;&#10;-${requesterIdentifier}&#13;&#10;&#13;&#10;Es:'/miaProcedura/${year}/testo${day}'">
          </button>
        </div>

        <p-dialog header="Seleziona cartella" [(visible)]="displayTreeDialog" [modal]="true" [style]="{width: '60vw'}"
          [baseZIndex]="10000" [draggable]="false" [resizable]="false">
          <app-folder-tree *ngIf="rootTree" [rootTree]="rootTree" (folderSelected)="onFolderSelected($event)">
          </app-folder-tree>
          <ng-template pTemplate="footer">
            <p-button icon="pi pi-check" (click)="folderSelectedConfirmationClick()" label="Ok"
              styleClass="p-button-text"></p-button>
          </ng-template>
        </p-dialog>

        <span class="p-float-label" *ngIf="showPluginProtocolGenerator">
          <p-dropdown [options]="pluginProtocolGenerators" [style]="{width: '100%'}" optionLabel="name"
            [(ngModel)]="pluginProtocolGenerator" [formControl]="ServicePluginProtocolIdControl" [showClear]="true"
            [autoDisplayFirst]="false" [disabled]="StatusControl.value === EntityStatus.PUBLISHED"
            (onChange)="onSelectedPluginProtocolGenerator($event)">
          </p-dropdown>
          <label for="float-input-domain">{{ 'Protocol number generator' | translate }}</label>
        </span>

        <div class="protocol-configurator"
          *ngIf="showPluginProtocolGenerator && pluginProtocolGenerator && pluginProtocolGeneratorSettings && pluginProtocolGeneratorSettings.settings.length>0">
          <label for="float-input-domain">
            {{ 'Protocol number generator configurations' | translate }}
          </label>
          <small *ngIf="pluginProtocolGenerators && !isPluginProtocolGeneratorSettingsValid" class="p-invalid">
            {{ 'Every property must be valued' | translate }}
          </small>
          <div>
            <app-editable-table [disabled]="StatusControl.value === EntityStatus.PUBLISHED"
              [rowsArray]='pluginProtocolGeneratorSettings.settings' (editedRowEvent)="handleEditedRowEvent($event)">
            </app-editable-table>
          </div>
        </div>

        <span class="p-float-label" *ngIf="showProcedureReport">
          <p-dropdown [options]="procedureReports" [style]="{width: '100%'}" [(ngModel)]="procedureReport"
            optionLabel="name" [formControl]="ProcedureReportIdControl" [showClear]="true" [autoDisplayFirst]="false"
            (onChange)="handleProcedureReportChange($event)"
            [disabled]="StatusControl.value === EntityStatus.PUBLISHED">
          </p-dropdown>
          <label for="float-input-domain">{{ 'Procedure report' | translate }}</label>
        </span>

        <span class="p-float-label" *ngIf="!!procedureReport">
          <input *ngIf="StatusControl.value === EntityStatus.PUBLISHED" disabled id="float-input-report-name"
            type="text" pInputText [formControl]='ProcedureReportNameControl'>
          <input *ngIf="StatusControl.value !== EntityStatus.PUBLISHED" id="float-input-report-name" type="text"
            pInputText [formControl]='ProcedureReportNameControl'>
          <label for="float-input-report-name">{{ 'Report Name *' | translate }}</label>
        </span>
        <small *ngIf="!!procedureReport && !ProcedureReportNameControl.valid && ProcedureReportNameControl.touched"
          class="p-invalid">{{ 'Procedure report name field is required' | translate }}</small>

      </form>
    </p-tabPanel>


    <p-tabPanel [disabled]="TypeControl.value?.code === ProcType.STANDARD">
      <ng-template pTemplate="header">
        {{ 'Workflow' | translate }}
      </ng-template>
      <div *ngIf="workflow && workflow.name !== ''" style="margin-bottom: 15px">
        <span class="p-column-title">{{ 'The workflow is:' | translate }}</span><b>{{ workflow.name }}</b>
      </div>
      <p-button id="select-workflow-button" *ngIf="showWorkflowButton" (onClick)="confirmChangeOfWorkflowOperation()"
        icon="pi pi-external-link" label="Seleziona Workflow"></p-button>

      <p-dialog *ngIf="showModal" header="Elenco workflow" [(visible)]="showModal" [modal]="true"
        [style]="{width: '80vw'}" [baseZIndex]="10000" [draggable]="false" [resizable]="false">

        <p-table *ngIf="workflows" selectionMode="single" [(selection)]="dummyWorkflowSelected" #dt [value]="workflows"
          dataKey="id" styleClass="p-datatable-customers" [rowHover]="true" [filterDelay]="0" [rows]="10"
          [paginator]="true" [lazy]="true" (onLazyLoad)="loadWorkflows($event)" [totalRecords]="totalWorkflowsNumber">
          <ng-template pTemplate="header">
            <tr>
              <th style="width: 21%">{{ 'First name' | translate }}</th>
              <th style="width: 21%">{{ 'Creation date' | translate }}</th>
              <th style="width: 21%">{{ 'Last edit date' | translate }}</th>
              <th style="width: 21%">{{ 'State' | translate }}</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-workflow>
            <tr class="p-selectable-row" [pSelectableRow]="workflow" (click)="onWorkflowClicked(workflow.id)">
              <td><span class="image-text" style="vertical-align: middle">{{ workflow.name }}</span></td>
              <td>{{ workflow.createdAt | date: 'medium' }}</td>
              <td>{{ workflow.updatedAt | date: 'medium' }}</td>
              <td>{{ workflow.status | translate }}</td>
            </tr>
          </ng-template>
          <ng-template pTemplate="emptymessage">
            <tr>
              <td colspan="4">{{ 'No items found' | translate }}</td>
            </tr>
          </ng-template>
        </p-table>
        <ng-template pTemplate="footer">
          <p-button icon="pi pi-check" (click)="onWorkflowConfirmed()" label="Ok" styleClass="p-button-text"></p-button>
        </ng-template>
      </p-dialog>
      <app-workflow-navigated-viewer height="tall" *ngIf="showWorkflowPreview" [input]="workflowDefinition">
      </app-workflow-navigated-viewer>
    </p-tabPanel>

    <p-tabPanel class="visibility-panel" [disabled]="!areVariablesLoaded
                            || (TypeControl.value?.code === ProcType.WORKFLOW_BASED && (!workflow || workflow.name === ''))
                            || (TypeControl.value?.code === ProcType.STANDARD && !FormIdControl.value)">
      <ng-template pTemplate="header">
        {{ 'Visibility settings' | translate }}
      </ng-template>
      <p-tabView>
        <p-tabPanel>
          <ng-template pTemplate="header">
            {{ 'Simple variables' | translate }}
          </ng-template>
          <div class="global-variable-dropdown-reference">
            <div class="global-variable-dropdown">
              <label>
                {{ 'Set visibility for all variables: ' | translate }}
              </label>
              <p-dropdown [disabled]="isVariableVisibilitySelectDisabled" [options]="visibilityOptions"
                optionLabel="label" optionValue="value" placeholder="Seleziona.."
                [(ngModel)]="globalVariablesVisibilitySetting">
              </p-dropdown>
              <p-button [disabled]="isVariableVisibilitySelectDisabled || !globalVariablesVisibilitySetting"
                (onClick)="setGlobalVariablesVisibilitySetting('simple')" [label]="'Apply' | translate"></p-button>
            </div>
          </div>
          <p-table [value]="simpleVariables" dataKey="id">
            <ng-template pTemplate="header">
              <tr>
                <th>{{ 'Variable name' | translate }}</th>
                <th>{{ 'Visibility' | translate }}</th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-variable>
              <tr>
                <td>{{ variable.name }}</td>
                <td>
                  <p-dropdown [disabled]="isVariableVisibilitySelectDisabled" [options]="visibilityOptions"
                    [(ngModel)]="variable.procedureVariableVisibilityType" optionLabel="label" optionValue="value"
                    placeholder="variable.procedureVariableVisibilityType">
                  </p-dropdown>
                </td>
              </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage">
              <tr>
                <td>{{ 'No items found' | translate }}</td>
                <td></td>
              </tr>
            </ng-template>
          </p-table>
        </p-tabPanel>

        <p-tabPanel>
          <ng-template pTemplate="header">
            {{ 'Document variables' | translate }}
          </ng-template>
          <div class="global-variable-dropdown-reference">
            <div class="global-variable-dropdown">
              <label>
                {{ 'Set visibility for all variables: ' | translate }}
              </label>
              <p-dropdown [disabled]="isVariableVisibilitySelectDisabled" [options]="visibilityOptions"
                optionLabel="label" optionValue="value" placeholder="Seleziona.."
                [(ngModel)]="globalVariablesVisibilitySetting">
              </p-dropdown>
              <p-button [disabled]="isVariableVisibilitySelectDisabled || !globalVariablesVisibilitySetting"
                (onClick)="setGlobalVariablesVisibilitySetting('document')" [label]="'Apply' | translate"></p-button>
              <p-button [disabled]="StatusControl.value === EntityStatus.PUBLISHED" id="button-with-margin"
                (onClick)="openAddVariableModal()" [label]="'Add permission' | translate"></p-button>
            </div>
          </div>
          <p-table [value]="documentVariables" dataKey="id">
            <ng-template pTemplate="header">
              <tr>
                <th>{{ 'Variable name' | translate }}</th>
                <th>{{ 'Visibility' | translate }}</th>
                <th>{{ 'Custom' | translate }}</th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-variable>
              <tr>
                <td>{{ variable.name }}</td>
                <td>
                  <p-dropdown [disabled]="isVariableVisibilitySelectDisabled" [options]="visibilityOptions"
                    [(ngModel)]="variable.procedureVariableVisibilityType" optionLabel="label" optionValue="value"
                    placeholder="variable.procedureVariableVisibilityType">
                  </p-dropdown>
                </td>
                <td>
                  <p>{{ getProcedureVariablePermissionType(variable) }}</p>
                </td>
                <td style="text-align: center">
                  <button
                    *ngIf="StatusControl.value !== EntityStatus.PUBLISHED && variable.procedureVariablePermissionType"
                    pButton pRipple type="button" class="p-button-rounded p-button-warning" icon="pi pi-trash"
                    (click)="confirmVariableDeletion(variable)" pTooltip="{{ 'Delete variable' | translate }}" tooltipPosition="top"></button>
                </td>
              </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage">
              <tr>
                <td>{{ 'No items found' | translate }}</td>
                <td></td>
              </tr>
            </ng-template>
          </p-table>
        </p-tabPanel>
      </p-tabView>
    </p-tabPanel>

    <p-tabPanel *ngIf="showPublications" [disabled]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED">
      <ng-template pTemplate="header">
        {{ 'Publications' | translate }}
      </ng-template>
      <p-table #dt [value]="publications" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true"
        [filterDelay]="0" [rows]="10" [paginator]="true" [lazy]="true" (onLazyLoad)="loadPublications($event)"
        [totalRecords]="publicationsTotalRecords" [hidden]="isPublicationsLoading" [(first)]="publicationsFirstPage">
        <ng-template pTemplate="header">
          <tr>
            <th style="width: 22%">{{ 'Name' | translate }}</th>
            <th style="width: 22%">{{ 'Version' | translate }}</th>
            <th style="width: 22%">{{ 'Publication date' | translate }}</th>
            <th style="width: 12%"></th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-publication>
          <tr class="p-selectable-row">
            <td><span class="image-text" style="vertical-align: middle">{{ publication.name }}</span></td>
            <td>{{ publication.deploymentVersion }}</td>
            <td>{{ publication.publishedAt | date: 'medium' }}</td>
            <td style="text-align: center">
              <button pButton type="button" class="p-button-rounded p-button-success p-mr-2" icon="pi pi-search-plus"
                style="margin-right: 3px" (click)="openPublicationDetailModal(publication, publication.deploymentVersion)"
                pTooltip="{{ 'Open publication detail' | translate }}" tooltipPosition="top"></button>
            </td>
          </tr>
        </ng-template>
        <ng-template pTemplate="emptymessage">
          <tr>
            <td colspan="4">{{ 'No items found' | translate }}</td>
          </tr>
        </ng-template>
      </p-table>
    </p-tabPanel>

    <p-tabPanel [disabled]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED">
      <ng-template pTemplate="header">
        {{ 'Metadata' | translate }}
      </ng-template>
      <ng-template pTemplate="body">
        <div class="metadata-box">
          <p-button id="metadata-button" [disabled]="StatusControl.value === EntityStatus.PUBLISHED"
            (onClick)="onShowModalMetadataClick()" icon="pi pi-external-link" label="{{ 'Add metadata' | translate }}">
          </p-button>

          <p-table #dt [value]="metaDataList" dataKey="id" styleClass="p-datatable-customers">
            <ng-template pTemplate="header">
              <tr>
                <th style="width: 40%">{{ 'Name' | translate }}</th>
                <th style="width: 50%">{{ 'Value' | translate }}</th>
                <th style="width: 12%"></th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-metadata>
              <tr class="p-selectable-row">
                <td><span class="image-text" style="vertical-align: middle">{{ metadata.name }}</span></td>
                <td>{{ metadata.value }}</td>
                <td style="text-align: center">
                  <button pButton type="button" class="p-button-rounded p-button-warning" icon="pi pi-trash"
                    (click)="confirmMetadataDeletion(metadata.name)"
                    *ngIf="StatusControl.value !== EntityStatus.PUBLISHED"
                    pTooltip="{{ 'Delete metadata' | translate }}" tooltipPosition="top"></button>
                </td>
              </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage">
              <tr>
                <td colspan="3">{{ 'No items found' | translate }}</td>
              </tr>
            </ng-template>
          </p-table>
        </div>
      </ng-template>
    </p-tabPanel>
  </p-tabView>

  <app-publication-detail-modal *ngIf="showPublicationDetailModal" [publicationVersion]="publicationVersion"
    [publicationId]="publicationId" [showPublicationModal]="showPublicationDetailModal"
    (publicationModalClose)="onPublicationModalClose()"></app-publication-detail-modal>

  <p-dialog [(visible)]="showAddVariableModal" [modal]="true" [style]="{width: '40vw'}" [baseZIndex]="10000"
    [draggable]="false" [resizable]="false" (onHide)="closeAddVariableModal()">
    <ng-template pTemplate="header">
      <div class="p-d-flex p-flex-column p-flex-md-row p-jc-md-between table-header" style="font-size: 1.5rem">
        {{ 'Add permission' | translate }}
      </div>
    </ng-template>
    <ng-template pTemplate="body">

      <form [formGroup]='newVariableForm'>
        <span class="p-float-label">
          <input id="float-input-new-variable" type="text" pInputText [(ngModel)]="newVariable"
            formControlName="newVariable">
          <label for="float-input-new-variable">{{ 'Name *' | translate }}</label>
        </span>
        <small
          *ngIf="newVariableForm.get('newVariable').touched && newVariableForm.get('newVariable').valid && isVariableDuplicated()"
          class="p-invalid">{{ 'Name field is already used' | translate }}</small>
        <small *ngIf="newVariableForm.get('newVariable').touched && !newVariableForm.get('newVariable').valid"
          class="p-invalid">{{ 'Name field is required' | translate }}</small>
      </form>

    </ng-template>
    <ng-template pTemplate="footer">
      <p-button *ngIf="!newVariableForm.get('newVariable').touched
                      || !newVariableForm.get('newVariable').valid
                      || isVariableDuplicated()" icon="pi pi-check" [disabled]="true" styleClass="p-button-text"
        [label]="'Add' | translate"></p-button>
      <p-button *ngIf="newVariableForm.get('newVariable').touched
                      && newVariableForm.get('newVariable').valid
                      && !isVariableDuplicated()" icon="pi pi-check" (click)="addVariable()" styleClass="p-button-text"
        [label]="'Add' | translate"></p-button>
    </ng-template>

  </p-dialog>

  <p-dialog [(visible)]="showFormMetadataModal" [modal]="true" [style]="{width: '40vw'}" [baseZIndex]="10000"
    [draggable]="false" [resizable]="false">

    <ng-template pTemplate="header">
      <div class="p-d-flex p-flex-column p-flex-md-row p-jc-md-between table-header" style="font-size: 1.5rem">
        {{ 'Add metadata' | translate }}
      </div>
    </ng-template>
    <ng-template pTemplate="body">
      <form [formGroup]='newMetadataForm'>
        <!--    <span class="p-float-label">
          <p-dropdown
          id="float-input-metadata"
          [options]="defaultMetadata"
          [style]="{width: '35%'}"
          [autoDisplayFirst]="false"
          [showClear]="true"
          optionLabel="name"
          (onChange)="defaultMetadataSelection($event)"></p-dropdown>
          <label for="float-input-metadata">{{ 'Default metadata' | translate }}</label>
        </span>-->
        <span class="p-float-label">
          <input id="float-input-name" type="text" pInputText [(ngModel)]="metadata.name" formControlName="name">
          <label for="float-input-name">{{ 'Name *' | translate }}</label>
        </span>
        <small *ngIf="!newMetadataForm.get('name').valid" class="p-invalid">
          {{ 'Name field is required' | translate }}
        </small>
        <span class="p-float-label">
          <input id="float-input-value" type="text" pInputText [(ngModel)]="metadata.value" formControlName="value">
          <label for="float-input-value">{{ 'Value *' | translate }}</label>
        </span>
        <small *ngIf="!newMetadataForm.get('value').valid" class="p-invalid">
          {{ 'Value field is required' | translate }}
        </small>
      </form>
    </ng-template>
    <ng-template pTemplate="footer">
      <p-button [disabled]="!newMetadataForm.get('name').valid || !newMetadataForm.get('value').valid"
        icon="pi pi-check" (onClick)="addMetadata()" styleClass="p-button-text" [label]="'Add' | translate"></p-button>
    </ng-template>
  </p-dialog>
</div>

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

<app-node-tree *ngIf="showMultiSelect" [treeNodes]="domainsTree" [selectionMode]="'checkbox'"
  (selectedTreeNodes)="onChangeSelectedDomains($event)" [(showDialog)]="displayDomainsDialog"
  (closedDialog)="displayDomainsDialog = false" [(selectedNodes)]="this.DomainsControl.value">
</app-node-tree>