<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ settings.meta_description }}">
    <meta name="keywords" content="{{ settings.meta_keywords }}">
    <title>{% if title %}{{ title }} - {% endif %}{{ settings.company_name|default('GMPL - General Motors Poids Lourds') }}</title>
    
    <!-- Favicon -->
    <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('main.index') }}">
                <img src="{{ url_for('static', filename='img/gmpl_logo.png') }}" alt="{{ settings.company_name }}" class="site-logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link {% if request.endpoint == 'main.index' %}active{% endif %}" href="{{ url_for('main.index') }}">Accueil</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle {% if request.endpoint == 'main.about' %}active{% endif %}" href="#" id="presentationDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Présentation
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="presentationDropdown">
                            <li><a class="dropdown-item" href="{{ url_for('main.about') }}">À propos</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ url_for('main.about') }}#mission">Mission et vision</a></li>
                            <li><a class="dropdown-item" href="{{ url_for('main.about') }}#valeurs">Valeurs et engagements</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle {% if request.endpoint == 'main.products' or request.endpoint == 'main.product_detail' %}active{% endif %}" href="#" id="servicesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Services & Produits
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="servicesDropdown">
                            <li><a class="dropdown-item" href="{{ url_for('main.products') }}">Tous les produits</a></li>
                            {% if parent_categories %}
                                <li><hr class="dropdown-divider"></li>
                                {% for category in parent_categories %}
                                    <li>
                                        <a class="dropdown-item" href="{{ url_for('main.products', category=category.id) }}">
                                            {{ category.name }}
                                        </a>
                                    </li>
                                    {% if category.subcategories %}
                                        {% for subcategory in category.subcategories %}
                                            <li>
                                                <a class="dropdown-item ps-4" href="{{ url_for('main.products', category=subcategory.id) }}">
                                                    &raquo; {{ subcategory.name }}
                                                </a>
                                            </li>
                                        {% endfor %}
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ url_for('main.services') }}">Nos services</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.endpoint == 'main.contact' %}active{% endif %}" href="{{ url_for('main.contact') }}">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Flash Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="container mt-3">
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    <!-- Main Content -->
    {% block content %}{% endblock %}

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5 class="footer-heading">À propos de GMPL</h5>
                    <p>{{ settings.company_description|default('Spécialiste des moteurs et pièces détachées pour poids lourds') }}</p>
                    <div class="social-icons mt-3">
                        <a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                        <a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5 class="footer-heading">Liens rapides</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ url_for('main.index') }}">Accueil</a></li>
                        <li><a href="{{ url_for('main.about') }}">À propos</a></li>
                        <li><a href="{{ url_for('main.products') }}">Produits</a></li>
                        <li><a href="{{ url_for('main.services') }}">Services</a></li>
                        <li><a href="{{ url_for('main.contact') }}">Contact</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="footer-heading">Contact</h5>
                    <ul class="list-unstyled">
                        <li>
                            <i class="fas fa-map-marker-alt"></i> 
                            {{ settings.company_address|default('Km 12, route de Rufisque, Dakar, Sénégal') }}
                            <a href="https://maps.app.goo.gl/ZTJhi3FrtA9FzsUp9" target="_blank" class="ms-1" title="Voir sur Google Maps">
                                <i class="fas fa-map text-white-50"></i>
                            </a>
                        </li>
                        <li><i class="fas fa-phone"></i> 
                          <span class="d-block">+221 77 125 29 29 / 77 049 62 17</span>
                          <span class="d-block">+221 76 011 53 53 / 77 522 36 36</span>
                        </li>
                        <li><i class="fas fa-envelope"></i> {{ settings.company_email|default('contact@gmpl.sn') }}</li>
                    </ul>
                </div>
            </div>
            <div class="row copyright">
                <div class="col-md-12 text-center">
                    <p>&copy; {{ now.year }} {{ settings.company_name|default('GMPL - General Motors Poids Lourds') }}. Tous droits réservés.</p>
                    <p class="admin-link"><a href="{{ url_for('admin.login') }}" class="text-muted small">Administration</a></p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Back to Top Button -->
    <button id="back-to-top" class="btn btn-primary back-to-top" role="button" title="Retour en haut">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Custom JavaScript -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>
