{% extends "base.html" %}
{% block title %}Card Browser — {{ set_name }}{% endblock %}
{% block content %}

<h1>Card Browser <span class="subtitle">— {{ set_name }} ({{ card_count }} cards)</span></h1>

<form method="get" class="filter-bar">
  <div class="form-row">
    <div class="form-group">
      <label for="filter_name">Search</label>
      <input type="text" id="filter_name" name="filter_name" value="{{ filter_name }}" placeholder="Search by name...">
    </div>
    <div class="form-group">
      <label for="filter_type">Type</label>
      <select id="filter_type" name="filter_type">
        <option value="">All</option>
        {% for ct in card_types %}
        <option value="{{ ct }}" {% if filter_type == ct %}selected{% endif %}>{{ ct.capitalize() }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group" style="align-self: flex-end;">
      <button type="submit" class="btn btn-primary">Filter</button>
      <a href="/set/{{ set_id }}/browser" class="btn">Clear</a>
    </div>
  </div>
</form>

<table class="data-table">
  <thead>
    <tr>
      <th><a href="?sort_by=card_id&sort_dir={% if sort_by == 'card_id' and sort_dir == 'asc' %}desc{% else %}asc{% endif %}&filter_name={{ filter_name }}&filter_type={{ filter_type }}">Card ID {% if sort_by == 'card_id' %}{{ '▲' if sort_dir == 'asc' else '▼' }}{% endif %}</a></th>
      <th><a href="?sort_by=name&sort_dir={% if sort_by == 'name' and sort_dir == 'asc' %}desc{% else %}asc{% endif %}&filter_name={{ filter_name }}&filter_type={{ filter_type }}">Name {% if sort_by == 'name' %}{{ '▲' if sort_dir == 'asc' else '▼' }}{% endif %}</a></th>
      <th><a href="?sort_by=type&sort_dir={% if sort_by == 'type' and sort_dir == 'asc' %}desc{% else %}asc{% endif %}&filter_name={{ filter_name }}&filter_type={{ filter_type }}">Type {% if sort_by == 'type' %}{{ '▲' if sort_dir == 'asc' else '▼' }}{% endif %}</a></th>
      <th>Mana Cost</th>
      <th><a href="?sort_by=attack&sort_dir={% if sort_by == 'attack' and sort_dir == 'asc' %}desc{% else %}asc{% endif %}&filter_name={{ filter_name }}&filter_type={{ filter_type }}">Atk {% if sort_by == 'attack' %}{{ '▲' if sort_dir == 'asc' else '▼' }}{% endif %}</a></th>
      <th><a href="?sort_by=defense&sort_dir={% if sort_by == 'defense' and sort_dir == 'asc' %}desc{% else %}asc{% endif %}&filter_name={{ filter_name }}&filter_type={{ filter_type }}">Def {% if sort_by == 'defense' %}{{ '▲' if sort_dir == 'asc' else '▼' }}{% endif %}</a></th>
    </tr>
  </thead>
  <tbody>
    {% for card in cards %}
    <tr class="clickable-row" onclick="window.location.href='/set/{{ set_id }}/editor/{{ card.card_id }}'">
      <td><code>{{ card.card_id }}</code></td>
      <td><strong>{{ card.name }}</strong></td>
      <td>{% set ct = card.type.value if hasattr(card.type, 'value') else card.type|string %}{{ ct }}</td>
      <td>{{ card.mana|mana_badges }}</td>
      <td>{{ card.attack }}</td>
      <td>{{ card.defense }}</td>
    </tr>
    {% endfor %}
    {% if not cards %}
    <tr><td colspan="6" class="empty-state">No cards found.</td></tr>
    {% endif %}
  </tbody>
</table>

{% if filter_name or filter_type %}
<p class="filter-info">Showing {{ cards|length }} card(s) matching filters.</p>
{% endif %}
{% endblock %}