
  {# View toggle bar - desktop only #}
  <div class="hidden md:flex justify-end px-3 pt-3 gap-1">
    {% set list_href = (current_local_href ~ {'view': None}|qs)|host %}
    {% set tile_href = (current_local_href ~ {'view': 'tile'}|qs)|host %}
    <a
      href="{{ list_href }}"
      hx-get="{{ list_href }}"
      hx-target="#main-panel"
      hx-select="{{hx_select_search}}"
      hx-swap="outerHTML"
      hx-push-url="true"
      class="p-1.5 rounded {{ 'bg-stone-200 text-stone-800' if view != 'tile' else 'text-stone-400 hover:text-stone-600' }}"
      title="List view"
      _="on click js localStorage.removeItem('blog_view') end"
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </a>
    <a
      href="{{ tile_href }}"
      hx-get="{{ tile_href }}"
      hx-target="#main-panel"
      hx-select="{{hx_select_search}}"
      hx-swap="outerHTML"
      hx-push-url="true"
      class="p-1.5 rounded {{ 'bg-stone-200 text-stone-800' if view == 'tile' else 'text-stone-400 hover:text-stone-600' }}"
      title="Tile view"
      _="on click js localStorage.setItem('blog_view','tile') end"
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
      </svg>
    </a>
  </div>

  {# Cards container - list or grid based on view #}
  {% if view == 'tile' %}
    <div class="max-w-full px-3 py-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
      {% include "_types/blog/_cards.html" %}
    </div>
  {% else %}
    <div class="max-w-full px-3 py-3 space-y-3">
      {% include "_types/blog/_cards.html" %}
    </div>
  {% endif %}
  <div class="pb-8"></div>
