{% apply spaceless %}
<header class="header">
    <div id="mobile-nav-btns" class="btn-group-vertical d-md-none" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-nav" aria-controls="offcanvas-nav">
        <button id="btn-nav" type="button" class="btn btn-secondary m-0 text-white">
            <i class="far fa-fw fa-bars"></i> <span class="visually-hidden">Navigation</span>
        </button>
        <button id="btn-search" type="button" class="btn btn-tertiary m-0">
            <i class="far fa-fw fa-search"></i> <span class="visually-hidden">Suche</span>
        </button>
    </div>
    <div class="header-container align-items-end">
            <div id="logo" class="p-1 pb-md-2 pb-xxl-3">
                <a href="{{ ibexa_url( ibexa.rootLocation ) }}" class="d-block">
  <img src="/images/logo.svg" width="140" height="140" alt="Logo Don Bosco Engagement" />
                    {# TODO: use svg for prod
                    <img src="/images/donbosco-logo.png" width="140" height="140" alt="Logo Don Bosco Engagement" />
                    #}
                </a>
            </div>
            <div id="engagement">
                <a href="{{ ibexa_url( ibexa.rootLocation ) }}">
                    <span class="link-secondary">BE</span><span class="link-dark">RUFUNG</span>
                </a>
            </div>

            <div id="search" class="d-none d-md-block mb-0 mb-xxl-1">
                <form action="{{ path('donbosco_search') }}" method="get" class="form-search" name="search">
                    <div class="input-group">
                        <button class="btn bg-white" type="submit" id="searchbutton" name="search[save]">
                            <i class="far fa-search fa-rotate-90"></i><span class="visually-hidden">Suchen</span>
                        </button>
                        <input name="search[searchText]" type="text" class="form-control" placeholder="SUCHE" aria-label="Ihr Suchwort">
                    </div>
                    <input type="hidden" name="search[_token]" value="{{ csrf_token('search') }}">
                </form>
            </div>
        <nav id="main-nav" class="d-none d-md-block pb-md-1 pb-xl-0" aria-label="Hauptnavigation">
        {% block topmenu %}
            {{ render(
                controller(
                    "App\\Controller\\MenuController::engagementTopMenu",
                    {'currentLocationId': locationId is defined ? locationId : null}
                )
            ) }}
        {% endblock %}
        </nav>
        <nav id="meta-nav" aria-label="MetaNavi" class="d-none d-md-block pb-md-1">
            <ul class="list-unstyled">
                {% if isValidLocationId(52582) %}
                    <li class="nav-item me-lg-3">
                        <a class="nav-link" href="#" title="Kontakt"><i class="far fa-fw fa-phone me-1 d-xs-inline d-md-none d-lg-inline"></i>Kontakt</a>
                    </li>
                {% endif %}
                {% if isValidLocationId(52583) %}
                <li class="nav-item">
                    <a class="nav-link" href="#" title="Fragen und Antworten"><i class="fa fa-fw fa-question-circle me-1 d-xs-inline d-md-none d-lg-inline"></i>Fragen & Antworten</a>
                </li>
                {% endif %}
            </ul>
        </nav>
        </div>

    {# TODO: make smart and DRY, avoid duplicate ids #}
    <div class="offcanvas offcanvas-end d-md-none" tabindex="-1" id="offcanvas-nav" aria-labelledby="offcanvas-nav-label">
        <span id="offcanvas-nav-label" class="visually-hidden">Navigation</span>
        <div class="offcanvas-header justify-content-end d-md-none">
            <button type="button" class="btn btn-offcanvas-close" data-bs-dismiss="offcanvas" aria-label="Navigation schließen">
                <i class="far fa-fw fa-times"></i>
            </button>
        </div>
        <div class="offcanvas-body row px-0 pb-0">
            <nav id="main-nav-xs" class="col-12" aria-label="Hauptnavigation">{{ block('topmenu') }}</nav>
            <nav id="meta-nav" class="col-12" aria-label="MetaNavi">
                <ul class="list-unstyled">
                    {% if isValidLocationId(52582) %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path( "ibexa.url.alias", {"locationId": 52582}) }}" title="Veranstaltungen und Termine"><i class="fa fa-fw fa-calendar-day me-1"></i>Veranstaltungen</a>
                    </li>
                    {% endif %}
                    {% if isValidLocationId(52583) %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path( "ibexa.url.alias", {"locationId": 52583}) }}" title="Fragen und Antworten"><i class="fa fa-fw fa-question-circle me-1"></i>Fragen & Antworten</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            <div id="search" class="col-12 p-3">
                <form action="{{ path('donbosco_search') }}" method="get" class="form-search" name="search">
                    <div class="input-group shadow-lg">
                        <button class="btn bg-white" type="submit" id="searchbutton" name="search[save]">
                            <i class="far fa-search fa-rotate-90"></i><span class="visually-hidden">Suchen</span>
                        </button>
                        <input name="search[searchText]" type="text" class="form-control" placeholder="Suche" aria-label="Ihr Suchwort">
                    </div>
                    <input type="hidden" name="search[_token]" value="{{ csrf_token('search') }}">
                </form>
            </div>
        </div>
    </div>
</header>
{% endapply %}