{# _side_panel_c.html — C 탭: 표시 옵션 양방향 바인딩 + 카드 메타 토글 (Task 3.10 / 3.11) #}

{# ── 결과 표시 형식 (viewMode) ─────────────────────────────────── #}
<div class="opt-group">
  <h4>{{ _('Result display format') }}</h4>
  <div class="opt-btn-row">
    <button type="button" class="view-btn"
            @click="$store.search.viewMode = 'grid'"
            :class="{ active: $store.search.viewMode === 'grid' }">
      🖼 {{ _('Grid') }}
    </button>
    <button type="button" class="view-btn"
            @click="$store.search.viewMode = 'list'"
            :class="{ active: $store.search.viewMode === 'list' }">
      ≡ {{ _('List') }}
    </button>
  </div>
</div>

{# ── 카드 크기 (cardSize) ──────────────────────────────────────── #}
<div class="opt-group">
  <h4>{{ _('Card size') }}</h4>
  <div class="opt-btn-row">
    <button type="button" class="size-btn"
            @click="$store.search.cardSize = 's'"
            :class="{ active: $store.search.cardSize === 's' }">S</button>
    <button type="button" class="size-btn"
            @click="$store.search.cardSize = 'm'"
            :class="{ active: $store.search.cardSize === 'm' }">M</button>
    <button type="button" class="size-btn"
            @click="$store.search.cardSize = 'l'"
            :class="{ active: $store.search.cardSize === 'l' }">L</button>
  </div>
</div>

{# ── 정렬 (sort) — 변경 시 서버 재호출 ────────────────────────── #}
<div class="opt-group">
  <h4>{{ _('Sort') }}</h4>
  <select class="opt-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>

{# ── 카드에 표시할 정보 (cardMeta) ────────────────────────────── #}
<div class="opt-group">
  <h4>{{ _('Card display info') }}</h4>
  <div class="opt-check-list">
    <label class="opt-check">
      <input type="checkbox" x-model="$store.search.cardMeta.labels" />
      {{ _('Label') }}
    </label>
    <label class="opt-check">
      <input type="checkbox" x-model="$store.search.cardMeta.pack" />
      {{ _('Packs') }}
    </label>
    <label class="opt-check">
      <input type="checkbox" x-model="$store.search.cardMeta.score" />
      {{ _('Score') }}
    </label>
    <label class="opt-check">
      <input type="checkbox" x-model="$store.search.cardMeta.size" />
      {{ _('Size') }}
    </label>
  </div>
</div>