{% load i18n %}
{% comment %}
  card_grid.html — toggleable grid / list view for card collections.

  Context:
    cards — CardGridData instance (codex_django.cabinet.types.CardGridData)

  Alpine.js handles grid/list toggle client-side (no reload).

  Usage:
    {% include "cabinet/components/card_grid.html" with cards=cards %}
{% endcomment %}
<div class="cab-card-grid"
     x-data="{ viewMode: '{{ cards.view_mode }}', search: '' }">

  {# Toolbar #}
  <div class="cab-card-grid__toolbar d-flex align-items-center gap-2">

    {% if cards.search_placeholder %}
    <div class="cab-card-grid__search">
      <div class="input-group input-group-sm">
        <span class="input-group-text bg-white border-end-0">
          <i class="bi bi-search text-muted"></i>
        </span>
        <input type="text"
               class="form-control border-start-0 ps-0"
               placeholder="{{ cards.search_placeholder }}"
               x-model="search">
      </div>
    </div>
    {% endif %}

    <div class="ms-auto d-flex gap-1">
      <button class="btn btn-sm"
              :class="viewMode === 'grid' ? 'btn-secondary' : 'btn-outline-secondary'"
              @click="viewMode = 'grid'"
              title="{% trans 'Сетка' %}">
        <i class="bi bi-grid-3x3-gap"></i>
      </button>
      <button class="btn btn-sm"
              :class="viewMode === 'list' ? 'btn-secondary' : 'btn-outline-secondary'"
              @click="viewMode = 'list'"
              title="{% trans 'Список' %}">
        <i class="bi bi-list-ul"></i>
      </button>
    </div>

  </div>

  {# Grid view #}
  <div x-show="viewMode === 'grid'">
    {% if cards.items %}
    <div class="row g-3">
      {% for item in cards.items %}
      <div class="col-sm-6 col-md-4 col-lg-3"
           x-show="search === '' || '{{ item.title|lower }}'.includes(search.toLowerCase())">
        <a href="{{ item.url|default:'#' }}" class="cab-card d-block h-100 text-decoration-none">
          <div class="cab-card__header">
            {% if item.avatar %}
            {% include "cabinet/includes/_avatar.html" with initials=item.avatar size="36" %}
            {% endif %}
            <div class="cab-card__title">{{ item.title }}</div>
            {% if item.badge %}
            <span class="badge bg-{{ item.badge_style }}">{{ item.badge }}</span>
            {% endif %}
          </div>
          {% if item.subtitle %}
          <div class="cab-card__subtitle">{{ item.subtitle }}</div>
          {% endif %}
          {% if item.meta %}
          <div class="cab-card__meta">
            {% for icon, text in item.meta %}
            <span class="cab-card__meta-item">
              <i class="bi {{ icon }}"></i>{{ text }}
            </span>
            {% endfor %}
          </div>
          {% endif %}
        </a>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="text-center text-muted py-5">
      <i class="bi bi-inbox fs-3 d-block mb-2"></i>
      {{ cards.empty_message }}
    </div>
    {% endif %}
  </div>

  {# List view #}
  <div x-show="viewMode === 'list'" style="display: none;">
    {% if cards.items %}
    <div class="border rounded overflow-hidden">
      {% for item in cards.items %}
      <a href="{{ item.url|default:'#' }}"
         class="cab-card cab-card--list text-decoration-none"
         x-show="search === '' || '{{ item.title|lower }}'.includes(search.toLowerCase())">
        {% if item.avatar %}
        {% include "cabinet/includes/_avatar.html" with initials=item.avatar size="36" %}
        {% endif %}
        <div class="flex-grow-1 min-width-0">
          <div class="cab-card__title">{{ item.title }}</div>
          {% if item.subtitle %}
          <div class="cab-card__subtitle">{{ item.subtitle }}</div>
          {% endif %}
        </div>
        {% if item.badge %}
        <span class="badge bg-{{ item.badge_style }} ms-auto">{{ item.badge }}</span>
        {% endif %}
        {% if item.meta %}
        <div class="cab-card__meta ms-3">
          {% for icon, text in item.meta %}
          <span class="cab-card__meta-item">
            <i class="bi {{ icon }}"></i>{{ text }}
          </span>
          {% endfor %}
        </div>
        {% endif %}
      </a>
      {% endfor %}
    </div>
    {% else %}
    <div class="text-center text-muted py-5">
      <i class="bi bi-inbox fs-3 d-block mb-2"></i>
      {{ cards.empty_message }}
    </div>
    {% endif %}
  </div>

</div>