@if ((attachments$ | async).length > 0) {
  <op-attachment-list [ngClass]="{
      'op-file-section--list': true,
      'op-file-section--list_dragging': dragging > 0
    }"
    [attachments]="attachments$ | async"
    [collectionKey]="collectionKey"
    [showTimestamp]="showTimestamp"
    [showDelete]="allowRemoval"
    (attachmentRemoved)="attachmentRemoved.emit()"
   />
}


@if (allowUploading && resource.canAddAttachments) {
  <input
    #hiddenFileInput
    type="file"
    id="attachment_files"
    name="attachment_files"
    (change)="onFilePickerChanged()"
    hidden
    multiple
  />

  <button
    [attr.aria-label]="text.uploadLabel"
    data-test-selector="op-attachments--drop-box"
    [ngClass]="{
    'hide-when-print': true,
    'op-file-section--drop-box': true,
    'op-file-section--drop-box_dragging': dragging > 0,
    'op-file-section--drop-box_dragging-over': draggingOverDropZone,
    'op-file-section--drop-box_float': (attachments$ | async).length
  }"
    type="button"
    (click)="triggerFileInput()"
    (dragover)="onDragOver($event)"
    (dragleave)="onDragLeave($event)"
    (drop)="onDropFiles($event)"
  >
    <svg op-add-attachment-icon size="small"></svg>

    @if ((attachments$ | async).length === 0) {
      <span class="op-file-section--drop-box-text" [textContent]="text.dropClickFiles"></span>
    } @else {
      <span class="op-file-section--drop-box-text" [textContent]="text.dropFiles"></span>
    }
  </button>

  <div class="op-file-section--actions hide-when-print">
    @if (!externalUploadButton) {
      <button
        type="button"
        class="spot-link"
        (click)="triggerFileInput()"
        data-test-selector="op-attachments--upload-button"
      >
        <svg op-add-attachment-icon size="small"></svg>
        <span [textContent]="text.uploadLabel"></span>
      </button>
    }
  </div>
}