{{define "document_upload_form"}}
<div class="content">
    <h3 class="submenu-header">Step 2: Upload Documents</h3>
    <div id="document-upload-container">
        <div class="document-row" id="document-row-1">
            <div class="document-field">
                <label>Select Document:</label>
                <input class="card-input" type="file" id="document-file-1" name="document-file-1">
            </div>

            <div class="document-field-row">
                <div class="document-field document-name-field">
                    <label>Document Name (optional):</label>
                    <input class="card-input" type="text" id="document-name-1" name="document-name-1"
                        placeholder="Document Name">
                </div>

                <div class="document-field document-type-field">
                    <label>Document Type:</label>
                    <select class="card-input" id="document-type-1" name="document-type-1">
                        <option value="">Select Document Type</option>
                        <option value="1" selected>Job Paperwork</option>
                        <option value="2">Job Vendor Bill</option>
                        <option value="4">Generic Attachment</option>
                        <option value="7">Blank Paperwork</option>
                        <option value="14">Job Invoice</option>
                    </select>
                </div>
            </div>

            <button type="button" class="remove-document warning-button" hx-get="/document-field-remove?id=1"
                hx-target="#document-row-1" hx-swap="outerHTML" style="display: none;">Remove</button>
        </div>
    </div>
    <button type="button" id="add-document" class="caution-button" hx-get="/document-field-add"
        hx-target="#document-upload-container" hx-swap="beforeend">Add Another Document</button>
</div>
{{end}}