{% load core_tags menu_tags static wagtailuserbar wagtailcore_tags wagtailimages_tags %}
{% get_site_root as site_root %}
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{{ self.search_description }}">
    <title>FEO GmbH - {% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="{% static 'favicon.png' %}">

    <!-- Google Fonts - Roboto (Local) -->
    <link rel="stylesheet" href="{% static 'fonts/roboto.css' %}">

    <!-- Bootstrap 5 CSS (Local) -->
    <link href="{% static 'vendor/bootstrap/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Bootstrap Icons (Local) -->
    <link rel="stylesheet" href="{% static 'vendor/bootstrap-icons/bootstrap-icons.css' %}">

    <!-- Custom Theme CSS -->
    <link rel="stylesheet" href="{% static 'css/theme.css' %}">

    {% block extra_css %}
    {% endblock %}
</head>
<body>
    {% if request.user.is_authenticated %}
        {% wagtailuserbar %}
    {% endif %}

    <!-- Header -->
    <header>
        <!-- Navigation -->
        {% bootstrap5_top_menu parent=site_root calling_page=self %}

        <!-- Breadcrumbs -->
        {% if not self.url == site_root.url %}
            <div class="bg-light py-4">
                <div class="container">
                    <h1 class="h2 mb-3">{{ self.title }}</h1>
                    <nav aria-label="breadcrumb">
                        {% bootstrap5_breadcrumbs %}
                    </nav>
                </div>
            </div>
        {% endif %}
    </header>

    <!-- Messages -->
    {% if messages %}
        <div class="container mt-4">
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }} 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 %}

    <!-- Full Width Header Block -->
    <div>
        {% block fullwidth_header %}
        {% endblock fullwidth_header %}
    </div>

    <!-- Main Content -->
    <main class="container py-4">
        {% block content %}
        {% endblock content %}
    </main>

    <!-- Footer -->
    <footer>
        <div class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 mb-4 mb-md-0">
                        <h2 class="h4 mb-3">FEO GmbH</h2>
                        <p class="mb-4">{% footer_about %}</p>

                        {% footer_newsletter %}
                    </div>

                    <div class="col-md-4 mb-4 mb-md-0">
                        {% event_calendar %}
                    </div>

                    <div class="col-md-4">
                        <h2 class="h4 mb-3">Kontakt</h2>
                        <address>
                            <p>
                                FEO Gesellschaft für Fortbildungs-<br>
                                und Eventorganisation mbH<br>
                                Unterer Leinritt 18<br>
                                96049 Bamberg
                            </p>
                            <p>
                                Email: <a href="mailto:info@feo.gmbh">info@feo.gmbh</a>
                            </p>
                        </address>

                        <h2 class="h4 mb-3">Stay Connected</h2>
                        <div class="d-flex flex-column gap-2">
                            <a href="https://www.linkedin.com/in/marion-schauf-a2b81152/" target="_blank" class="btn btn-outline-primary social-btn">
                                <i class="bi bi-linkedin me-2"></i>LinkedIn
                            </a>
                            <a href="https://www.xing.com/companies/feogesellschaftf%C3%BCrfortbildungs-undeventorganisationmbh" target="_blank" class="btn btn-outline-primary social-btn">
                                <i class="bi bi-x me-2"></i>Xing
                            </a>
                            <a href="https://www.instagram.com/feogmbh/" target="_blank" class="btn btn-outline-primary social-btn">
                                <i class="bi bi-instagram me-2"></i>Instagram
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="copyright">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6 mb-3 mb-md-0">
                        <p class="mb-0">
                            {% now "Y" %} © FEO GmbH. Alle Rechte vorbehalten.
                            <a href="{% slugurl 'datenschutz' %}">Datenschutz</a> |
                            <a href="{% slugurl 'agb' %}">AGB</a> |
                            <a href="{% slugurl 'imprint' %}">Impressum</a>
                        </p>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <img src="{% static 'img/logo_feo_white.png' %}" alt="Logo FEO GmbH" height="40">
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper (Local) -->
    <script src="{% static 'vendor/bootstrap/bootstrap.bundle.min.js' %}"></script>

    <!-- Navbar scroll effect -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const navbar = document.querySelector('.modern-navbar');
            if (navbar) {
                window.addEventListener('scroll', function() {
                    if (window.scrollY > 50) {
                        navbar.classList.add('scrolled');
                    } else {
                        navbar.classList.remove('scrolled');
                    }
                });
            }
        });
    </script>

    {% block extra_js %}
    {% endblock %}

    <!-- Matomo Tag Manager -->
    <script type="text/javascript">
    var _mtm = window._mtm = window._mtm || [];
    _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.src='https://matomo.feo.gmbh/js/container_gFxCmfoy.js'; s.parentNode.insertBefore(g,s);
    </script>
    <!-- End Matomo Tag Manager -->
</body>
</html>