{# Header Sport Compact #}
<header id="header" class="header-sport-compact {{ config.sticky ? 'header-sticky' : '' }} {{ config.transparent ? 'header-transparent' : '' }}">
    <div class="header-body-compact">
        <div class="container">
            {% set siteName = site.internalName|param(app.request.server.get('REQUEST_URI')) %}
            <div class="header-content">
                <div class="header-logo-compact">
                    <a href="{{ path('home'|route(app.request.server.get('REQUEST_URI')), siteName) }}" class="logo-link">
                        {% if site.logo %}
                            <img alt="{{ site.name }}" height="40" src="{{ vich_uploader_asset(site, 'logoFile') }}"/>
                        {% else %}
                            <img alt="{{ site.name }}" height="40" src="{{ asset('assets/img/logo_site_default.png') }}"/>
                        {% endif %}
                        {% if not site.nameInLogo %}
                            <span class="site-name-compact">{{ site.name }}</span>
                        {% endif %}
                    </a>
                </div>
                <nav class="nav-compact">
                    <ul>
                        {% for pageMenu in site.pages|filter(v => v.displayMenuHeader == true)|sort((a, b) => a.menuHeaderOrder <=> b.menuHeaderOrder) %}
                            {% set param = siteName|merge({'name':pageMenu.nameMenuUrl}) %}
                            <li><a href="{{ path('page'|route(app.request.server.get('REQUEST_URI')), param) }}">{{ pageMenu.nameMenu }}</a></li>
                        {% endfor %}
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>

<style>
.header-sport-compact {
    background: var(--headerBackgroundColor, #ffffff);
    padding: 0.75rem 0;
}
.header-sport-compact.header-transparent {
    background: rgba(0,0,0,0.3);
    position: absolute;
    width: 100%;
    backdrop-filter: blur(10px);
}
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo-link { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.site-name-compact { color: var(--headerTextColor, #333333); font-size: 1.1rem; font-weight: 600; }
.nav-compact ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav-compact a { color: var(--headerTextColor, #333333); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.nav-compact a:hover { color: var(--colorTheme, #2563eb); }
</style>