{# Shared Alteration Editor modal — used by ability_editor.html and alteration gallery #}
{# Requires parent Alpine context with: showAlterationModal, alterationForm,
   alterationModalTitle, saveAlteration(), cancelAlterationEdit(),
   onEffectChange(), onStartTriggerChange(), initParamsForEffect(),
   isParamRef(), onParamRefChange(), toggleOptionalInt(),
   currentEffectParams, manaTypes,
   effects, event_types, target_specs, trigger_owners, zone_types,
   param_refs, card_types, technique_list, groupIds,
   templateMode, templateCardId, templateData, spawnCount, catalogIds,
   markDirty, abilityForm (may be {ability_type: 'triggered'} in standalone context) #}

{# ── Alteration Modal ── #}
<div class="modal-overlay modal-overlay-top" x-show="showAlterationModal" @click.self="cancelAlterationEdit()">
  <div class="modal-content modal-lg" @click.stop="">
    <div class="modal-header">
      <h3 x-text="alterationModalTitle"></h3>
      <button type="button" class="modal-close" @click="cancelAlterationEdit()">&times;</button>
    </div>
    <div class="modal-body">
      {% if alteration_modal_extra == 'catalog' %}
      <div class="form-row">
        <div class="form-group" style="flex:1">
          <label>Name</label>
          <input type="text" x-model="alterationForm.name" placeholder="e.g. Deal 3 damage">
        </div>
      </div>
      <div class="form-group">
        <label>Description</label>
        <textarea x-model="alterationForm.description" rows="2"></textarea>
      </div>
      {% endif %}
      <div class="form-row">
        <div class="form-group" style="flex:2">
          <label>Effect</label>
          <select x-model="alterationForm.effect" @change="onEffectChange()">
            {% for ef in effects %}
            <option value="{{ ef }}">{{ ef }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group" style="flex:1">
          <label title="How many turns this alteration lasts. Leave at 0 for the default duration of the effect.">Turn Duration</label>
          <input type="number" x-model.number="alterationForm.turn_duration" min="0" max="99" class="input-narrow">
        </div>
        <div class="form-group" style="flex:1" x-show="alterationForm.start_trigger">
          <label title="How many turns to wait before applying the effect after the trigger fires.">Delay</label>
          <input type="number" x-model.number="alterationForm.delay" min="0" max="99" class="input-narrow">
        </div>
      </div>

      <fieldset>
        <legend>Trigger</legend>
        <div class="form-row">
          <div class="form-group" style="flex:1">
            <label title="Event that triggers this alteration.">Start</label>
            <select x-model="alterationForm.start_trigger" @change="onStartTriggerChange()">
              <option value="">(none)</option>
              {% for et in event_types %}
              <option value="{{ et }}">{{ et }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group" style="flex:1">
            <label title="Event that ends this alteration before its duration expires.">End</label>
            <select x-model="alterationForm.end_trigger">
              <option value="">(none)</option>
              {% for et in event_types %}
              <option value="{{ et }}">{{ et }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="form-row"
             x-show="alterationForm.start_trigger
                       && abilityForm.ability_type === 'triggered'
                       && !alterationForm.start_trigger.startsWith('on_turn_')">
          <div class="form-group" style="flex:1">
            <label title="Whose event fires the trigger: owner (of this card), opponent, or any.">Owner</label>
            <select x-model="alterationForm.trigger_owner">
              {% for to in trigger_owners %}
              <option value="{{ to }}">{{ to }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group" style="flex:1">
            <label title="Only fire when the event source card has this definition ID.">Card ID</label>
            <div style="position:relative">
              <input type="text" x-model="alterationForm.trigger_card_id"
                     placeholder="e.g. goblin_01"
                     :style="alterationForm.trigger_self && alterationForm.trigger_card_id ? 'padding-right:1.8em' : ''">
              <span x-show="alterationForm.trigger_self && alterationForm.trigger_card_id"
                    title="Use with trigger_self: false"
                    style="position:absolute; right:6px; top:50%; transform:translateY(-50%); cursor:help; user-select:none; font-size:0.85em">&#9888;&#65039;</span>
            </div>
          </div>
        </div>
        <div class="form-row"
             x-show="alterationForm.start_trigger
                       && abilityForm.ability_type === 'triggered'
                       && !alterationForm.start_trigger.startsWith('on_turn_')">
          <div class="form-group" style="flex:1">
            <label title="Only fire when a card with this definition ID is present in the required zone.">Require Card ID</label>
            <input type="text" x-model="alterationForm.require_card_id"
                   placeholder="e.g. goblin_king_01">
          </div>
          <div class="form-group" style="flex:1"
               title="Trigger only fires if a card with this group is present in the required zone.">
            <label>Require Group</label>
            <select x-model="alterationForm.require_group">
              <option value="">(none)</option>
              <template x-for="g in groupIds" :key="g">
                <option :value="g" x-text="g"></option>
              </template>
            </select>
          </div>
        </div>
        <div class="form-row"
             x-show="alterationForm.start_trigger
                       && abilityForm.ability_type === 'triggered'
                       && !alterationForm.start_trigger.startsWith('on_turn_')">
          <div class="form-group" style="flex:1">
            <label title="Only fire when the event source card is in this zone.">Require in Zone</label>
            <select x-model="alterationForm.require_in_zone">
              <option value="">(none)</option>
              {% for zt in zone_types %}
              <option value="{{ zt }}">{{ zt }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group" style="flex:1">
            <label title="Whose zone the require_in_zone condition applies to.">Zone Owner</label>
            <select x-model="alterationForm.require_zone_owner">
              {% for to in trigger_owners %}
              <option value="{{ to }}">{{ to }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group" style="flex:1">
            <label class="checkbox-label" title="If checked, the trigger only fires when the event originates from this card itself.">
              <input type="checkbox" x-model="alterationForm.trigger_self">
              Trigger only on self
            </label>
          </div>
        </div>
        <div class="form-group"
             x-show="alterationForm.start_trigger === 'on_delay_set' || alterationForm.start_trigger === 'on_delay_updated' || alterationForm.start_trigger === 'on_delay_expired'">
          <label title="Only fire when the delay counter has this many turns remaining.">Require remaining</label>
          <input type="number" x-model.number="alterationForm.require_remaining" min="0" max="99" class="input-narrow">
        </div>
      </fieldset>

      <fieldset>
        <legend>Target</legend>
        <div class="form-row">
          <div class="form-group" style="flex:1">
            <label title="Who receives the effect: self, owner, opponent, or choose (player selects a target).">Target</label>
            <select x-model="alterationForm.target">
              <option value="">(none)</option>
              {% for ts in target_specs %}
              <option value="{{ ts }}">{{ ts }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group" style="flex:1" title="Apply the effect to all cards of this group instead of a single target.">
            <label>Apply on Group</label>
            <select x-model="alterationForm.group">
              <option value="">(none)</option>
              <template x-for="g in groupIds" :key="g">
                <option :value="g" x-text="g"></option>
              </template>
            </select>
          </div>
        </div>
        <div class="form-group" x-show="alterationForm.group" title="Zone to search for group cards. Default: battlefield.">
          <label>Group from zone</label>
          <select x-model="alterationForm.from_zone">
            <option value="">battlefield</option>
            {% for zt in zone_types %}
            <option value="{{ zt }}">{{ zt }}</option>
            {% endfor %}
          </select>
        </div>
      </fieldset>

      {# Dynamic params #}
      <div class="params-section" x-show="currentEffectParams && Object.keys(currentEffectParams).length > 0 && alterationForm.effect !== 'spawn_creature'">
        <h5>Parameters</h5>
        <template x-for="(pspec, pname) in currentEffectParams" :key="pname">
          <div class="form-group">
            <label x-text="pname"></label>

            <template x-if="pspec.type === 'int'">
              <div class="int-or-ref">
                <input type="number" x-model.number="alterationForm.params[pname]" min="0" max="9999"
                       class="input-narrow" x-show="!isParamRef(alterationForm.params[pname])">
                <select x-model="alterationForm.params[pname]" @change="onParamRefChange(pname, $event)">
                  <option :value="0">(fixed)</option>
                  {% for pr in param_refs %}
                  <option value="{{ pr }}">{{ pr }}</option>
                  {% endfor %}
                </select>
              </div>
            </template>

            <template x-if="pspec.type === 'int_or_none'">
              <div class="optional-int">
                <label class="checkbox-label">
                  <input type="checkbox"
                         :checked="alterationForm.params[pname] !== null && alterationForm.params[pname] !== undefined"
                         @change="toggleOptionalInt(pname, $event)">
                  Set
                </label>
                <input type="number" x-model.number="alterationForm.params[pname]" min="0" max="99" class="input-narrow"
                       :disabled="alterationForm.params[pname] === null || alterationForm.params[pname] === undefined">
              </div>
            </template>

            <template x-if="pspec.type === 'str'">
              <input type="text" x-model="alterationForm.params[pname]">
            </template>

            <template x-if="pspec.type === 'zone'">
              <select x-model="alterationForm.params[pname]">
                {% for zt in zone_types %}
                <option value="{{ zt }}">{{ zt }}</option>
                {% endfor %}
              </select>
            </template>

            <template x-if="pspec.type === 'mana_requirement'">
              <div class="mana-grid">
                <template x-for="mt in manaTypes" :key="mt">
                  <div class="mana-row">
                    <span class="mana-color" :class="'mana-'+mt" x-text="mt[0].toUpperCase()"></span>
                    <input type="number" x-model.number="alterationForm.params[pname][mt]" min="0" max="99" class="input-narrow">
                  </div>
                </template>
              </div>
            </template>

            <template x-if="pspec.type === 'technique'">
              <select x-model="alterationForm.params[pname]">
                <option value="">(select)</option>
                {% for t in technique_list %}
                <option value="{{ t }}">{{ t }}</option>
                {% endfor %}
              </select>
            </template>
          </div>
        </template>
      </div>

      {# Template wizard for spawn_creature #}
      <div class="template-wizard" x-show="alterationForm.effect === 'spawn_creature'">
        <h5>Spawn Template</h5>
        <div class="form-group">
          <label class="radio-label">
            <input type="radio" x-model="templateMode" value="existing" @change="markDirty()">
            Use existing card
          </label>
          <label class="radio-label">
            <input type="radio" x-model="templateMode" value="inline" @change="markDirty()">
            Define inline
          </label>
        </div>
        <div x-show="templateMode === 'existing'" class="form-group">
          <select x-model="templateCardId">
            <option value="">Select card...</option>
            <template x-for="cid in catalogIds" :key="cid">
              <option :value="cid" x-text="cid"></option>
            </template>
          </select>
        </div>
        <div x-show="templateMode === 'inline'" class="inline-def">
          <div class="form-group"><label>card_id</label><input type="text" x-model="templateData.card_id"></div>
          <div class="form-group"><label>Name</label><input type="text" x-model="templateData.name"></div>
          <div class="form-group">
            <label>Type</label>
            <select x-model="templateData.type">
              {% for ct in card_types %}
              <option value="{{ ct }}">{{ ct }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-row">
            <div class="form-group"><label>Attack</label><input type="number" x-model.number="templateData.attack" min="0" max="99" class="input-narrow"></div>
            <div class="form-group"><label>Defense</label><input type="number" x-model.number="templateData.defense" min="0" max="99" class="input-narrow"></div>
          </div>
        </div>
        <div class="form-group">
          <label>Count</label>
          <input type="number" x-model.number="spawnCount" min="0" max="99" class="input-narrow">
        </div>
      </div>
    </div>
    <div class="modal-actions">
      {% if alteration_modal_extra == 'register' %}
      <button type="button" class="btn btn-success" @click="registerAlterationToCatalog()"
              x-show="!registeringToCatalog">Register in Catalog</button>
      <span x-show="registeringToCatalog" class="msg">Registering...</span>
      {% endif %}
      <button type="button" class="btn btn-primary" @click="saveAlteration()">OK</button>
      <button type="button" class="btn" @click="cancelAlterationEdit()">Cancel</button>
    </div>
  </div>
</div>