{% from "../../search/macro.njk" import LBCamdenSearch %}

{% if params.search !== false %}
  <button aria-controls="{{ id_prefix }}-search-menu" aria-expanded="true" aria-label="Hide search menu"
          class="lbcamden-header__search-toggle-button" data-text-for-hide="Hide search menu"
          data-text-for-show="Show search menu" data-toggle-mobile-group="top" data-toggle-desktop-group="top"
          data-tracking-key="search" hidden id="{{ id_prefix }}-search-menu-toggle" type="button">
        <span class="govuk-visually-hidden">
          Search Camden.gov.uk
        </span>

    {# <svg class="lbcamden-header__search-toggle-button-link-icon" width="27" height="27" #}
    {# viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> #}
    {# <circle cx="12.0161" cy="11.0161" r="8.51613" stroke="currentColor" stroke-width="3"></circle> #}
    {# <line x1="17.8668" y1="17.3587" x2="26.4475" y2="25.9393" stroke="currentColor" stroke-width="3"></line> #}
    {# </svg> #}
    <span class="lbcamden-header__search-toggle-button-inner">
      <svg class="lbcamden-header__search-toggle-button-link-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
           xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
              d="M4 7.0944C4 4.69831 5.96416 2.73926 8.4077 2.73926C10.8512 2.73926 12.8154 4.69831 12.8154 7.0944C12.8154 9.49049 10.8512 11.4495 8.4077 11.4495C5.96416 11.4495 4 9.49049 4 7.0944ZM8.4077 0.739258C4.87805 0.739258 2 3.57537 2 7.0944C2 10.6134 4.87805 13.4495 8.4077 13.4495C9.42634 13.4495 10.3907 13.2133 11.2473 12.7927C11.3151 12.8695 11.3923 12.9335 11.4756 12.9845L16.1462 18.4965C16.5032 18.9178 17.1342 18.97 17.5556 18.6129C17.9769 18.2559 18.0291 17.6249 17.6721 17.2035L12.9252 11.6014C14.0918 10.4518 14.8154 8.85894 14.8154 7.0944C14.8154 3.57537 11.9373 0.739258 8.4077 0.739258Z"
              fill="currentColor"/>
      </svg>
    </span>

    <span aria-hidden="true" class="lbcamden-header__navigation-top-toggle-close-icon"
          focusable="false">

      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
              d="M17.071 4.34285C17.4615 3.95232 17.4615 3.31916 17.071 2.92864C16.6805 2.53811 16.0473 2.53811 15.6568 2.92864L9.99989 8.58554L4.34314 2.92879C3.95261 2.53826 3.31945 2.53826 2.92893 2.92879C2.5384 3.31931 2.5384 3.95248 2.92893 4.343L8.58568 9.99976L2.92888 15.6566C2.53836 16.0471 2.53836 16.6802 2.92888 17.0708C3.3194 17.4613 3.95257 17.4613 4.34309 17.0708L9.99989 11.414L15.6568 17.0709C16.0474 17.4614 16.6805 17.4614 17.0711 17.0709C17.4616 16.6804 17.4616 16.0472 17.0711 15.6567L11.4141 9.99976L17.071 4.34285Z"
              fill="currentColor"/>
      </svg>

        </span>
  </button>

  <div id="{{ id_prefix }}-search-menu" class="lbcamden-header__search-items">
    <h3 class="govuk-visually-hidden">
      Search
    </h3>
    <div class="lbcamden-header__search-item">
      <a class="lbcamden-header__search-item-link" href="/search">
            <span class="lbcamden-header__search-item-link-text">
              Search
            </span>
        <svg class="lbcamden-header__search-toggle-button-link-icon" width="20" height="20" viewBox="0 0 20 20"
             fill="none"
             xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M4 7.0944C4 4.69831 5.96416 2.73926 8.4077 2.73926C10.8512 2.73926 12.8154 4.69831 12.8154 7.0944C12.8154 9.49049 10.8512 11.4495 8.4077 11.4495C5.96416 11.4495 4 9.49049 4 7.0944ZM8.4077 0.739258C4.87805 0.739258 2 3.57537 2 7.0944C2 10.6134 4.87805 13.4495 8.4077 13.4495C9.42634 13.4495 10.3907 13.2133 11.2473 12.7927C11.3151 12.8695 11.3923 12.9335 11.4756 12.9845L16.1462 18.4965C16.5032 18.9178 17.1342 18.97 17.5556 18.6129C17.9769 18.2559 18.0291 17.6249 17.6721 17.2035L12.9252 11.6014C14.0918 10.4518 14.8154 8.85894 14.8154 7.0944C14.8154 3.57537 11.9373 0.739258 8.4077 0.739258Z"
                fill="currentColor"/>
        </svg>

      </a>
    </div>

    <div class="govuk-width-container lbcamden-header__search-and-popular" hidden>
      <div class="govuk-grid-row govuk-!-margin-bottom-6">
        <div class="govuk-grid-column-full">
          <h2 class="govuk-heading-m">Search</h2>
          {{ LBCamdenSearch({
            fullWidth: true,
            classes: params.search.classes,
            alt: params.search.alt,
            labelText: params.search.labelText,
            placeholderText: params.search.placeholderText,
            name: params.search.name,
            value: params.search.value,
            additionalParameters: params.search.additionalParameters,
            action: params.search.action,
            method: params.search.method
          }) }}
        </div>
      </div>
      {% if params.searchItems | length %}
      <div class="govuk-grid-row">
        <div class="govuk-grid-column-full">
          <h2 class="govuk-heading-m">Popular on Camden.gov.uk</h2>
          <ul class="lbcamden-list lbcamden-list--dash">
            {% for item in params.searchItems %}
              <li class="lbcamden-header__popular-item">
                <a class="govuk-link lbcamden-header__popular-link"
                   href="{{ item.href }}">{{ item.text }}</a>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
{% endif %}