{# 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>
        {% include '_types/blog/mobile/_filter/_hamburger.html' %}
      </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>
      {% import '_types/browse/mobile/_filter/search.html' as s %}
      {{ s.search(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 %}