{% 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 }},
  techniqueList: {{ technique_list|tojson }},
  techniqueValues: {{ technique_values|tojson }},
  conditionVariables: {{ condition_variables|tojson }},
  catalogIds: {{ catalog_ids|tojson }},
  groupIds: {{ group_ids|tojson }},
};
</script>
<script src="/static/js/condition-tree.js"></script>
<script src="/static/js/ability-catalog.js"></script>
{% endblock %}
{% block content %}

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

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

  {# Edit ID modal #}
  <div class="modal-toast" x-show="showEditIdModal" @click.self="cancelEditId()" @keydown.escape="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>

  {% if abilities_dir %}
  <div class="catalog-path-info">Catalog: <code>{{ abilities_dir }}</code></div>
  {% endif %}
</div>
{% endblock %}