{% load static %}
{% load file_filters %}
<div class="card shadow-sm">
    <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0 text-primary">Documents</h5>
        <button
            type="button"
            class="btn bg-primary-theme text-white btn-sm"
            data-bs-toggle="modal"
            data-bs-target="#documentUploadModal"
        >
            <i class="fas fa-plus me-2"></i>Upload Document
        </button>
    </div>

    <!-- Document Upload Modal -->
    <div class="modal fade" id="documentUploadModal" tabindex="-1" aria-labelledby="documentUploadModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="documentUploadModalLabel">Upload Document</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form
                    method="post"
                    enctype="multipart/form-data"
                    hx-post="{% url 'document_upload' candidate.id %}"
                    hx-target="#documents-pane"
                    hx-select="#documents-pane"
                    hx-swap="outerHTML"
                    hx-on::after-request="bootstrap.Modal.getInstance(document.getElementById('documentUploadModal')).hide()"
                >
                    {% csrf_token %}
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="documentType" class="form-label">Document Type</label>
                            <select name="document_type" id="documentType" class="form-select">
                                <option value="resume">Resume</option>
                                <option value="cover_letter">Cover Letter</option>
                                <option value="portfolio">Portfolio</option>
                                <option value="certificate">Certificate</option>
                                <option value="id_proof">ID Proof</option>
                                <option value="other">Other</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="documentFile" class="form-label">File</label>
                            <input
                                type="file"
                                name="file"
                                id="documentFile"
                                class="form-control"
                                required
                            >
                        </div>

                        <div class="mb-3">
                            <label for="documentDescription" class="form-label">Description</label>
                            <textarea
                                name="description"
                                id="documentDescription"
                                rows="3"
                                class="form-control"
                                placeholder="Optional description..."
                            ></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-upload me-2"></i>Upload
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Documents List -->
    <div class="card-body" id="document-list-container">
        {% if documents %}
            {% for document in documents %}
                <div class="d-flex justify-content-between align-items-center p-3 border-bottom hover-bg-light">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-file text-primary me-3"></i>
                        <div>
                            <div class="fw-medium text-dark">{{ document.get_document_type_display }}</div>
                            <div class="small text-muted">{{ document.file.name|filename }}</div>
                            {% if document.description %}
                                <div class="small text-muted">{{ document.description }}</div>
                            {% endif %}
                            <div class="small text-muted">
                                Uploaded by {{ document.uploaded_by.get_full_name|default:document.uploaded_by.username }} on {{ document.created_at|date:"M d, Y" }}
                            </div>
                        </div>
                    </div>

                    <div class="d-flex align-items-center">
                        <a
                            href="{% url 'document_download' document.id %}"
                            class="btn btn-sm btn-outline-primary me-2"
                            title="Download"
                        >
                            <i class="fas fa-download"></i>
                        </a>

                        {% if user.is_superuser or candidate.job.assigned_to == user %}
                            <button
                                type="button"
                                class="btn btn-sm btn-outline-danger"
                                onclick="confirmDelete({{ document.id }}, '{{ document.file.name|filename|default:"Document" }}')"
                                title="Delete"
                            >
                                <i class="fas fa-trash"></i>
                            </button>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="text-center py-5 text-muted">
                <i class="fas fa-file-alt fa-3x mb-3"></i>
                <p class="mb-2">No documents uploaded yet.</p>
                <p class="small">Click "Upload Document" to add files for this candidate.</p>
            </div>
        {% endif %}
    </div>
</div>

<style>
.hover-bg-light:hover {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}
</style>

<script>
function confirmDelete(documentId, fileName) {
    if (confirm(`Are you sure you want to delete "${fileName}"?`)) {
        htmx.ajax('POST', `{% url 'document_delete' 0 %}`.replace('0', documentId), {
            target: '#document-list-container',
            swap: 'innerHTML'
        });
    }
}
</script>