{% extends "base.html" %}
{% block title %}Abilities Catalog{% endblock %}
{% block head %}
<script>
window.PTG = {
  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 }},
};
</script>
<script src="/static/js/ability-catalog.js"></script>
{% endblock %}
{% block content %}
{% set set_name = None %}
{% set card_count = 0 %}
{% set deck_list = [] %}

<div x-data="abilityCatalog()" x-init="init()">
  <div class="page-header">
    <h1>Abilities Catalog</h1>
    <button type="button" class="btn btn-primary" @click="addAbility()">+ Add Ability</button>
  </div>

  <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>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">
          <td @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 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. Click "+ Add Ability" to create one.
  </div>

  {% include "components/ability_editor.html" %}
</div>
{% endblock %}