{%- import "partials/_ui.html" as ui -%}
<div class="version-upload" id="version-upload" data-item-id="{{ item.id }}">

    {% if versions.is_empty() %}
    {% call ui::empty_state("", "No versions uploaded yet. Create your first version below.") %}{% endcall %}
    {% else %}
    <table class="data-table well">
        <thead>
            <tr>
                <th>Version</th>
                <th>Label</th>
                <th>File</th>
                <th>Size</th>
                <th>Downloads</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for version in versions %}
            <tr id="version-row-{{ version.id }}">
                <td><span class="badge"{% if version.is_current %} data-tone="success"{% endif %}>v{{ version.number }}</span></td>
                <td class="item-version-upload-cell-sm">{% if let Some(label) = version.label %}{{ label }}{% endif %}</td>
                <td class="item-version-upload-cell-sm">{% if version.has_file %}{% match version.file_name %}{% when Some with (name) %}{{ name }}{% when None %}1 file{% endmatch %}{% else %}<span class="item-version-upload-no-file">No file</span>{% endif %}</td>
                <td>{{ version.size }}</td>
                <td>{{ version.downloads }}</td>
                <td>
                    {% if version.has_file %}
                    <button class="btn-secondary download-version-btn item-version-upload-btn"
                            data-version-id="{{ version.id }}">Download</button>
                    {% else %}
                    <button class="btn-secondary upload-to-version-btn item-version-upload-btn"
                            data-version-id="{{ version.id }}">Upload File</button>
                    {% endif %}
                    {{ crate::quasi::version_delete_act::html(item.id.to_string().as_str(), version.id.to_string().as_str())|safe }}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}

    <!-- 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>

    <!-- Upload to existing version (hidden by default) -->
    {#- 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. -#}
    {% for version in versions %}{% if !version.has_file %}
    <div class="hidden existing-version-upload" id="existing-version-upload-{{ version.id }}"
         data-upload-refreshes="#tab-files">
        {{ crate::quasi::upload_field::existing_version(version.id.as_str())|safe }}
        <button class="btn-secondary cancel-existing-upload-btn" type="button">Cancel</button>
    </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>