{# Product collection with a grid / list view toggle.
   The chosen view is held in Alpine and persisted to localStorage so it
   survives navigation; `_card.html` reads the same `view` state to switch
   its own layout between a vertical card and a horizontal row. #}
<div x-data="{ view: localStorage.getItem('shopView') === 'list' ? 'list' : 'grid' }"
  x-init="$watch('view', v => localStorage.setItem('shopView', v))"
  class="space-y-4">
  <!-- View toggle -->
  <div class="flex justify-end">
    <div class="inline-flex gap-0.5 rounded-radius border border-outline p-0.5 dark:border-outline-dark" role="group"
      aria-label="{{ t(key='view-grid', lang=lang | default(value='sk')) }} / {{ t(key='view-list', lang=lang | default(value='sk')) }}">
      <button type="button" @click="view = 'grid'" :aria-pressed="view === 'grid'"
        class="inline-flex size-8 items-center justify-center rounded-radius transition"
        :class="view === 'grid' ? 'bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark' : 'text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark'"
        aria-label="{{ t(key='view-grid', lang=lang | default(value='sk')) }}"
        title="{{ t(key='view-grid', lang=lang | default(value='sk')) }}">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
          <path d="M3 3h6v6H3V3Zm8 0h6v6h-6V3ZM3 11h6v6H3v-6Zm8 0h6v6h-6v-6Z" />
        </svg>
      </button>
      <button type="button" @click="view = 'list'" :aria-pressed="view === 'list'"
        class="inline-flex size-8 items-center justify-center rounded-radius transition"
        :class="view === 'list' ? 'bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark' : 'text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark'"
        aria-label="{{ t(key='view-list', lang=lang | default(value='sk')) }}"
        title="{{ t(key='view-list', lang=lang | default(value='sk')) }}">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
          <path d="M3 4h14v2.5H3V4Zm0 4.75h14v2.5H3v-2.5ZM3 13.5h14V16H3v-2.5Z" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Products -->
  <div :class="view === 'list' ? 'flex flex-col gap-5' : 'grid grid-cols-2 gap-5 sm:grid-cols-3 xl:grid-cols-4'">
    {% for product in products %}
    {% include "shop/_card.html" %}
    {% endfor %}
  </div>
</div>