{#
    Edit Document Modal
    Modal for editing document metadata

    Required variables:
    None (content loaded dynamically via AJAX)
#}

<div id="editDocumentModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="edit-modal-title" role="dialog" aria-modal="true"
     data-controller="document-edit">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
             onclick="document.getElementById('editDocumentModal').classList.add('hidden')"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
            <div class="bg-indigo-600 px-4 py-3 flex items-center justify-between">
                <h3 class="text-lg leading-6 font-medium text-white" id="edit-modal-title">
                    <i class="fas fa-edit mr-2"></i>
                    Éditer le document
                </h3>
                <button type="button"
                        onclick="document.getElementById('editDocumentModal').classList.add('hidden')"
                        class="text-white hover:text-gray-200 transition-colors">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
                <div id="editDocumentContent" class="space-y-4">
                    {# Content will be loaded dynamically via AJAX #}
                    <div class="text-center py-8">
                        <i class="fas fa-spinner fa-spin text-4xl text-gray-400"></i>
                        <p class="mt-2 text-gray-500">Chargement...</p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-3">
                <button type="button"
                        data-action="click->document-edit#save"
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 sm:w-auto sm:text-sm">
                    <i class="fas fa-save mr-2"></i>
                    Enregistrer
                </button>
                <button type="button"
                        onclick="document.getElementById('editDocumentModal').classList.add('hidden')"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm">
                    Annuler
                </button>
            </div>
        </div>
    </div>
</div>