{#- The upload machine, and only that: the versions table above it is described
    (`crate::quasi::item_files`). This is the bespoke region that panel mounts,
    which is where markup driven by client-side state belongs -- a queue, a
    progress bar, a speed readout, a cancel, a retry and an error surface, all
    of it `static/item-upload.js`.

    The wrapper keeps its own id and `data-item-id`: the script reads them, and
    a described region carries no host dataset.

    Whether this region can be described was counted on 2026-08-30 and the
    answer is written down in `crate::quasi::item_files`, "Can the uploader move
    to the description layer?". Short version: the progress surface and the
    success/error surfaces need no new vocabulary and are the host's to draw
    already, and the one shape that is missing is a queue of picked files with a
    field per row. `quasi_router::Repeating` is the near miss and its own docs
    rule it out; the answer is a ruling in `quasi-router` and `makeover-layout`
    rather than a change here. -#}
<div class="version-upload" id="version-upload" data-item-id="{{ item.id }}">

    <!-- New Version Form -->
    <div id="new-version-form">
        <div class="item-version-upload-grid">
            <div class="form-group">
                <label for="new-version-number">Version Number</label>
                <input type="text" id="new-version-number" placeholder="e.g., 1.0">
            </div>
            <div class="form-group">
                <label for="version-changelog">Notes (optional)</label>
                <input type="text" id="version-changelog" placeholder="What changed in this version...">
            </div>
        </div>

        <div class="form-group">
            <label>Files</label>
            <div class="upload-hint item-version-upload-hint">Add one file per platform. Each gets its own label (e.g. "macOS (arm)", "Linux (x86_64)").</div>

            <table class="item-version-upload-file-table" id="version-file-table">
                <thead>
                    <tr>
                        <th>File</th>
                        <th>Label</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="version-file-rows"></tbody>
            </table>

            {#- What the queue takes and how many of them is described, not
                written out here: `crate::quasi::upload_field::version_queue`.
                It carries no destination on purpose, because nothing is sent
                until Upload All names the version. -#}
            <div class="item-version-upload-add-row" id="version-file-picker">
                {{ crate::quasi::upload_field::version_queue()|safe }}
            </div>
        </div>

        <button class="btn-primary" id="create-version-btn">Upload All</button>
    </div>

    {#- One described field per version that has no file yet. Each carries its
        own address, so picking a file uploads it to that version and nothing
        has to remember which button was pressed.

        Shown rather than revealed. The reveal was an "Upload File" button in
        the version's table row that unhid the panel here, and a described cell
        holds leaves and acts rather than a region to unhide. See
        `crate::quasi::item_files`, "What the reveal dance cost". -#}
    {% for version in versions %}{% if !version.has_file %}
    {#- `data-upload-goes` rather than `data-upload-refreshes`: that one names a
        control to click, and it named the tab *button* `#tab-files`, which the
        described strip (`6b24f2df`) stopped emitting. The item's audio upload
        already lands here the same way. -#}
    <div class="existing-version-upload" id="existing-version-upload-{{ version.id }}"
         data-upload-goes="/dashboard/item/{{ item.id }}?tab=files">
        <label>Add a file to v{{ version.number }}</label>
        {{ crate::quasi::upload_field::existing_version(version.id.as_str())|safe }}
    </div>
    {% endif %}{% endfor %}

    <!-- Shared upload progress/status (outside both forms so always visible) -->
    <div class="upload-progress hidden" id="version-upload-progress">
        <div class="item-version-upload-queue" id="version-upload-queue"></div>
        <div class="progress-info">
            <span id="version-upload-filename">filename.zip</span>
            <span id="version-upload-percent">0%</span>
        </div>
        <div class="progress-bar-container">
            <div class="progress-bar" id="version-progress-bar"></div>
        </div>
        <div class="item-version-upload-speed" id="version-upload-speed"></div>
        <button type="button" class="btn-secondary" id="cancel-version-upload-btn">Cancel</button>
    </div>

    <div class="upload-success hidden" id="version-upload-success">
        <span>Upload complete.</span>
    </div>

    <div class="upload-error hidden" id="version-upload-error">
        <span class="error-message" id="version-error-message"></span>
        <button type="button" class="btn-secondary" id="retry-version-upload-btn">Try Again</button>
    </div>
</div>