{% extends "base.html" %}

{% block title %}Offline - Dukaribu{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 text-center">
            <div class="offline-icon mb-4">
                <i class="bi bi-wifi-off display-1 text-muted"></i>
            </div>
            <h1 class="mb-3">You're Offline</h1>
            <p class="lead mb-4">Don't worry! You can still access some features while offline.</p>

            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">What you can do offline:</h5>
                    <ul class="list-group list-group-flush text-start">
                        <li class="list-group-item"><i class="bi bi-check-circle-fill text-success me-2"></i> View previously loaded messages</li>
                        <li class="list-group-item"><i class="bi bi-check-circle-fill text-success me-2"></i> Browse cached content</li>
                        <li class="list-group-item"><i class="bi bi-x-circle-fill text-danger me-2"></i> Load new messages (requires internet)</li>
                        <li class="list-group-item"><i class="bi bi-x-circle-fill text-danger me-2"></i> Submit forms (requires internet)</li>
                    </ul>
                </div>
            </div>

            <div class="d-grid gap-3 d-md-flex justify-content-md-center">
                <button class="btn btn-primary" onclick="window.location.reload()">
                    <i class="bi bi-arrow-clockwise me-2"></i> Check Connection
                </button>
                <a href="/" class="btn btn-outline-secondary">
                    <i class="bi bi-house-door me-2"></i> Go to Homepage
                </a>
            </div>

            <div class="network-status mt-4" id="networkStatus">
                <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <span>Checking connection status...</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Check network status periodically
    function updateNetworkStatus() {
        const statusElement = document.getElementById('networkStatus');

        if (navigator.onLine) {
            statusElement.innerHTML = `
                <div class="alert alert-success" role="alert">
                    <i class="bi bi-wifi me-2"></i>
                    You're back online! <a href="javascript:window.location.reload()" class="alert-link">Refresh the page</a> to continue.
                </div>
            `;
        } else {
            statusElement.innerHTML = `
                <div class="alert alert-danger" role="alert">
                    <i class="bi bi-wifi-off me-2"></i>
                    Still offline. Please check your internet connection.
                </div>
            `;
        }
    }

    // Initial check
    setTimeout(updateNetworkStatus, 1000);

    // Check every 5 seconds
    setInterval(updateNetworkStatus, 5000);

    // Listen for online/offline events
    window.addEventListener('online', updateNetworkStatus);
    window.addEventListener('offline', updateNetworkStatus);
</script>
{% endblock %}