{% extends "base.html" %}
{% block title %}Library{% endblock %}
{% block head %}
<script>
window.PTG_LIBRARY = {
  effects: {{ effects|tojson }},
  abilityTypes: {{ ability_types|tojson }},
  eventTypes: {{ event_types|tojson }},
  targetSpecs: {{ target_specs|tojson }},
  zoneTypes: {{ zone_types|tojson }},
  paramRefs: {{ param_refs|tojson }},
  effectParams: {{ effect_params|tojson }},
  manaTypes: {{ mana_types|tojson }},
  cardTypes: {{ card_types|tojson }},
  triggerOwners: {{ trigger_owners|tojson }},
  techniqueList: {{ technique_list|tojson }},
  techniqueValues: {{ technique_values|tojson }},
  conditionVariables: {{ condition_variables|tojson }},
  catalogIds: {{ catalog_ids|tojson }},
  groupIds: {{ group_ids|tojson }},
};
</script>
<script>window.PTG = window.PTG_LIBRARY;</script>
<script src="/static/js/condition-tree.js"></script>
<script src="/static/js/ability-catalog.js"></script>
<script src="/static/js/alteration-catalog.js"></script>
{% endblock %}
{% block content %}

<div x-data="{ activeTab: 'abilities' }">
  <div class="page-header">
    <h1>Library <span class="subtitle">{% if set_name %}— {{ set_name }}{% endif %}</span></h1>
  </div>
  <div class="library-tabs">
    <button class="tab-btn" :class="{ active: activeTab === 'abilities' }" @click="activeTab = 'abilities'">Abilities</button>
    <button class="tab-btn" :class="{ active: activeTab === 'alterations' }" @click="activeTab = 'alterations'">Alterations</button>
  </div>

  {# ── Abilities Tab ── #}
  <div x-data="abilityCatalog()" x-init="init()" x-show="activeTab === 'abilities'" x-cloak>
    <span x-show="statusMessage" :class="'msg ' + statusType" x-text="statusMessage"></span>

    <div class="browser-filters">
      <div class="form-group">
        <label>Filter by name</label>
        <input type="text" x-model="filterName" placeholder="Type to filter...">
      </div>
      <div class="form-group">
        <label>Filter by type</label>
        <select x-model="filterType">
          <option value="">All</option>
          <template x-for="at in abilityTypes" :key="at">
            <option :value="at" x-text="at"></option>
          </template>
        </select>
      </div>
    </div>

    <table class="data-table">
      <thead>
        <tr>
          <th class="col-id">Ability ID</th>
          <th>Name</th>
          <th>Type</th>
          <th>Alterations</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <template x-for="(ab, idx) in filteredAbilities" :key="ab.ability_id">
          <tr class="clickable-row" :title="ab.description">
            <td class="col-id" @click="editAbility(idx)"><code x-text="ab.ability_id"></code></td>
            <td @click="editAbility(idx)" x-text="ab.name"></td>
            <td @click="editAbility(idx)"><span class="ability-type-badge" x-text="ab.ability_type"></span></td>
            <td @click="editAbility(idx)" x-text="ab.alteration_count"></td>
            <td>
              <button type="button" class="btn btn-sm" @click.stop="editAbilityId(idx)">Edit ID</button>
              <button type="button" class="btn btn-sm btn-danger" @click.stop="deleteAbility(idx)">Delete</button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <div class="empty-state" x-show="abilities.length === 0">
      No abilities registered yet.
    </div>
    <div style="margin-top:8px">
      <button type="button" class="btn btn-primary" @click="addAbility()">+ Add Ability</button>
    </div>

    {% include "components/ability_editor.html" %}

    <div class="modal-toast" x-show="showEditIdModal" @click.self="cancelEditId()">
      <div class="modal-toast-box">
        <div class="modal-toast-msg">Rename ability ID</div>
        <input type="text" x-model="editIdValue" class="toast-input"
               @keydown.enter="confirmEditId()" @keydown.escape="cancelEditId()">
        <div class="modal-toast-btns">
          <button class="btn-ok" @click="confirmEditId()">OK</button>
          <button class="btn-cancel" @click="cancelEditId()">Cancel</button>
        </div>
      </div>
    </div>
  </div>

  {# ── Alterations Tab ── #}
  <div x-data="alterationCatalog()" x-init="init()" x-show="activeTab === 'alterations'" x-cloak>
    <span x-show="statusMessage" :class="'msg ' + statusType" x-text="statusMessage"></span>

    <div class="browser-filters">
      <div class="form-group">
        <label>Filter by name</label>
        <input type="text" x-model="filterName" placeholder="Type to filter...">
      </div>
      <div class="form-group">
        <label>Filter by effect</label>
        <select x-model="filterEffect">
          <option value="">All</option>
          <template x-for="ef in effects" :key="ef">
            <option :value="ef" x-text="ef"></option>
          </template>
        </select>
      </div>
    </div>

    <table class="data-table">
      <thead>
        <tr>
          <th class="col-id">Alteration ID</th>
          <th>Name</th>
          <th>Effect</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <template x-for="(alt, idx) in filteredAlterations" :key="alt.alteration_id">
          <tr class="clickable-row" :title="alt.description">
            <td class="col-id" @click="editAlteration(idx)"><code x-text="alt.alteration_id"></code></td>
            <td @click="editAlteration(idx)" x-text="alt.name"></td>
            <td @click="editAlteration(idx)" x-text="alt.effect"></td>
            <td>
              <button type="button" class="btn btn-sm" @click.stop="editAlterationId(idx)">Edit ID</button>
              <button type="button" class="btn btn-sm btn-danger" @click.stop="deleteAlteration(idx)">Delete</button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <div class="empty-state" x-show="alterations.length === 0">
      No alterations registered yet.
    </div>
    <div style="margin-top:8px">
      <button type="button" class="btn btn-primary" @click="addAlteration()">+ Add Alteration</button>
    </div>

    {% set alteration_modal_extra = 'catalog' %}
    {% include "components/alteration_editor.html" %}

    <div class="modal-toast" x-show="showEditIdModal" @click.self="cancelEditId()">
      <div class="modal-toast-box">
        <div class="modal-toast-msg">Rename alteration ID</div>
        <input type="text" x-model="editIdValue" class="toast-input"
               @keydown.enter="confirmEditId()" @keydown.escape="cancelEditId()">
        <div class="modal-toast-btns">
          <button class="btn-ok" @click="confirmEditId()">OK</button>
          <button class="btn-cancel" @click="cancelEditId()">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.library-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.tab-btn {
  padding: 6px 18px; border: 1px solid var(--border); border-radius: 6px 6px 0 0;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
  font-size: 0.9em; border-bottom: none;
}
.tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
[x-cloak] { display: none !important; }
</style>
{% endblock %}