{{define "document_remove_csv"}}
<div>
    <label>Select CSV file with job IDs:</label>
    <input class="card-input" type="file" id="csv-file-removal" name="csv" accept=".csv" required>

    <button type="button" class="btn-primary" hx-post="/documents/remove/process-csv"
        hx-target="#job-ids-removal-container" hx-encoding="multipart/form-data" hx-include="#csv-file-removal"
        hx-indicator="#csv-loading-indicator-removal"
        hx-on::after-request="if(event.detail.successful) { document.getElementById('step2-removal').style.display = 'block'; }">
        Upload CSV
    </button>

    <div id="csv-loading-indicator-removal" class="htmx-indicator" style="display: none;">
        <span>Processing CSV...</span>
        <div class="loading-indicator"></div>
    </div>
</div>

<div id="csv-preview-removal" class="fade-me-out" style="display: none; margin-top: 1rem;">
    <h4>Detected Jobs</h4>
    <div id="csv-preview-content-removal" class="job-list">
        <!-- Job numbers will be displayed here -->
        <p>No jobs loaded yet</p>
    </div>
</div>
{{end}}