{# M5 — 결과 영역 전체 fragment (초기 로드, offset=0 전용).
   상단 툴바 (그리드/리스트/카드 크기/정렬/카운트) + 카드 영역 wrapper.
   카드 및 더 보기 버튼은 _results_cards_only.html 에서 렌더.
   페이지네이션(offset>0) 시에는 이 파일을 반환하지 않고
   _results_cards_only.html 만 반환해 toolbar 중복을 방지한다. #}

<div class="results-toolbar">
  <div class="view-toggle">
    <button type="button"
            class="view-btn"
            :class="{ active: $store.search.viewMode === 'grid' }"
            @click="$store.search.viewMode = 'grid'"
            aria-label="{{ _('Grid') }}">
      🖼 <span>{{ _("Grid") }}</span>
    </button>
    <button type="button"
            class="view-btn"
            :class="{ active: $store.search.viewMode === 'list' }"
            @click="$store.search.viewMode = 'list'"
            aria-label="{{ _('List') }}">
      ≡ <span>{{ _("List") }}</span>
    </button>
  </div>

  <div class="size-toggle">
    <button type="button" class="size-btn"
            :class="{ active: $store.search.cardSize === 's' }"
            @click="$store.search.cardSize = 's'">S</button>
    <button type="button" class="size-btn"
            :class="{ active: $store.search.cardSize === 'm' }"
            @click="$store.search.cardSize = 'm'">M</button>
    <button type="button" class="size-btn"
            :class="{ active: $store.search.cardSize === 'l' }"
            @click="$store.search.cardSize = 'l'">L</button>
  </div>

  <div class="sort-control">
    <label for="sort-select" class="sr-only">{{ _("Sort") }}</label>
    <select id="sort-select"
            x-model="$store.search.sort"
            @change="htmx.trigger(document.querySelector('form.search-bar'), 'submit')">
      <option value="score">{{ _("Score↓") }}</option>
      <option value="added_desc">{{ _("Added↓") }}</option>
      <option value="added_asc">{{ _("Added↑") }}</option>
      <option value="name_asc">{{ _("Name↑") }}</option>
      <option value="name_desc">{{ _("Name↓") }}</option>
      <option value="size_desc">{{ _("Size↓") }}</option>
      <option value="size_asc">{{ _("Size↑") }}</option>
    </select>
  </div>

  <div class="total-count">
    <strong>{{ total }}</strong> {{ _("Assets") }}
  </div>
</div>

<div class="results-cards"
     :class="['view-mode-' + $store.search.viewMode, 'card-size-' + $store.search.cardSize]">
  {% include "_results_cards_only.html" %}
</div>