<header class="site-header">
    <div class="header-top text-sm d-none d-lg-block">
        <div class="container">
            <div class="header-top-content d-flex justify-content-between gap-3 align-items-center py-2">
                <div class="logo">
                    <a href="{{ path('app_front_home') }}">
                        <img alt="{{ 'menu.home'|trans({}, 'app') }}" src="{{ asset('vendors/assets/img/logo-bbb.png') }}"/>
                    </a>
                </div>
                <div class="header-top-right d-flex gap-3">
                    <div class="header-contact text-sm d-none d-lg-block">
                        <ul class="d-flex gap-3">
                            <li class="link-phone">
                                <a href="{{ phone.cleanValue }}" title="{{ 'menu.call_us'|trans({}, 'app') }}">{{ phone.value|raw }}</a>
                            </li>
                            <li class="link-mail">
                                <a href="{{ contactEmail.cleanValue|raw }}" title="{{ 'menu.write_us'|trans({}, 'app') }}">{{ contactEmail.value|raw }}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="header-lang">
                        {% for locale in available_locales %}
                            {% if locale != current_locale %}
                                <a href="{{ path(currentRoute, currentParams|merge({'_locale': locale})) }}" class="text-uppercase">
                                    {{ locale }}
                                </a>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-menu py-3 d-none d-lg-block">
        <div class="container">
            <div class="header-menu-content d-flex gap-3 justify-content-between align-items-center">
                <nav class="nav-main-menu main-nav" role="navigation">
                    <ul id="main-menu" class="main-menu">
                        <li><a href="{{ path('app_front_home') }}">{{ 'menu.home'|trans({}, 'app') }}</a></li>

                        <li class="has-children menu-parent has-mega-menu">
                            <a href="{{ path('app_business_public_products') }}">{{ 'menu.products'|trans({}, 'app') }}</a>
                            <div class="dropdown-mega-menu">
                                <div class="dropdown-mega-menu-content">
                                    <div class="row-menu">
                                        {% include 'core/front/shared/product-menu.html.twig' with {menu: menu} %}
                                    </div>
                                    <div class="row-menu">
                                        <div class="pt-3 menu-icons">
                                            <ul>
                                                {% for elt in webSites %}
                                                    {% if elt is not null and elt.thumbnail is not null and file_exists(elt.thumbnail.url) %}
                                                        <li>
                                                            <a href="{{ elt.url }}">
                                                                <img alt="{{ elt.i18n(locale).name }}" src="{{ asset(elt.thumbnail.url) }}"/>
                                                            </a>
                                                        </li>
                                                    {% endif %}
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="has-children menu-parent">
                            <a href="#">{{ 'menu.services'|trans({}, 'app') }}</a>
                            <div class="dropdown-classic-menu">
                                <ul class="submenu">
                                    <li><a href="{{ path('app_business_public_product_depot') }}">{{ 'menu.deposit'|trans({}, 'app') }}</a></li>
                                    <li><a href="{{ path('app_front_cms_claim') }}">{{ 'menu.claim'|trans({}, 'app') }}</a></li>
                                    <li><a href="{{ path('app_front_mentorship') }}">{{ 'menu.mentorship'|trans({}, 'app') }}</a></li>
{#                                    <li><a href="#">{{ 'menu.card_request'|trans({}, 'app') }}</a></li>#}
                                    <li><a href="{{ path('business_front_request_form_checkbook') }}">{{ 'menu.checkbook_request'|trans({}, 'app') }}</a></li>
                                </ul>
                            </div>
                        </li>

                        <li class="has-children menu-parent">
                            <a href="{{ path('app_front_about_us') }}">{{ 'menu.about_us'|trans({}, 'app') }}</a>
                            <div class="dropdown-classic-menu">
                                <ul class="submenu">
                                    <li><a href="{{ path('app_front_about_us') }}">{{ 'menu.about'|trans({}, 'app') }}</a></li>
                                    <li><a href="{{ path('app_front_gouvernance') }}">{{ 'menu.governance'|trans({}, 'app') }}</a></li>
                                    <li><a href="{{ path('app_front_carreers') }}">{{ 'menu.careers'|trans({}, 'app') }}</a></li>
                                    <li><a href="{{ path('app_blog_posts') }}">{{ 'menu.news'|trans({}, 'app') }}</a></li>
                                    <li><a href="{{ path('app_front_contact') }}">{{ 'menu.contacts'|trans({}, 'app') }}</a></li>
                                </ul>
                            </div>
                        </li>

                        <li>
                            <a href="{{ path('app_business_public_agencies') }}">{{ 'menu.atm'|trans({}, 'app') }}</a>
                        </li>

                        <li>
                            <a href="{{ path('business_front_request_form_simulator') }}">{{ 'menu.simulators'|trans({}, 'app') }}</a>
                        </li>
                    </ul>
                </nav>

                <nav class="nav-links">
                    <ul>
                        <li class="link-pers-green">
                            <a href="#" class="btn btn-green">{{ 'menu.open_account'|trans({}, 'app') }}</a>
                            <ul>
                                <li><a href="{{ path('app_business_become_customer') }}">{{ 'menu.physical_person'|trans({}, 'app') }}</a></li>
                                <li><a href="{{ path('app_business_become_moral_customer') }}">{{ 'menu.moral_person'|trans({}, 'app') }}</a></li>
                            </ul>
                        </li>
                        <li class="link-pers-white">
                            <a href="{{ path('app_business_public_product_ebanking') }}">{{ 'menu.ebanking'|trans({}, 'app') }}</a>
                            <ul>
                                <li><a href="https://ebanking.bangebj.com/" target="_blank">{{ 'menu.connect'|trans({}, 'app') }}</a></li>
                                <li><a href="{{ path('app_business_public_product_ebanking') }}">{{ 'menu.subscribe'|trans({}, 'app') }}</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>

            </div>
        </div>
    </div>

    {% include 'core/front/shared/mobile-menu.html.twig' with {
        menu: menu,
        available_locales: available_locales,
        currentRoute: currentRoute,
        currentParams: currentParams,
        current_locale: current_locale
    } %}
</header>