{% extends 'styleguide2/includes/organisms/header/simple_header_with_tags.html' %}

{% block header_margin_class %}
  mb-10
{% endblock %}

{% block classes %}
  bg-black flex items-center w-full pt-28 pb-8

  md:mb-16

  xl:pt-48 xl:pb-24

  {% block extra_classes %}{% endblock %}
{% endblock %}

{% block after_heading %}
  {% if show_tags %}
    {% include 'styleguide2/includes/molecules/tags/tags.html' with classes='mb-4' size_classes='' tags_are_selectable=True extra_tag=filtered_tag %}
  {% endif %}

  <form
    class="flex flex-col gap-4 items-start justify-start"
    method="get"
    name="searchForm"
  >
    <input
      type="text"
      name="q"
      id="search_query"

      {% if search_query %}
        value="{{ search_query }}"
      {% endif %}

      class="max-w-md w-full bg-grey-180 px-4 py-2 text-black"
      placeholder="Hledej..."
    >

    {% if search_query %}
      <span
        class="text-white underline cursor-pointer"
        id="reset-search"
      >Vymazat vyhledávání</span>

      <script>
        const resetSearch = (event) => {
          event.preventDefault();
          document.getElementById('search_query').value = "";
          document.searchForm.submit();
        }

        document.getElementById("reset-search").onclick = resetSearch
      </script>
    {% endif %}
  </form>
{% endblock %}