{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {# Header #}
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">
                <i class="fas fa-images mr-3 text-purple-600"></i>
                {{ page_title }}
            </h1>
            <p class="mt-2 text-sm text-gray-600">
                Gérez et visualisez tous les médias du système
            </p>
        </div>
        <a href="{{ path('app_manager_media_storage_statistics') }}"
           class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700">
            <i class="fas fa-chart-bar mr-2"></i>
            Statistiques de Stockage
        </a>
    </div>

    {# Stats Cards #}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                    <i class="fas fa-file text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Total Médias</p>
                    <p class="text-2xl font-bold text-gray-900">{{ globalStats.total_count|number_format(0, ',', ' ') }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                    <i class="fas fa-hdd text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Espace Total</p>
                    <p class="text-2xl font-bold text-gray-900">{{ totalSizeFormatted }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fas fa-eye text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Total Accès</p>
                    <p class="text-2xl font-bold text-gray-900">{{ globalStats.total_accesses|number_format(0, ',', ' ') }}</p>
                </div>
            </div>
        </div>
    </div>

    {# Filters #}
    <div class="bg-white rounded-lg shadow p-4 mb-6">
        {{ form_start(filterForm, {'method': 'GET', 'attr': {'class': 'space-y-4'}}) }}

            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    {{ form_label(filterForm.search) }}
                    {{ form_widget(filterForm.search) }}
                </div>

                <div>
                    {{ form_label(filterForm.type) }}
                    {{ form_widget(filterForm.type) }}
                </div>

                <div>
                    {{ form_label(filterForm.category) }}
                    {{ form_widget(filterForm.category) }}
                </div>

                <div>
                    {{ form_label(filterForm.uploadedBy) }}
                    {{ form_widget(filterForm.uploadedBy) }}
                </div>

                <div>
                    {{ form_label(filterForm.dateFrom) }}
                    {{ form_widget(filterForm.dateFrom) }}
                </div>

                <div>
                    {{ form_label(filterForm.dateTo) }}
                    {{ form_widget(filterForm.dateTo) }}
                </div>

                <div>
                    {{ form_label(filterForm.visibility) }}
                    {{ form_widget(filterForm.visibility) }}
                </div>

                <div>
                    {{ form_label(filterForm.status) }}
                    {{ form_widget(filterForm.status) }}
                </div>
            </div>

            {# Buttons #}
            <div class="flex justify-between items-center pt-4 border-t">
                <div class="flex gap-2">
                    <a href="{{ path('app_manager_media_index') }}"
                       class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-redo mr-2"></i>
                        Réinitialiser
                    </a>
                    <button type="submit"
                            class="px-4 py-2 bg-purple-600 text-white rounded-md text-sm font-medium hover:bg-purple-700">
                        <i class="fas fa-search mr-2"></i>
                        Filtrer
                    </button>
                </div>

                <div class="flex gap-2">
                    <a href="{{ path('app_manager_media_index', {'view': 'grid'}) }}"
                       class="px-3 py-2 {% if viewMode == 'grid' %}bg-purple-600 text-white{% else %}bg-gray-200 text-gray-700{% endif %} rounded-md text-sm">
                        <i class="fas fa-th"></i>
                    </a>
                    <a href="{{ path('app_manager_media_index', {'view': 'table'}) }}"
                       class="px-3 py-2 {% if viewMode == 'table' %}bg-purple-600 text-white{% else %}bg-gray-200 text-gray-700{% endif %} rounded-md text-sm">
                        <i class="fas fa-list"></i>
                    </a>
                </div>
            </div>

        {{ form_end(filterForm) }}
    </div>

    {# Bulk Actions Bar #}
    <div id="bulk-actions-bar" class="hidden bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
        <div class="flex justify-between items-center">
            <span class="text-sm text-purple-900">
                <span id="selected-count">0</span> média(s) sélectionné(s)
            </span>
            <button type="button" onclick="openGrantAccessModal()"
                    class="px-4 py-2 bg-purple-600 text-white rounded-md text-sm font-medium hover:bg-purple-700">
                <i class="fas fa-user-plus mr-2"></i>
                Accorder Accès
            </button>
        </div>
    </div>

    {# Results Count #}
    <div class="mb-4">
        <p class="text-sm text-gray-600">
            <i class="fas fa-filter mr-2"></i>
            {{ totalItems }} résultat(s) trouvé(s)
            {% if currentPage > 1 %} - Page {{ currentPage }} sur {{ totalPages }}{% endif %}
        </p>
    </div>

    {# Gallery Grid or Table #}
    {% if mediaList is empty %}
        <div class="bg-white rounded-lg shadow p-12 text-center">
            <i class="fas fa-images text-6xl text-gray-300 mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Aucun média trouvé</h3>
            <p class="text-gray-500">
                Aucun résultat ne correspond à vos critères de recherche.
            </p>
        </div>
    {% else %}
        {% if viewMode == 'table' %}
            {# Table View #}
            <div class="bg-white rounded-lg shadow overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="w-12 px-4 py-3">
                                <input type="checkbox" id="select-all" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Fichier
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Type
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Uploadé par
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Taille
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Date
                            </th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Actions
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for media in mediaList %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-4">
                                <input type="checkbox" class="media-checkbox rounded border-gray-300 text-purple-600 focus:ring-purple-500" value="{{ media.id }}">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <i class="fas fa-file-{{ media.category == 'image' ? 'image' : (media.category == 'video' ? 'video' : (media.category == 'audio' ? 'audio' : 'alt')) }} text-2xl text-gray-400 mr-3"></i>
                                    <div class="text-sm font-medium text-gray-900">{{ media.originalFileName }}</div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">
                                    {{ media.type }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ media.uploadedBy ? media.uploadedBy.email : 'N/A' }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ (media.fileSize / 1024 / 1024)|number_format(2) }} MB
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ media.createdAt|date('d/m/Y H:i') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="{{ path('app_manager_media_show', {id: media.id}) }}"
                                   class="text-purple-600 hover:text-purple-900 mr-3">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ path('app_manager_media_download', {id: media.id}) }}"
                                   class="text-blue-600 hover:text-blue-900">
                                    <i class="fas fa-download"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            {# Grid View #}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                {% for media in mediaList %}
                    <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow">
                        <div class="p-4">
                            <div class="flex items-start justify-between mb-3">
                                <input type="checkbox" class="media-checkbox rounded border-gray-300 text-purple-600 focus:ring-purple-500" value="{{ media.id }}">
                                <span class="px-2 py-1 text-xs rounded-full {% if media.category == 'image' %}bg-blue-100 text-blue-800{% elseif media.category == 'video' %}bg-purple-100 text-purple-800{% elseif media.category == 'audio' %}bg-green-100 text-green-800{% else %}bg-gray-100 text-gray-800{% endif %}">
                                    {{ media.category }}
                                </span>
                            </div>

                            <div class="text-center mb-4">
                                <i class="fas fa-file-{{ media.category == 'image' ? 'image' : (media.category == 'video' ? 'video' : (media.category == 'audio' ? 'audio' : 'alt')) }} text-6xl text-gray-300"></i>
                            </div>

                            <h3 class="text-sm font-medium text-gray-900 truncate mb-2" title="{{ media.originalFileName }}">
                                {{ media.originalFileName }}
                            </h3>

                            <div class="text-xs text-gray-500 space-y-1 mb-4">
                                <p><i class="fas fa-user w-4"></i> {{ media.uploadedBy ? media.uploadedBy.email : 'N/A' }}</p>
                                <p><i class="fas fa-hdd w-4"></i> {{ (media.fileSize / 1024 / 1024)|number_format(2) }} MB</p>
                                <p><i class="fas fa-calendar w-4"></i> {{ media.createdAt|date('d/m/Y') }}</p>
                            </div>

                            <div class="flex gap-2">
                                <a href="{{ path('app_manager_media_show', {id: media.id}) }}"
                                   class="flex-1 px-3 py-2 bg-purple-600 text-white text-center rounded-md text-xs font-medium hover:bg-purple-700">
                                    <i class="fas fa-eye mr-1"></i> Voir
                                </a>
                                <a href="{{ path('app_manager_media_download', {id: media.id}) }}"
                                   class="flex-1 px-3 py-2 bg-blue-600 text-white text-center rounded-md text-xs font-medium hover:bg-blue-700">
                                    <i class="fas fa-download mr-1"></i> Télécharger
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        {# Pagination #}
        {% if totalPages > 1 %}
        <div class="mt-6 flex justify-center">
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                {% if currentPage > 1 %}
                    <a href="{{ path('app_manager_media_index', app.request.query.all|merge({'page': currentPage - 1})) }}"
                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                {% endif %}

                {% for page in 1..totalPages %}
                    {% if page == currentPage %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-purple-600 bg-purple-600 text-sm font-medium text-white">
                            {{ page }}
                        </span>
                    {% elseif page == 1 or page == totalPages or (page >= currentPage - 2 and page <= currentPage + 2) %}
                        <a href="{{ path('app_manager_media_index', app.request.query.all|merge({'page': page})) }}"
                           class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            {{ page }}
                        </a>
                    {% elseif page == currentPage - 3 or page == currentPage + 3 %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                            ...
                        </span>
                    {% endif %}
                {% endfor %}

                {% if currentPage < totalPages %}
                    <a href="{{ path('app_manager_media_index', app.request.query.all|merge({'page': currentPage + 1})) }}"
                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                {% endif %}
            </nav>
        </div>
        {% endif %}
    {% endif %}

</div>

{# Grant Access Modal #}
<div id="grant-access-modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-user-plus mr-2 text-purple-600"></i>
                Accorder Accès aux Médias
            </h3>
            <button type="button" onclick="closeGrantAccessModal()" class="text-gray-400 hover:text-gray-500">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>

        <form id="grant-access-form" method="POST" action="{{ path('app_manager_media_bulk_grant_access') }}">
            <div class="space-y-4">
                {# Selected Media Info #}
                <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                    <p class="text-sm text-purple-900">
                        <i class="fas fa-info-circle mr-2"></i>
                        <span id="modal-selected-count">0</span> média(s) sélectionné(s) recevront l'accès
                    </p>
                </div>

                {# User Search #}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-search mr-1"></i>
                        Rechercher des utilisateurs
                    </label>
                    <input type="text" id="user-search" placeholder="Tapez un nom ou email..."
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                </div>

                {# Users List with Checkboxes #}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Sélectionner les utilisateurs
                        <span id="selected-users-count" class="text-purple-600 font-bold ml-2">(0 sélectionné)</span>
                    </label>

                    <div class="mb-2">
                        <button type="button" onclick="selectAllUsers()" class="text-xs text-purple-600 hover:text-purple-800">
                            <i class="fas fa-check-square mr-1"></i>
                            Tout sélectionner
                        </button>
                        <span class="mx-2 text-gray-300">|</span>
                        <button type="button" onclick="deselectAllUsers()" class="text-xs text-gray-600 hover:text-gray-800">
                            <i class="fas fa-square mr-1"></i>
                            Tout désélectionner
                        </button>
                    </div>

                    <div id="users-list" class="border border-gray-300 rounded-md max-h-64 overflow-y-auto p-2">
                        <div class="text-center py-8">
                            <i class="fas fa-spinner fa-spin text-2xl text-gray-400 mb-2"></i>
                            <p class="text-sm text-gray-500">Chargement des utilisateurs...</p>
                        </div>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">
                        <i class="fas fa-lightbulb mr-1"></i>
                        Utilisez la recherche pour filtrer rapidement les utilisateurs
                    </p>
                </div>

                {# Expiration Date #}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-clock mr-1"></i>
                        Date d'expiration (optionnelle)
                    </label>
                    <input type="datetime-local" name="expires_at" id="expires-at-input"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
                    <p class="mt-1 text-xs text-gray-500">
                        Laissez vide pour un accès permanent
                    </p>
                </div>
            </div>

            <div class="mt-6 flex justify-end gap-3 pt-4 border-t">
                <button type="button" onclick="closeGrantAccessModal()"
                        class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-times mr-2"></i>
                    Annuler
                </button>
                <button type="submit" id="submit-grant-access"
                        class="px-4 py-2 bg-purple-600 text-white rounded-md text-sm font-medium hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
                        disabled>
                    <i class="fas fa-check mr-2"></i>
                    Accorder Accès
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Global variables for users data
let allUsers = [];
let filteredUsers = [];

document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.media-checkbox');
    const selectAll = document.getElementById('select-all');
    const bulkActionsBar = document.getElementById('bulk-actions-bar');
    const selectedCountSpan = document.getElementById('selected-count');

    function updateBulkActions() {
        const selectedCheckboxes = document.querySelectorAll('.media-checkbox:checked');
        const count = selectedCheckboxes.length;

        selectedCountSpan.textContent = count;

        if (count > 0) {
            bulkActionsBar.classList.remove('hidden');
        } else {
            bulkActionsBar.classList.add('hidden');
        }
    }

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateBulkActions);
    });

    if (selectAll) {
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateBulkActions();
        });
    }

    // User search functionality
    const userSearchInput = document.getElementById('user-search');
    if (userSearchInput) {
        userSearchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            filteredUsers = allUsers.filter(user =>
                user.name.toLowerCase().includes(searchTerm) ||
                user.email.toLowerCase().includes(searchTerm)
            );
            renderUsersList();
        });
    }
});

async function loadUsers() {
    const usersList = document.getElementById('users-list');

    try {
        const response = await fetch('{{ path('app_manager_media_api_users') }}');
        const data = await response.json();

        if (data.success) {
            allUsers = data.users;
            filteredUsers = [...allUsers];
            renderUsersList();
        } else {
            usersList.innerHTML = `
                <div class="text-center py-8">
                    <i class="fas fa-exclamation-triangle text-2xl text-red-400 mb-2"></i>
                    <p class="text-sm text-red-600">${data.error || 'Erreur de chargement'}</p>
                </div>
            `;
        }
    } catch (error) {
        console.error('Error loading users:', error);
        usersList.innerHTML = `
            <div class="text-center py-8">
                <i class="fas fa-exclamation-triangle text-2xl text-red-400 mb-2"></i>
                <p class="text-sm text-red-600">Erreur lors du chargement des utilisateurs</p>
                <button onclick="loadUsers()" class="mt-2 text-xs text-purple-600 hover:text-purple-800">
                    <i class="fas fa-redo mr-1"></i>Réessayer
                </button>
            </div>
        `;
    }
}

function renderUsersList() {
    const usersList = document.getElementById('users-list');

    if (filteredUsers.length === 0) {
        usersList.innerHTML = `
            <div class="text-center py-8">
                <i class="fas fa-search text-2xl text-gray-300 mb-2"></i>
                <p class="text-sm text-gray-500">Aucun utilisateur trouvé</p>
            </div>
        `;
        return;
    }

    let html = '<div class="space-y-1">';
    filteredUsers.forEach(user => {
        html += `
            <label class="flex items-start p-2 hover:bg-gray-50 rounded cursor-pointer">
                <input type="checkbox"
                       class="user-checkbox mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                       name="user_ids[]"
                       value="${user.id}"
                       onchange="updateSelectedUsersCount()">
                <div class="ml-3 flex-1">
                    <div class="text-sm font-medium text-gray-900">${user.name}</div>
                    <div class="text-xs text-gray-500">${user.email}</div>
                </div>
            </label>
        `;
    });
    html += '</div>';

    usersList.innerHTML = html;
    updateSelectedUsersCount();
}

function updateSelectedUsersCount() {
    const selectedCheckboxes = document.querySelectorAll('.user-checkbox:checked');
    const count = selectedCheckboxes.length;
    const countSpan = document.getElementById('selected-users-count');
    const submitButton = document.getElementById('submit-grant-access');

    countSpan.textContent = `(${count} sélectionné${count > 1 ? 's' : ''})`;

    // Enable/disable submit button
    if (count > 0) {
        submitButton.disabled = false;
    } else {
        submitButton.disabled = true;
    }
}

function selectAllUsers() {
    document.querySelectorAll('.user-checkbox').forEach(checkbox => {
        checkbox.checked = true;
    });
    updateSelectedUsersCount();
}

function deselectAllUsers() {
    document.querySelectorAll('.user-checkbox').forEach(checkbox => {
        checkbox.checked = false;
    });
    updateSelectedUsersCount();
}

async function openGrantAccessModal() {
    const selectedCheckboxes = document.querySelectorAll('.media-checkbox:checked');
    const mediaIds = Array.from(selectedCheckboxes).map(cb => cb.value);

    if (mediaIds.length === 0) {
        alert('Veuillez sélectionner au moins un média.');
        return;
    }

    // Update modal selected count
    document.getElementById('modal-selected-count').textContent = mediaIds.length;

    // Add hidden inputs for media IDs
    const form = document.getElementById('grant-access-form');

    // Remove existing media_ids inputs
    form.querySelectorAll('input[name="media_ids[]"]').forEach(input => input.remove());

    // Add new media_ids inputs
    mediaIds.forEach(id => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'media_ids[]';
        input.value = id;
        form.appendChild(input);
    });

    // Show modal
    document.getElementById('grant-access-modal').classList.remove('hidden');

    // Load users if not already loaded
    if (allUsers.length === 0) {
        await loadUsers();
    }
}

function closeGrantAccessModal() {
    document.getElementById('grant-access-modal').classList.add('hidden');

    // Reset form
    document.getElementById('user-search').value = '';
    document.getElementById('expires-at-input').value = '';

    // Reset users list
    filteredUsers = [...allUsers];
    renderUsersList();
}

// Form submission handling
document.getElementById('grant-access-form').addEventListener('submit', function(e) {
    const selectedUsers = document.querySelectorAll('.user-checkbox:checked');

    if (selectedUsers.length === 0) {
        e.preventDefault();
        alert('Veuillez sélectionner au moins un utilisateur.');
        return false;
    }

    // Show loading state
    const submitButton = document.getElementById('submit-grant-access');
    const originalText = submitButton.innerHTML;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Traitement...';
    submitButton.disabled = true;

    // Form will submit normally, button state will reset on page reload
});
</script>
{% endblock %}