{% load i18n %}
<form hx-boost="true" action="{% url 'document_upload' slug %}" method="POST" enctype="multipart/form-data" hx-on::after-request="this.reset()">
    {% csrf_token %}
    <div class="space-y-4">
        <div>
            <label for="documentType" class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Document Type" %}</label>
            <select class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red transition" id="documentType" name="document_type" required>
                <option value="">{% trans "Select document type" %}</option>
                <option value="resume">{% trans "Resume" %}</option>
                <option value="cover_letter">{% trans "Cover Letter" %}</option>
                <option value="transcript">{% trans "Academic Transcript" %}</option>
                <option value="certificate">{% trans "Certificate" %}</option>
                <option value="portfolio">{% trans "Portfolio" %}</option>
                <option value="other">{% trans "Other" %}</option>
            </select>
        </div>
        
        <div>
            <label for="documentDescription" class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Description" %}</label>
            <textarea class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red transition resize-none" id="documentDescription" name="description" rows="3" placeholder="{% trans 'Optional description...' %}"></textarea>
        </div>
        
        <div>
            <label for="documentFile" class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Choose File" %}</label>
            <div class="relative">
                <input type="file" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red transition file:mr-4 file:py-1.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-temple-red file:text-white hover:file:bg-[#7a1a29]" id="documentFile" name="file" accept=".pdf,.doc,.docx,.jpg,.png" required>
                <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
                    <i data-lucide="upload" class="w-5 h-5 text-gray-400"></i>
                </div>
            </div>
            <p class="mt-2 text-xs text-gray-500">{% trans "Accepted formats: PDF, DOC, DOCX, JPG, PNG (Max 5MB)" %}</p>
        </div>
    </div>
    
    <div class="mt-6 pt-4 border-t border-gray-200">
        <button type="button" 
                class="modal-cancel-btn inline-flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-4 py-2.5 rounded-xl text-sm transition"
                data-modal="documentUploadModal">
            {% trans "Cancel" %}
        </button>
        <button type="submit" class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-medium px-4 py-2.5 rounded-xl text-sm transition shadow-sm hover:shadow-md ml-2">
            <i data-lucide="upload" class="w-4 h-4"></i>
            {% trans "Upload" %}
        </button>
    </div>
</form>