<div class="main-container">
  <div class="scrollable-area">
    @if ((field | async)?.value) {
      <p [innerHTML]="'resource.field-file-dropzone-label' | translate: { filename: (filename | async) }"></p>
      <stf-dropzone
        [isUploading]="isUploading"
      (file)="newFile = $event"></stf-dropzone>
    }

    @if (newFile) {
      <p>
        <strong>{{ 'resource.field-file-new-file' | translate }}</strong>
        {{ newFile.name }}
      </p>
    }
  </div>
</div>
<footer class="form-field-buttons">
  <div class="save-actions">
    <pa-button
      kind="primary"
      [disabled]="!newFile || isUploading"
      (click)="save()">
      {{ 'generic.save' | translate }}
    </pa-button>

    <pa-button
      aspect="basic"
      [disabled]="!newFile || isUploading"
      (click)="cancel()">
      {{ 'generic.cancel' | translate }}
    </pa-button>
  </div>
  <pa-button
    kind="destructive"
    [disabled]="!isReady || isUploading"
    (click)="deleteField()">
    {{ 'resource.field.delete' | translate }}
  </pa-button>
</footer>
