{{define "upload_actions"}}
<div class="content">
    <h3 class="submenu-header">Step 3: Submit Uploads</h3>
    <div>
        <form id="upload-form" hx-post="/upload-documents" hx-encoding="multipart/form-data"
            hx-include="[name='jobNumbers'],[name^='document-file'],[name^='document-name'],[name^='document-type']"
            hx-target="#upload-results" hx-indicator="#upload-progress">

            <input type="hidden" name="job-ids" id="job-ids-field">
            <button type="submit" class="success-button" id="submit-button">Upload Documents to Jobs</button>

            <div id="upload-progress" class="upload-progress htmx-indicator">
                <div class="progress-info">
                    <span>Processing your uploads...</span>
                    <div class="spinner"></div>
                </div>
                <div class="progress">
                    <div class="progress-bar" role="progressbar"></div>
                </div>
                <p id="upload-status">
                    <span class="pulsing">This may take a while for large batches of jobs or multiple
                        documents.</span><br>
                    <span class="advice">Please don't refresh the page during the upload process.</span>
                </p>
            </div>

            <div id="upload-results"></div>
        </form>
    </div>
</div>
{{end}}