templates/layout.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Forum Communautaire{% endblock %}</title>
    
    <!-- CSRF Token Meta -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    
    <!-- PWA Meta -->
    <meta name="theme-color" content="#2563eb">
    <meta name="description" content="Plateforme de discussion communautaire moderne et conviviale">
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    <link rel="icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
    <link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    
    <!-- Feather Icons -->
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    
    {% block extra_css %}{% endblock %}
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col {% if current_user.is_authenticated %}logged-in{% endif %}">
    <!-- Header -->
    <header class="bg-white shadow">
        <div class="container mx-auto px-4 py-4">
            <div class="flex flex-wrap items-center justify-between">
                <!-- Logo -->
                <div class="flex items-center">
                    <a href="{{ url_for('forum.index') }}" class="text-xl font-bold text-blue-600">
                        Forum Communautaire
                    </a>
                </div>
                
                <!-- Search Form -->
                <div class="hidden md:block w-full md:w-auto my-2 md:my-0 md:mx-4 lg:mx-8 flex-grow max-w-md">
                    <form id="search-form" action="{{ url_for('forum.search') }}" method="get" class="flex">
                        <input 
                            type="search"
                            id="search-input"
                            name="q"
                            placeholder="Rechercher des sujets..."
                            class="w-full px-4 py-2 border border-gray-300 rounded-l-lg focus-ring"
                        >
                        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700 focus:outline-none focus:ring">
                            <span class="sr-only">Rechercher</span>
                            <i data-feather="search" class="w-5 h-5"></i>
                        </button>
                    </form>
                </div>
                
                <!-- Navigation -->
                <nav class="hidden md:flex items-center">
                    {% if current_user.is_authenticated %}
                        <div class="relative group">
                            <button class="flex items-center px-4 py-2 text-gray-700 hover:text-blue-600 focus:outline-none focus:ring">
                                <img 
                                    src="{{ url_for('static', filename='uploads/avatars/' + current_user.avatar) if current_user.avatar else url_for('static', filename='uploads/avatars/default.png') }}" 
                                    alt="{{ current_user.username }}" 
                                    class="w-8 h-8 rounded-full mr-2 object-cover"
                                >
                                <span>{{ current_user.username }}</span>
                                <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
                            </button>
                            <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-10">
                                <a href="{{ url_for('user.profile', username=current_user.username) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profil</a>
                                <a href="{{ url_for('user.edit_profile') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Modifier Profil</a>
                                <a href="{{ url_for('user.user_posts') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Mes Publications</a>
                                {% if current_user.is_moderator() %}
                                    <a href="{{ url_for('admin.dashboard') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Panneau d'Administration</a>
                                {% endif %}
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="{{ url_for('auth.logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Déconnexion</a>
                            </div>
                        </div>
                    {% else %}
                        <a href="{{ url_for('auth.login') }}" class="px-4 py-2 text-gray-700 hover:text-blue-600">Connexion</a>
                        <a href="{{ url_for('auth.register') }}" class="ml-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring">Inscription</a>
                    {% endif %}
                </nav>
                
                <!-- Mobile Menu Toggle -->
                <button id="mobile-menu-toggle" class="md:hidden p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-gray-100 focus:outline-none focus:ring">
                    <i data-feather="menu" class="w-6 h-6"></i>
                </button>
            </div>
            
            <!-- Mobile Navigation (hidden by default) -->
            <nav id="mobile-menu" class="md:hidden mt-4 hidden">
                <div class="flex flex-col space-y-2">
                    <!-- Mobile Search -->
                    <form action="{{ url_for('forum.search') }}" method="get" class="mb-2">
                        <div class="flex">
                            <input 
                                type="search"
                                name="q"
                                placeholder="Rechercher des sujets..."
                                class="w-full px-4 py-2 border border-gray-300 rounded-l focus-ring"
                            >
                            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-r hover:bg-blue-700 focus:outline-none focus:ring">
                                <i data-feather="search" class="w-5 h-5"></i>
                            </button>
                        </div>
                    </form>
                    
                    {% if current_user.is_authenticated %}
                        <a href="{{ url_for('user.profile', username=current_user.username) }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Profil</a>
                        <a href="{{ url_for('user.edit_profile') }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Modifier Profil</a>
                        <a href="{{ url_for('user.user_posts') }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Mes Publications</a>
                        {% if current_user.is_moderator() %}
                            <a href="{{ url_for('admin.dashboard') }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Panneau d'Administration</a>
                        {% endif %}
                        <a href="{{ url_for('auth.logout') }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Déconnexion</a>
                    {% else %}
                        <a href="{{ url_for('auth.login') }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Connexion</a>
                        <a href="{{ url_for('auth.register') }}" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Inscription</a>
                    {% endif %}
                </div>
            </nav>
        </div>
    </header>
    
    <!-- Breadcrumb -->
    <div class="bg-white border-b border-gray-200">
        <div class="container mx-auto px-4 py-2">
            <div class="flex justify-between items-center">
                <nav class="text-sm text-gray-500" aria-label="Fil d'Ariane">
                    {% block breadcrumb %}
                    <a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
                    {% endblock %}
                </nav>
                
                <!-- Bouton d'installation PWA -->
                <div id="install-container" class="hidden">
                    <button id="install-button" class="flex items-center px-3 py-1 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 focus:outline-none focus:ring transition-colors">
                        <i data-feather="download" class="w-4 h-4 mr-1"></i>
                        Installer l'application
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Flash Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <div class="container mx-auto px-4 pt-4">
        {% for category, message in messages %}
        <div class="flash-message px-4 py-3 rounded-md mb-4 {% if category == 'success' %}bg-green-100 text-green-800{% elif category == 'danger' %}bg-red-100 text-red-800{% elif category == 'warning' %}bg-yellow-100 text-yellow-800{% else %}bg-blue-100 text-blue-800{% endif %}">
            {{ message }}
            <button class="float-right focus:outline-none" onclick="this.parentElement.style.display='none'">
                <i data-feather="x" class="w-4 h-4"></i>
            </button>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% endwith %}
    
    <!-- Main Content -->
    <main class="flex-grow container mx-auto px-4 py-6">
        {% block content %}{% endblock %}
    </main>
    
    <!-- Footer -->
    <footer class="bg-white border-t border-gray-200 mt-auto">
        <div class="container mx-auto px-4 py-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-gray-600 text-sm">
                        © {{ now().year }} Forum Communautaire - Tous droits réservés
                    </p>
                </div>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-500 hover:text-blue-600">À propos</a>
                    <a href="#" class="text-gray-500 hover:text-blue-600">Conditions</a>
                    <a href="#" class="text-gray-500 hover:text-blue-600">Confidentialité</a>
                    <a href="#" class="text-gray-500 hover:text-blue-600">Contact</a>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- JavaScript -->
    <script src="{{ url_for('static', filename='js/forum.js') }}"></script>
    {% block extra_js %}{% endblock %}
    
    <!-- PWA Scripts -->
    <script src="{{ url_for('static', filename='js/pwa-installer.js') }}"></script>
    <script>
        // Service Worker Registration
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('{{ url_for("static", filename="js/service-worker.js") }}')
                    .then(registration => {
                        console.log('Service Worker enregistré avec succès:', registration);
                    }).catch(error => {
                        console.log('Erreur lors de l\'enregistrement du Service Worker:', error);
                    });
            });
        }
        
        // Initialize Feather icons
        feather.replace();
        
        // Mobile menu toggle
        document.getElementById('mobile-menu-toggle').addEventListener('click', function() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        });
    </script>
</body>
</html>