{% extends "base.html" %}
{% block title %}Deck Builder — {{ set_name }}{% endblock %}
{% block head %}
<script>
window.PTG_DECK = {
  set_id: {{ set_id|tojson }},
  manaTypes: {{ mana_types|tojson }},
};
</script>
<script src="/static/js/deck-builder.js"></script>
{% endblock %}
{% block content %}

<div x-data="deckBuilder()" x-init="init()" class="deck-layout">

  {# Left: Catalog #}
  <div class="deck-panel">
    <h3>Catalog</h3>
    <div class="form-group">
      <input type="text" x-model="catalogFilter" @input="filterCatalog()" placeholder="Search by name...">
    </div>
    <div class="deck-table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>Card ID</th>
            <th>Name</th>
            <th>Type</th>
            <th>Mana</th>
          </tr>
        </thead>
        <tbody>
          <template x-for="card in filteredCatalog" :key="card.card_id">
            <tr class="clickable-row" @dblclick="addToDeck(card.card_id)" @click="selectCatalogCard(card.card_id)">
              <td><code x-text="card.card_id"></code></td>
              <td x-text="card.name"></td>
              <td x-text="card.type"></td>
              <td x-html="manaBadges(card.mana)"></td>
            </tr>
          </template>
          <tr x-show="filteredCatalog.length === 0">
            <td colspan="4" class="empty-state">No cards match filter</td>
          </tr>
        </tbody>
      </table>
    </div>
    <button class="btn btn-primary" @click="addSelectedToDeck()" :disabled="!selectedCatalogCard">Add to Deck →</button>
  </div>

  {# Right: Deck #}
  <div class="deck-panel">
    <h3>Deck</h3>
    <div class="deck-table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>Qty</th>
            <th>Card ID</th>
            <th>Name</th>
            <th>Type</th>
            <th>Mana</th>
          </tr>
        </thead>
        <tbody>
          <template x-for="(qty, cardId) in deckSpec" :key="cardId">
            <tr class="clickable-row" @dblclick="removeFromDeck(cardId)" @click="selectedDeckRow = cardId">
              <td><span x-text="qty"></span></td>
              <td><code x-text="cardId"></code></td>
              <td x-text="getCardName(cardId)"></td>
              <td x-text="getCardType(cardId)"></td>
              <td x-html="manaBadges(getCardMana(cardId))"></td>
            </tr>
          </template>
          <tr x-show="deckSize === 0">
            <td colspan="5" class="empty-state">Deck is empty</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="form-row deck-controls">
      <div class="form-group">
        <label>Qty</label>
        <input type="number" x-model.number="editQty" min="1" max="99" class="input-narrow">
      </div>
      <button class="btn btn-sm" @click="setSelectedDeckQty()">Set Qty</button>
      <button class="btn btn-sm btn-danger" @click="removeSelectedFromDeck()">Remove</button>
    </div>

    <div class="deck-stats">
      <span>Total: <strong x-text="totalCards"></strong> cards</span>
    </div>

    {# Mana curve #}
    <div class="mana-curve-container">
      <h4>Mana Curve</h4>
      <canvas id="mana-curve-canvas" width="300" height="140"></canvas>
    </div>

    {# Deck selector #}
    <div class="form-row">
      <div class="form-group">
        <label>Deck</label>
        <select x-model="selectedDeck" @change="loadDeck()">
          <option value="">(select deck)</option>
          <template x-for="d in deckList" :key="d">
            <option :value="d" x-text="d"></option>
          </template>
        </select>
      </div>
      <button class="btn btn-sm" @click="loadDeck()">Load</button>
    </div>

    <div class="form-actions">
      <button class="btn" @click="newDeck()">New Deck</button>
      <button class="btn btn-primary" @click="saveDeck()" :disabled="saving">
        <span x-show="!saving">Save Deck</span>
        <span x-show="saving">Saving...</span>
      </button>
      <button class="btn btn-danger" @click="deleteDeck()" :disabled="!selectedDeck">Delete</button>
    </div>

    <span x-show="statusMsg" :class="'msg ' + statusType" x-text="statusMsg"></span>
  </div>
</div>
{% endblock %}