{% extends "/symfony.html.twig" %}

{% block headerTag %}
<header class="pb-2 d-flex flex-column justify-content-start fixed-top">
{% endblock %}
{% block headerContent %}
    <div class="d-flex justify-content-between w-100 px-2">
        <!--region Website name-->
        <a class="navbar-brand" href="{{ path('core_main') }}">
            Web EDM
        </a>
        <!--endregion-->
        <!--region menu-->
        <nav class="navbar navbar-expand-lg py-0">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="{{ path('user_signIn') }}" class="nav-link py-0">Sign In</a></li>
                <li class="nav-item"><a href="{{ path('user_signUp') }}" class="nav-link py-0">Sign Up</a></li>
                <li class="nav-item dropdown dropstart">
                    <a class="nav-link dropdown-toggle py-0" id="dropdown-locale" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="{{ asset('images/freakFlagSprite.png') }}"
                             class="fflag fflag-{{ app.request.locale|u.upper }} ff-md"
                             alt="{{ app.request.locale|locale_name(app.request.locale)|u.title }}"
                             title="{{ app.request.locale|locale_name(app.request.locale)|u.title }}"
                        >
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dropdown-locale">
                        {% for locale in locale_all %}
                            <li>
                                <a class="dropdown-item" href="{{ path(app.current_route, {'_locale': locale}) }}">
                                    <img src="{{ asset('images/freakFlagSprite.png') }}"
                                         class="fflag fflag-{{ locale|u.upper }} ff-md"
                                         alt="{{ locale|locale_name(locale)|u.title }}"
                                    >
                                    {{ locale|locale_name(locale)|u.title }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            </ul>
        </nav>
        <!--endregion-->
    </div>
{% endblock %}