<div class="main-container">
  <div class="scrollable-area with-footer">
    <nsi-dropdown-button [popupRef]="fieldTypeDropdown">
      {{ 'resource.field.add' | translate }} {{ 'resource.field-' + fieldType.value | translate }}
    </nsi-dropdown-button>
    <pa-dropdown #fieldTypeDropdown>
      @for (type of availableTypes; track type) {
        <pa-option
          [value]="type"
          (selectOption)="changeFieldType(type)">
          {{ 'resource.field-' + type | translate }}
        </pa-option>
      }
    </pa-dropdown>

    <form [formGroup]="form">
      @if (fieldType.value === 'text') {
        <div class="field-block">
          <pa-select
            id="format"
            formControlName="format"
            [label]="'resource.field-text-format-label' | translate">
            @for (format of availableFormats; track format) {
              <pa-option
                [value]="format">
                {{ format }}
              </pa-option>
            }
          </pa-select>
        </div>
        <div class="field-block">
          <nsi-expandable-textarea
            id="text"
            formControlName="text"
            modalTitle="resource.field-text-body-label"
            resizable
            acceptHtmlTags>
            {{ 'resource.field-text-body-label' | translate }}
          </nsi-expandable-textarea>
        </div>
      }

      @if (fieldType.value === 'link') {
        <div class="field-block">
          <pa-input
            id="link"
            formControlName="text"
            [errorMessages]="textErrors">
            URL
          </pa-input>
        </div>
      }

      @if (fieldType.value === 'file') {
        <stf-dropzone
          [isUploading]="isSaving"
        (file)="onFileChange($event)"></stf-dropzone>
        @if (newFile) {
          <p>
            <strong>{{ 'resource.field-file-new-file' | translate }}</strong>
            {{ newFile.name }}
          </p>
        }
      }
    </form>
  </div>
</div>

<footer class="form-buttons">
  <pa-button
    kind="primary"
    [disabled]="form.invalid || !isModified"
    (click)="save()">
    {{ 'generic.save' | translate }}
  </pa-button>

  <pa-button
    aspect="basic"
    [disabled]="!isModified"
    (click)="cancel()">
    {{ 'generic.cancel' | translate }}
  </pa-button>
</footer>
