<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header align-items-center">
            <span class="me-2">
                <i class="bi bi-cloud-upload"></i>
            </span>
            <h5 class="mb-0">Manage Upload</h5>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            {% if collection %}
            <ul class="list-group mb-3">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Collection:</span>
                    <span class="fw-semibold" id="uploadCollectionName">{{collection}}</span>
                </li>
            </ul>
            {% else %}
            <ul class="list-group mb-3">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Other Files</span>
                </li>
            </ul>
            {% endif %}
            <div class="mb-2">
                <div class="progress" style="height: 1.5rem;">
                    <div id="progressBar"
                        class="progress-bar progress-bar-striped progress-bar-animated bg-success text-dark"
                        role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%
                    </div>
                </div>
            </div>
            <div class="mb-3">
                <small class="text-muted" id="statusInfo">
                    <span>Status:</span>
                    <span class="status">Waiting to start publication...</span>
                </small>
                <br />
                <small class="text-muted" id="uploadMessage">
                    <span>Message:</span>
                    <span class="message"></span>
                </small>
            </div>
        </div>
        <div class="modal-footer">
            <!-- Collection -->
            {% if collection %}
            <input type="hidden" id="initialStatusUpload"
                value="{{initial_status.status and initial_status.status.value}}">
            <input type="hidden" id="statusURL"
                value="{{url_for('publication.upload_collection_status', collection=collection, instance=instance, projectname=projectname)}}">
            <button type="button" class="btn btn-primary" id="startUploadBtn"
                data-url="{{ url_for('publication.upload_collection_start', collection=collection, instance=instance, projectname=projectname) }}">Start
                Upload</button>
            <!-- Other Files -->
            {% else %}
            <input type="hidden" id="initialStatusUpload"
                value="{{initial_status.status and initial_status.status.value}}">
            <input type="hidden" id="statusURL"
                value="{{url_for('publication.upload_other_files_status', instance=instance, projectname=projectname)}}">
            <button type="button" class="btn btn-primary" id="startUploadBtn"
                data-url="{{ url_for('publication.upload_other_files_start', instance=instance, projectname=projectname) }}">Start
                Upload</button>

            {% endif %}
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        </div>
    </div>
</div>