Page Header

<header class="c-header">
  <div class="c-header__bug">
    {% render '@image', { src: '/img/brand/bug.svg' } %}
  </div>
  <div class="c-header__inner">
    <div class="c-header__logo">
      <a href="/">
        {% render '@image', { src: '/img/brand/hhdelogo.svg' } %}
      </a>
    </div>
    {% if hamburgerMenu=='selfbooking' %}
      <button class="c-header__hamburger medium:hidden" ui-modal-open data-config='{ "id": "mobile-menu-selfbooking","title":"Menu","style":"menu"}'>
    {% else %}
      <button class="c-header__hamburger" ui-modal-open data-config='{ "id": "mobile-menu-portal","title":"Menu","style":"menu"}'>
    {% endif %}
      {% if ([0,1] | random) %}
        {% render '@svg', { name: 'burger' } %}
      {% else %}
        {% render '@svg', { name: 'burger-heart-red' } %}
      {% endif %}
    </button>
  </div>

  {% if withSearch %}
    <div class="c-header__search" ui-search-toggle>

      {% render '@form-input', {
        icon: { svg: 'glas' },
        placeholder: 'Restaurant'
      } %}

      <div ui-search-toggle-target aria-hidden>
        {% render '@form-input', {
          icon: {
            svg: 'locate-a',
            clickable: true
          },
          placeholder: 'Hamburg'
        } %}
      </div>

      <div ui-search-toggle-target aria-hidden>
        {% render '@button', {
          label: { default: 'Suchen' },
          variant: 'pill',
          fullWidth: true
        } %}
      </div>

      {% if withFilterAndMap %}
        <div class="hidden medium:flex large:hidden gap-6">
          <button
            ui-modal-open data-config='{"id":"filter654","title":"Suchergebnisse&nbsp;filtern","style":"small"}'
            class="
              c-button
              c-button--primary
              c-button--outlined
              c-button--pill
              c-button--large
            ">
            {% render '@svg', { name: 'filter' } %}
            {% render '@badge', { value: '99' } %}
          </button>
          <button
            ui-modal-open data-config='{"id":"map658","title":"Karte","style":"large"}'
            class="
              c-button
              c-button--primary
              c-button--outlined
              c-button--pill
              c-button--large
            ">
            {% render '@svg', { name: 'map' } %}
          </button>
        </div>
      {% endif %}

    </div>
  {% endif %}

</header>