{# templates/macros/layout.html #}

{% macro details(group = '', _class='') %}
  <details
    class="group{{group}} p-2 {{_class}}" data-toggle-group="mobile-panels">
    {{ caller() }}
  </details>
{%- endmacro %}

{% macro summary(id, _class=None, oob=False) %}
  <summary>
    <header class="z-50">
        <div
          id="{{id}}"
          {% if oob %}
          hx-swap-oob="true"
          {% endif %}
          class="{{'flex justify-between items-start gap-2' if not _class else _class}}">
          {{ caller() }}
        </div>
    </header>
  </summary>
{%- endmacro %}

{% macro filter_summary(id, current_local_href, search, search_count, hx_select, oob=True) %}
  <summary class="bg-white/90">
    <div class="flex flex-row items-start">
      <div>
        <div class="md:hidden mx-2 bg-stone-200 rounded">
          <span class="flex items-center justify-center text-stone-600 text-lg h-12 w-12 transition-transform group-open/filter:hidden self-start">
            <i class="fa-solid fa-filter"></i>
          </span>
          <span>
            <svg aria-hidden="true" viewBox="0 0 24 24"
                  class="w-12 h-12 rotate-180 transition-transform group-open/filter:block hidden self-start">
              <path d="M6 9l6 6 6-6" fill="currentColor"/>
            </svg>
          </span>
        </div>
      </div>
      <div
        id="{{id}}"
        class="flex-1 md:hidden grid grid-cols-12 items-center gap-3"
      >
        <div class="flex flex-col items-start gap-2">
          {{ caller() }}

        </div>
      </div>
      {% from 'macros/search.html' import search_mobile %}
      {{ search_mobile(current_local_href, search, search_count, hx_select) }}
    </div>
  </summary>
{%- endmacro %}


{% macro menu(id, _class="") %}
  <div id="{{id}}" hx-swap-oob="outerHTML" class="{{_class}}">
    {{ caller() }}
  </div>
{%- endmacro %}