{#
    Modal de perte de connexion Internet

    Cette modal s'affiche automatiquement quand l'utilisateur perd sa connexion Internet.
    Elle se cache automatiquement quand la connexion est rétablie.
#}

<!-- Offline Modal -->
<div id="offline-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[100] justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative p-4 w-full max-w-md max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 bg-red-600">
                <div class="flex items-center">
                    <svg class="w-8 h-8 text-white mr-3 animate-pulse" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17.133 12.632v-1.8a5.406 5.406 0 0 0-4.154-5.262.955.955 0 0 0 .021-.106V3.1a1 1 0 0 0-2 0v2.364a.955.955 0 0 0 .021.106 5.406 5.406 0 0 0-4.154 5.262v1.8C6.867 15.018 5 15.614 5 16.807 5 17.4 5 18 5.538 18h12.924C19 18 19 17.4 19 16.807c0-1.193-1.867-1.789-1.867-4.175ZM8.823 19a3.453 3.453 0 0 0 6.354 0H8.823Z"/>
                    </svg>
                    <h3 class="text-xl font-semibold text-white">
                        Connexion perdue
                    </h3>
                </div>
            </div>

            <!-- Modal body -->
            <div class="p-4 md:p-5 space-y-4">
                <div class="flex items-start space-x-3">
                    <div class="flex-shrink-0">
                        <svg class="w-6 h-6 text-red-600 animate-pulse" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                            <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <p class="text-base leading-relaxed text-gray-700 dark:text-gray-300 font-medium">
                            Vous n'êtes plus connecté à Internet.
                        </p>
                        <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">
                            <strong>2AB Portal</strong> nécessite une connexion Internet active pour fonctionner correctement.
                        </p>
                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                            Veuillez vérifier votre connexion réseau et réessayer.
                        </p>
                    </div>
                </div>

                <!-- Status indicator -->
                <div class="p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <div class="flex items-center">
                        <div class="relative flex h-3 w-3 mr-3">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                        </div>
                        <p class="text-sm text-red-800 dark:text-red-300 font-medium" id="offline-status-text">
                            Tentative de reconnexion...
                        </p>
                    </div>
                </div>

                <!-- Troubleshooting tips -->
                <div class="mt-4">
                    <p class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Solutions possibles :
                    </p>
                    <ul class="text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc">
                        <li>Vérifiez votre connexion Wi-Fi ou réseau mobile</li>
                        <li>Désactivez puis réactivez votre connexion</li>
                        <li>Vérifiez que vous n'êtes pas en mode Avion</li>
                        <li>Contactez votre administrateur réseau si le problème persiste</li>
                    </ul>
                </div>
            </div>

            <!-- Modal footer -->
            <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                <button
                    id="offline-retry-btn"
                    type="button"
                    class="w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800 inline-flex items-center justify-center"
                >
                    <svg class="w-5 h-5 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.651 7.65a7.131 7.131 0 0 0-12.68 3.15M18.001 4v4h-4m-7.652 8.35a7.13 7.13 0 0 0 12.68-3.15M6 20v-4h4"/>
                    </svg>
                    Réessayer
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Backdrop -->
<div id="offline-modal-backdrop" class="hidden bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-[99]"></div>