{{define "document_upload"}}
<h2>Document Uploads</h2>

<form id="upload-form" hx-post="/upload-documents" hx-encoding="multipart/form-data" hx-target="#upload-results"
    hx-indicator="#upload-loading-indicator">

    <!-- Job numbers will be added here by the CSV process -->
    <div id="job-ids-container" style="display: none;">
        <!-- Hidden input placeholder for job IDs -->
    </div>

    <div class="upload-container">
        <!-- Step 1: CSV Upload -->
        {{template "csv_upload" .}}

        <!-- Step 2: Document Upload -->
        {{template "document_upload_form" .}}

        <!-- Step 3: Submit -->
        <div class="content">
            <h3 class="submenu-header">Step 3: Submit Uploads</h3>
            <div>
                <button type="submit" class="success-button" id="submit-button">Upload Documents to Jobs</button>

                <div id="upload-loading-indicator" class="htmx-indicator">
                    <span>Uploading...</span>
                    <div class="loading-indicator"></div>
                </div>

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