{# The upload control for one upload-capable meeting (ADR-0024). htmx streams
   the multipart body (`hx-encoding`); htmx 4 sends it with `fetch()`, which
   reports no upload progress, so this control shows an indeterminate busy state
   instead of a percentage. `hx-preserve` keeps the chosen file across a
   re-render. `accept` is the service's own audio allow-list (`audio_accept`,
   from `managed.AUDIO_SUFFIXES`) — the picker and the upload guard cannot
   drift. #}
<div class="upload" x-data="{ busy: false }">
  <form class="row upload-form"
        x-on:htmx:before:request="busy = true"
        x-on:htmx:finally:request="busy = false"
        hx-post="/ui/meetings/{{ storage.meeting_id }}/tapes/upload"
        hx-encoding="multipart/form-data"
        hx-target="#storage-{{ storage.meeting_id }}"
        hx-swap="innerHTML">
    {# htmx preserve keys on the element id, so the input must carry one (and the
       template renders it again after a swap) for the chosen file to survive a
       re-render. #}
    <input type="file" name="file" id="upload-file-{{ storage.meeting_id }}"
           accept="{{ audio_accept }}" required hx-preserve
           aria-label="{{ tr('Audio tape') }}">
    <button class="primary" type="submit" :disabled="busy">
      <span x-show="!busy">{{ tr("Upload tape") }}</span>
      <span x-show="busy" x-cloak>{{ tr("Uploading…") }}</span>
    </button>
  </form>
  <div class="upload-progress" x-show="busy" x-cloak role="status">
    <progress aria-label="{{ tr('Upload progress') }}"></progress>
    <span class="muted">{{ tr("Uploading…") }}</span>
  </div>
</div>