{# 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, zone_types,
   param_refs, card_types, technique_list, groupIds,
   templateMode, templateCardId, templateData, spawnCount, catalogIds,
   showConditionFields, conditionVariables, conditionNodes,
   conditionVarSpec, conditionVarReturnType, conditionVarOperators, conditionVarParamsSchema,
   enableCondition, disableCondition, addConditionLeaf, addConditionGroup,
   removeConditionNode, wrapInGroup, toggleGroupOperator,
   onConditionVariableChange, isConditionGroup, isConditionLeaf,
   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" x-show="abilityForm.ability_type !== 'static'">
          <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 x-show="abilityForm.ability_type !== 'static'">
        <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>
      </fieldset>

      <div class="form-group" style="margin-top:8px" x-show="abilityForm.ability_type !== 'static'">
        <label class="checkbox-label">
          <input type="checkbox" x-model="alterationForm.trigger_self">
          Trigger only on self
        </label>
      </div>

      <div class="form-group" style="margin-top:4px" x-show="alterationForm.target === 'choose' || alterationForm.target === 'each'">
        <label class="checkbox-label">
          <input type="checkbox" x-model="alterationForm.exclude_self">
          Exclude this card from the effect
        </label>
      </div>

      {# ── Condition tree ── #}
      <fieldset x-show="showConditionFields">
        <legend>Condition</legend>

        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" :checked="alterationForm.condition !== null"
                   @change="alterationForm.condition !== null ? disableCondition() : enableCondition()">
            Has condition
          </label>
        </div>

        <div x-show="alterationForm.condition !== null" class="condition-tree">
          <div class="cond-group-box">
            <div class="cond-header">
              <span class="cond-label">Condition</span>
              <select x-model="alterationForm.condition.operator" @change="markDirty()" class="cond-op-select">
                <option value="and">AND</option>
                <option value="or">OR</option>
              </select>
            </div>

            <div class="cond-children">
              <template x-for="(node, i) in conditionNodes" :key="i">
                <div class="cond-node">
                  {# ── Group row: [i] ── #}
                  <template x-if="isConditionGroup(node)">
                    <div class="cond-group-box cond-nested">
                      <div class="cond-header">
                        <span class="cond-label">Group</span>
                        <select x-model="node.operator" @change="markDirty()" class="cond-op-select">
                          <option value="and">AND</option>
                          <option value="or">OR</option>
                        </select>
                        <button type="button" class="btn btn-xs" @click="addConditionLeaf([i])" title="Add leaf">+</button>
                        <button type="button" class="btn btn-xs" @click="addConditionGroup([i])" title="Add group">+G</button>
                        <button type="button" class="btn btn-xs btn-danger" @click="removeConditionNode([i])" title="Remove">&times;</button>
                      </div>
                      <div class="cond-children">
                        <template x-for="(sub, j) in node.conditions" :key="j">
                          <div class="cond-node">
                            {# ── Sub group: [i, j] ── #}
                            <template x-if="isConditionGroup(sub)">
                              <div class="cond-group-box cond-deeper">
                                <div class="cond-header">
                                  <select x-model="sub.operator" @change="markDirty()" class="cond-op-select">
                                    <option value="and">AND</option>
                                    <option value="or">OR</option>
                                  </select>
                                  <button type="button" class="btn btn-xs" @click="addConditionLeaf([i, j])">+</button>
                                  <button type="button" class="btn btn-xs" @click="addConditionGroup([i, j])">+G</button>
                                  <button type="button" class="btn btn-xs btn-danger" @click="removeConditionNode([i, j])">&times;</button>
                                </div>
                                <div class="cond-children">
                                  <template x-for="(deep, k) in sub.conditions" :key="k">
                                    <div class="cond-leaf-row">
                                      <div class="cond-row-fields">
                                        <select :value="deep.variable" @change="onConditionVarSelect([i, j, k], $event)" class="cond-var-select">
                                          {% for vn, vs in condition_variables.items() %}
                                          <option value="{{ vn }}" title="{{ vs.description }}">{{ vn }}</option>
                                          {% endfor %}
                                        </select>
                                        <select x-model="deep.operator" @change="markDirty()" class="cond-op-select">
                                          <template x-for="op in conditionVarOperators(deep.variable)" :key="op">
                                            <option :value="op" x-text="op"></option>
                                          </template>
                                        </select>
                                        <template x-if="conditionVarReturnType(deep.variable) === 'bool'">
                                          <select :value="deep.value" @change="deep.value = $event.target.value === 'true'; markDirty()" class="cond-val-select">
                                            <option value="true">true</option>
                                            <option value="false">false</option>
                                          </select>
                                        </template>
                                        <template x-if="conditionVarReturnType(deep.variable) === 'int'">
                                          <input type="number" x-model.number="deep.value" @change="markDirty()" class="input-narrow">
                                        </template>
                                        <template x-if="conditionVarReturnType(deep.variable) === 'str'">
                                          <span>
                                            <select x-show="deep.variable === 'event_source_group'" x-model="deep.value" @change="markDirty()" class="cond-val-select">
                                              <option value="">(none)</option>
                                              <template x-for="g in groupIds" :key="g">
                                                <option :value="g" x-text="g"></option>
                                              </template>
                                            </select>
                                            <select x-show="deep.variable === 'event_source_card_id'" x-model="deep.value" @change="markDirty()" class="cond-val-select">
                                              <option value="">(none)</option>
                                              <template x-for="cid in catalogIds" :key="cid">
                                                <option :value="cid" x-text="cid"></option>
                                              </template>
                                            </select>
                                            <select x-show="deep.variable === 'event_source_type'" x-model="deep.value" @change="markDirty()" class="cond-val-select">
                                              <option value="">(any)</option>
                                              <template x-for="ct in cardTypes" :key="ct">
                                                <option :value="ct" x-text="ct"></option>
                                              </template>
                                            </select>
                                            <input x-show="deep.variable !== 'event_source_group' && deep.variable !== 'event_source_card_id' && deep.variable !== 'event_source_type'" type="text" x-model="deep.value" @change="markDirty()" class="input-narrow">
                                          </span>
                                        </template>
                                        <button type="button" class="btn btn-xs btn-danger" @click="removeConditionNode([i, j, k])">&times;</button>
                                      </div>
                                      {# Params for deep leaf #}
                                      <div class="cond-params" x-show="Object.keys(conditionVarParamsSchema(deep.variable)).length > 0">
                                        <template x-for="(pschema, pname) in conditionVarParamsSchema(deep.variable)" :key="pname">
                                          <div class="cond-param-field">
                                            <label x-text="pname + ':'"></label>
                                            <template x-if="pschema.type === 'str' && pname === 'zone' && pschema.description.includes('|')">
                                              <select x-model="deep.params[pname]" @change="markDirty()">
                                                <option value="battlefield">battlefield</option>
                                                <option value="hand">hand</option>
                                                <option value="deck">deck</option>
                                                <option value="graveyard">graveyard</option>
                                              </select>
                                            </template>
                                            <template x-if="pschema.type === 'str' && pname === 'zone_owner'">
                                              <select x-model="deep.params[pname]" @change="markDirty()">
                                                <option value="self">self</option>
                                                <option value="opponent">opponent</option>
                                                <option value="any">any</option>
                                              </select>
                                            </template>
                                            <template x-if="pschema.type === 'str' && pname === 'group'">
                                              <select x-model="deep.params[pname]" @change="markDirty()">
                                                <option value="">(none)</option>
                                                <template x-for="g in groupIds" :key="g">
                                                  <option :value="g" x-text="g"></option>
                                                </template>
                                              </select>
                                            </template>
                                            <template x-if="pschema.type === 'str' && pname === 'card_id'">
                                              <select x-model="deep.params[pname]" @change="markDirty()" class="cond-val-select">
                                                <option value="">(none)</option>
                                                <template x-for="cid in catalogIds" :key="cid">
                                                  <option :value="cid" x-text="cid"></option>
                                                </template>
                                              </select>
                                            </template>
                                            <template x-if="pschema.type === 'str' && pname === 'technique'">
                                              <select x-model="deep.params[pname]" @change="markDirty()">
                                                <option value="">(select)</option>
                                                <template x-for="t in techniqueList" :key="t">
                                                  <option :value="t" x-text="t"></option>
                                                </template>
                                              </select>
                                            </template>
                                          </div>
                                        </template>
                                      </div>
                                    </div>
                                  </template>
                                </div>
                              </div>
                            </template>

                            {# ── Sub leaf: [i, j] ── #}
                            <template x-if="isConditionLeaf(sub)">
                              <div class="cond-leaf-row">
                                <div class="cond-row-fields">
                                  <select :value="sub.variable" @change="onConditionVarSelect([i, j], $event)" class="cond-var-select">
                                    {% for vn, vs in condition_variables.items() %}
                                    <option value="{{ vn }}" title="{{ vs.description }}">{{ vn }}</option>
                                    {% endfor %}
                                  </select>
                                  <select x-model="sub.operator" @change="markDirty()" class="cond-op-select">
                                    <template x-for="op in conditionVarOperators(sub.variable)" :key="op">
                                      <option :value="op" x-text="op"></option>
                                    </template>
                                  </select>
                                  <template x-if="conditionVarReturnType(sub.variable) === 'bool'">
                                    <select :value="sub.value" @change="sub.value = $event.target.value === 'true'; markDirty()" class="cond-val-select">
                                      <option value="true">true</option>
                                      <option value="false">false</option>
                                    </select>
                                  </template>
                                  <template x-if="conditionVarReturnType(sub.variable) === 'int'">
                                    <input type="number" x-model.number="sub.value" @change="markDirty()" class="input-narrow">
                                  </template>
                                  <template x-if="conditionVarReturnType(sub.variable) === 'str'">
                                    <span>
                                      <select x-show="sub.variable === 'event_source_group'" x-model="sub.value" @change="markDirty()" class="cond-val-select">
                                        <option value="">(none)</option>
                                        <template x-for="g in groupIds" :key="g">
                                          <option :value="g" x-text="g"></option>
                                        </template>
                                      </select>
                                      <select x-show="sub.variable === 'event_source_card_id'" x-model="sub.value" @change="markDirty()" class="cond-val-select">
                                        <option value="">(none)</option>
                                        <template x-for="cid in catalogIds" :key="cid">
                                          <option :value="cid" x-text="cid"></option>
                                        </template>
                                      </select>
                                      <select x-show="sub.variable === 'event_source_type'" x-model="sub.value" @change="markDirty()" class="cond-val-select">
                                        <option value="">(any)</option>
                                        <template x-for="ct in cardTypes" :key="ct">
                                          <option :value="ct" x-text="ct"></option>
                                        </template>
                                      </select>
                                      <input x-show="sub.variable !== 'event_source_group' && sub.variable !== 'event_source_card_id' && sub.variable !== 'event_source_type'" type="text" x-model="sub.value" @change="markDirty()" class="input-narrow">
                                    </span>
                                  </template>
                                  <button type="button" class="btn btn-xs" @click="wrapInGroup([i, j])" title="Wrap in group">(G)</button>
                                  <button type="button" class="btn btn-xs btn-danger" @click="removeConditionNode([i, j])">&times;</button>
                                </div>
                                {# Params for sub leaf #}
                                <div class="cond-params" x-show="Object.keys(conditionVarParamsSchema(sub.variable)).length > 0">
                                  <template x-for="(pschema, pname) in conditionVarParamsSchema(sub.variable)" :key="pname">
                                    <div class="cond-param-field">
                                      <label x-text="pname + ':'"></label>
                                      <template x-if="pschema.type === 'str' && pname === 'zone'">
                                        <select x-model="sub.params[pname]" @change="markDirty()">
                                          <option value="battlefield">battlefield</option>
                                          <option value="hand">hand</option>
                                          <option value="deck">deck</option>
                                          <option value="graveyard">graveyard</option>
                                        </select>
                                      </template>
                                      <template x-if="pschema.type === 'str' && pname === 'zone_owner'">
                                        <select x-model="sub.params[pname]" @change="markDirty()">
                                          <option value="self">self</option>
                                          <option value="opponent">opponent</option>
                                          <option value="any">any</option>
                                        </select>
                                      </template>
                                      <template x-if="pschema.type === 'str' && pname === 'group'">
                                        <select x-model="sub.params[pname]" @change="markDirty()">
                                          <option value="">(none)</option>
                                          <template x-for="g in groupIds" :key="g">
                                            <option :value="g" x-text="g"></option>
                                          </template>
                                        </select>
                                      </template>
                                      <template x-if="pschema.type === 'str' && pname === 'card_id'">
                                        <select x-model="sub.params[pname]" @change="markDirty()" class="cond-val-select">
                                          <option value="">(none)</option>
                                          <template x-for="cid in catalogIds" :key="cid">
                                            <option :value="cid" x-text="cid"></option>
                                          </template>
                                        </select>
                                      </template>
                                      <template x-if="pschema.type === 'str' && pname === 'technique'">
                                        <select x-model="sub.params[pname]" @change="markDirty()">
                                          <option value="">(select)</option>
                                          <template x-for="t in techniqueList" :key="t">
                                            <option :value="t" x-text="t"></option>
                                          </template>
                                        </select>
                                      </template>
                                    </div>
                                  </template>
                                </div>
                              </div>
                            </template>
                          </div>
                        </template>
                      </div>
                    </div>
                  </template>

                  {# ── Leaf row: [i] ── #}
                  <template x-if="isConditionLeaf(node)">
                    <div class="cond-leaf-row">
                      <div class="cond-row-fields">
                        <select :value="node.variable" @change="onConditionVarSelect([i], $event)" class="cond-var-select">
                          {% for vn, vs in condition_variables.items() %}
                          <option value="{{ vn }}" title="{{ vs.description }}">{{ vn }}</option>
                          {% endfor %}
                        </select>
                        <select x-model="node.operator" @change="markDirty()" class="cond-op-select">
                          <template x-for="op in conditionVarOperators(node.variable)" :key="op">
                            <option :value="op" x-text="op"></option>
                          </template>
                        </select>
                        <template x-if="conditionVarReturnType(node.variable) === 'bool'">
                          <select :value="node.value" @change="node.value = $event.target.value === 'true'; markDirty()" class="cond-val-select">
                            <option value="true">true</option>
                            <option value="false">false</option>
                          </select>
                        </template>
                        <template x-if="conditionVarReturnType(node.variable) === 'int'">
                          <input type="number" x-model.number="node.value" @change="markDirty()" class="input-narrow">
                        </template>
                        <template x-if="conditionVarReturnType(node.variable) === 'str'">
                          <span>
                            <select x-show="node.variable === 'event_source_group'" x-model="node.value" @change="markDirty()" class="cond-val-select">
                              <option value="">(none)</option>
                              <template x-for="g in groupIds" :key="g">
                                <option :value="g" x-text="g"></option>
                              </template>
                            </select>
                              <select x-show="node.variable === 'event_source_card_id'" x-model="node.value" @change="markDirty()" class="cond-val-select">
                                <option value="">(none)</option>
                                <template x-for="cid in catalogIds" :key="cid">
                                  <option :value="cid" x-text="cid"></option>
                                </template>
                              </select>
                              <select x-show="node.variable === 'event_source_type'" x-model="node.value" @change="markDirty()" class="cond-val-select">
                                <option value="">(any)</option>
                                <template x-for="ct in cardTypes" :key="ct">
                                  <option :value="ct" x-text="ct"></option>
                                </template>
                              </select>
                              <input x-show="node.variable !== 'event_source_group' && node.variable !== 'event_source_card_id' && node.variable !== 'event_source_type'" type="text" x-model="node.value" @change="markDirty()" class="input-narrow">
                          </span>
                        </template>
                        <button type="button" class="btn btn-xs" @click="wrapInGroup([i])" title="Wrap in group">(G)</button>
                        <button type="button" class="btn btn-xs btn-danger" @click="removeConditionNode([i])">&times;</button>
                      </div>
                      {# Params for leaf #}
                      <div class="cond-params" x-show="Object.keys(conditionVarParamsSchema(node.variable)).length > 0">
                        <template x-for="(pschema, pname) in conditionVarParamsSchema(node.variable)" :key="pname">
                          <div class="cond-param-field">
                            <label x-text="pname + ':'"></label>
                            <template x-if="pschema.type === 'str' && pname === 'zone'">
                              <select x-model="node.params[pname]" @change="markDirty()">
                                <option value="battlefield">battlefield</option>
                                <option value="hand">hand</option>
                                <option value="deck">deck</option>
                                <option value="graveyard">graveyard</option>
                              </select>
                            </template>
                            <template x-if="pschema.type === 'str' && pname === 'zone_owner'">
                              <select x-model="node.params[pname]" @change="markDirty()">
                                <option value="self">self</option>
                                <option value="opponent">opponent</option>
                                <option value="any">any</option>
                              </select>
                            </template>
                            <template x-if="pschema.type === 'str' && pname === 'group'">
                              <select x-model="node.params[pname]" @change="markDirty()">
                                <option value="">(none)</option>
                                <template x-for="g in groupIds" :key="g">
                                  <option :value="g" x-text="g"></option>
                                </template>
                              </select>
                            </template>
                            <template x-if="pschema.type === 'str' && pname === 'card_id'">
                              <select x-model="node.params[pname]" @change="markDirty()" class="cond-val-select">
                                <option value="">(none)</option>
                                <template x-for="cid in catalogIds" :key="cid">
                                  <option :value="cid" x-text="cid"></option>
                                </template>
                              </select>
                            </template>
                            <template x-if="pschema.type === 'str' && pname === 'technique'">
                              <select x-model="node.params[pname]" @change="markDirty()">
                                <option value="">(select)</option>
                                <template x-for="t in techniqueList" :key="t">
                                  <option :value="t" x-text="t"></option>
                                </template>
                              </select>
                            </template>
                          </div>
                        </template>
                      </div>
                    </div>
                  </template>
                </div>
              </template>
            </div>

            <div class="cond-footer" x-show="alterationForm.condition !== null">
              <button type="button" class="btn btn-sm" @click="addConditionLeaf([])">+ Add Condition</button>
              <button type="button" class="btn btn-sm" @click="addConditionGroup([])">+ Add Group</button>
            </div>
          </div>

        </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>

      {# ── Target Condition (shown when target is "choose" or "each") ── #}
      <fieldset x-show="showTargetConditionFields">
        <legend>Target Condition</legend>
        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" :checked="alterationForm.target_condition !== null"
                   @change="alterationForm.target_condition !== null ? disableTargetCondition() : enableTargetCondition()">
            Has target condition
          </label>
        </div>
        <div x-show="alterationForm.target_condition !== null" class="condition-tree">
          <div class="cond-group-box">
            <div class="cond-header">
              <span class="cond-label">Condition</span>
              <select x-model="alterationForm.target_condition.operator" @change="markDirty()" class="cond-op-select">
                <option value="and">AND</option>
                <option value="or">OR</option>
              </select>
              <button type="button" class="btn btn-xs" @click="addTargetConditionLeaf([])" title="Add leaf">+</button>
              <button type="button" class="btn btn-xs btn-danger" @click="disableTargetCondition()" title="Remove condition">&times;</button>
            </div>
            <div class="cond-children">
              <template x-for="(node, i) in targetConditionNodes" :key="i">
                <div class="cond-leaf-row">
                  <div class="cond-row-fields">
                    <select :value="node.variable" @change="onTargetConditionVarSelect([i], $event)" class="cond-var-select">
                      {% for vn, vs in condition_variables.items() %}
                      <option value="{{ vn }}" title="{{ vs.description }}">{{ vn }}</option>
                      {% endfor %}
                    </select>
                    <select x-model="node.operator" @change="markDirty()" class="cond-op-select">
                      <template x-for="op in conditionVarOperators(node.variable)" :key="op">
                        <option :value="op" x-text="op"></option>
                      </template>
                    </select>
                    <template x-if="conditionVarReturnType(node.variable) === 'bool'">
                      <select :value="node.value" @change="node.value = $event.target.value === 'true'; markDirty()" class="cond-val-select">
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </template>
                    <template x-if="conditionVarReturnType(node.variable) === 'int'">
                      <input type="number" x-model.number="node.value" @change="markDirty()" class="input-narrow">
                    </template>
                    <template x-if="conditionVarReturnType(node.variable) === 'str'">
                      <span>
                        <select x-show="node.variable === 'event_source_group'" x-model="node.value" @change="markDirty()" class="cond-val-select">
                          <option value="">(none)</option>
                          <template x-for="g in groupIds" :key="g">
                            <option :value="g" x-text="g"></option>
                          </template>
                        </select>
                        <select x-show="node.variable === 'event_source_card_id'" x-model="node.value" @change="markDirty()" class="cond-val-select">
                          <option value="">(none)</option>
                          <template x-for="cid in catalogIds" :key="cid">
                            <option :value="cid" x-text="cid"></option>
                          </template>
                        </select>
                        <select x-show="node.variable === 'event_source_type'" x-model="node.value" @change="markDirty()" class="cond-val-select">
                          <option value="">(any)</option>
                          <template x-for="ct in cardTypes" :key="ct">
                            <option :value="ct" x-text="ct"></option>
                          </template>
                        </select>
                        <input x-show="node.variable !== 'event_source_group' && node.variable !== 'event_source_card_id' && node.variable !== 'event_source_type'" type="text" x-model="node.value" @change="markDirty()" class="input-narrow">
                      </span>
                    </template>
                    <button type="button" class="btn btn-xs btn-danger" @click="removeTargetConditionNode([i])">&times;</button>
                  </div>
                  <div class="cond-params" x-show="Object.keys(conditionVarParamsSchema(node.variable)).length > 0">
                    <template x-for="(pschema, pname) in conditionVarParamsSchema(node.variable)" :key="pname">
                      <div class="cond-param-field">
                        <label x-text="pname + ':'"></label>
                        <template x-if="pschema.type === 'str' && pname === 'zone' && pschema.description.includes('|')">
                          <select x-model="node.params[pname]" @change="markDirty()">
                            <option value="battlefield">battlefield</option>
                            <option value="hand">hand</option>
                            <option value="deck">deck</option>
                            <option value="graveyard">graveyard</option>
                          </select>
                        </template>
                        <template x-if="pschema.type === 'str' && pname === 'zone_owner'">
                          <select x-model="node.params[pname]" @change="markDirty()">
                            <option value="self">self</option>
                            <option value="opponent">opponent</option>
                            <option value="any">any</option>
                          </select>
                        </template>
                        <template x-if="pschema.type === 'str' && pname === 'group'">
                          <select x-model="node.params[pname]" @change="markDirty()">
                            <option value="">(none)</option>
                            <template x-for="g in groupIds" :key="g">
                              <option :value="g" x-text="g"></option>
                            </template>
                          </select>
                        </template>
                        <template x-if="pschema.type === 'str' && pname === 'card_id'">
                          <select x-model="node.params[pname]" @change="markDirty()" class="cond-val-select">
                            <option value="">(none)</option>
                            <template x-for="cid in catalogIds" :key="cid">
                              <option :value="cid" x-text="cid"></option>
                            </template>
                          </select>
                        </template>
                        <template x-if="pschema.type === 'str' && pname === 'technique'">
                          <select x-model="node.params[pname]" @change="markDirty()">
                            <option value="">(select)</option>
                            <template x-for="t in techniqueList" :key="t">
                              <option :value="t" x-text="t"></option>
                            </template>
                          </select>
                        </template>
                        <template x-if="pschema.type === 'int'">
                          <input type="number" x-model.number="node.params[pname]" @change="markDirty()" class="input-narrow">
                        </template>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </fieldset>

      {# Dynamic params #}
      <div class="params-section" x-show="currentEffectParams && Object.keys(currentEffectParams).length > 0 && alterationForm.effect !== 'spawn_creature' && alterationForm.effect !== 'spawn_artifact'">
        <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])">
                <input type="text" :value="alterationForm.params[pname]"
                       :list="'param-refs-' + pname"
                       @input="onParamRefInput(pname, $event)"
                       placeholder="$self_attack..."
                       class="input-var"
                       x-show="isParamRef(alterationForm.params[pname])">
                <button type="button" class="btn btn-xs"
                        @click="alterationForm.params[pname] = isParamRef(alterationForm.params[pname]) ? 0 : '$'"
                        :title="isParamRef(alterationForm.params[pname]) ? 'Switch to number' : 'Switch to \$variable'"
                        x-text="isParamRef(alterationForm.params[pname]) ? '#' : '\$'"></button>
                <datalist :id="'param-refs-' + pname">
                  <template x-for="vname in typedParamRefs(pname)" :key="vname">
                    <option :value="'$' + vname" x-text="'$' + vname"></option>
                  </template>
                </datalist>
              </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"
                       x-show="!isParamRef(alterationForm.params[pname]) && alterationForm.params[pname] !== null && alterationForm.params[pname] !== undefined">
                <input type="text" :value="alterationForm.params[pname]"
                       :list="'param-refs-on-' + pname"
                       @input="onParamRefInput(pname, $event)"
                       placeholder="$creatures_in_bf..."
                       class="input-var"
                       x-show="isParamRef(alterationForm.params[pname])">
                <button type="button" class="btn btn-xs"
                        @click="alterationForm.params[pname] = isParamRef(alterationForm.params[pname]) ? 0 : '$'"
                        :title="isParamRef(alterationForm.params[pname]) ? 'Switch to number' : 'Switch to \$variable'"
                        x-text="isParamRef(alterationForm.params[pname]) ? '#' : '\$'"
                        :disabled="alterationForm.params[pname] === null || alterationForm.params[pname] === undefined"></button>
                <datalist :id="'param-refs-on-' + pname">
                  <template x-for="vname in typedParamRefs(pname)" :key="vname">
                    <option :value="'$' + vname" x-text="'$' + vname"></option>
                  </template>
                </datalist>
              </div>
            </template>

            <template x-if="pspec.type === 'str'">
              <span>
                <input type="text" x-model="alterationForm.params[pname]"
                       :list="'param-refs-str-' + pname"
                       placeholder="value or $variable"
                       class="input-var">
                <datalist :id="'param-refs-str-' + pname">
                  <template x-for="vname in typedParamRefs(pname)" :key="vname">
                    <option :value="'$' + vname" x-text="'$' + vname"></option>
                  </template>
                </datalist>
              </span>
            </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"
                           x-show="!isParamRef(alterationForm.params[pname][mt])">
                    <input type="text" :value="alterationForm.params[pname][mt]"
                           :list="'param-refs-' + pname + '-' + mt"
                           @input="onParamRefSubInput(pname, mt, $event)"
                           placeholder="$self_attack..."
                           class="input-var"
                           x-show="isParamRef(alterationForm.params[pname][mt])">
                    <button type="button" class="btn btn-xs"
                            @click="alterationForm.params[pname][mt] = isParamRef(alterationForm.params[pname][mt]) ? 0 : '$'"
                            :title="isParamRef(alterationForm.params[pname][mt]) ? 'Switch to number' : 'Switch to \$variable'"
                            x-text="isParamRef(alterationForm.params[pname][mt]) ? '#' : '\$'"></button>
                    <datalist :id="'param-refs-' + pname + '-' + mt">
                      <template x-for="vname in typedParamRefs(pname)" :key="vname">
                        <option :value="'$' + vname" x-text="'$' + vname"></option>
                      </template>
                    </datalist>
                  </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>

            <template x-if="pspec.type === 'mana_options'">
              <div class="mana-options-editor">
                <template x-for="(option, idx) in alterationForm.params[pname]" :key="idx">
                  <div class="mana-option-row">
                    <span class="mana-option-label" x-text="'Option ' + (idx + 1)"></span>
                    <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][idx][mt]"
                                 min="0" max="99" class="input-narrow"
                                 x-show="!isParamRef(alterationForm.params[pname][idx][mt])">
                          <input type="text" :value="alterationForm.params[pname][idx][mt]"
                                 :list="'param-refs-' + pname + '-' + idx + '-' + mt"
                                 @input="onManaOptionInput(pname, idx, mt, $event)"
                                 placeholder="$self_attack..."
                                 class="input-var"
                                 x-show="isParamRef(alterationForm.params[pname][idx][mt])">
                          <button type="button" class="btn btn-xs"
                                  @click="alterationForm.params[pname][idx][mt] = isParamRef(alterationForm.params[pname][idx][mt]) ? 0 : '$'"
                                  :title="isParamRef(alterationForm.params[pname][idx][mt]) ? 'Switch to number' : 'Switch to \$variable'"
                                  x-text="isParamRef(alterationForm.params[pname][idx][mt]) ? '#' : '\$'"></button>
                          <datalist :id="'param-refs-' + pname + '-' + idx + '-' + mt">
                            <template x-for="vname in typedParamRefs(pname)" :key="vname">
                              <option :value="'$' + vname" x-text="'$' + vname"></option>
                            </template>
                          </datalist>
                        </div>
                      </template>
                    </div>
                    <button type="button" class="btn btn-xs btn-danger"
                            @click="alterationForm.params[pname].splice(idx, 1); markDirty()">&times;</button>
                  </div>
                </template>
                <button type="button" class="btn btn-sm" style="margin-top:4px"
                        @click="alterationForm.params[pname].push({fire:0, earth:0, water:0, air:0, any:0}); markDirty()">
                  + Add option
                </button>
              </div>
            </template>
          </div>
        </template>
      </div>

      {# Template wizard for spawn_creature / spawn_artifact #}
      <div class="template-wizard" x-show="alterationForm.effect === 'spawn_creature' || alterationForm.effect === 'spawn_artifact'">
        <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">
          <div class="int-or-ref">
            <select x-model="templateCardId" x-show="!isParamRef(templateCardId)">
              <option value="">Select card...</option>
              <template x-for="cid in catalogIds" :key="cid">
                <option :value="cid" x-text="cid"></option>
              </template>
            </select>
            <input type="text" :value="templateCardId"
                   :list="'param-refs-template-card'"
                   @input="templateCardId = $event.target.value; markDirty()"
                   placeholder="$event_source_card_id..."
                   class="input-var"
                   x-show="isParamRef(templateCardId)">
            <button type="button" class="btn btn-xs"
                    @click="templateCardId = isParamRef(templateCardId) ? '' : '$'"
                    :title="isParamRef(templateCardId) ? 'Switch to card select' : 'Switch to \$variable'"
                    x-text="isParamRef(templateCardId) ? '#' : '\$'"></button>
            <datalist :id="'param-refs-template-card'">
              <template x-for="vname in typedParamRefs('template_card_id')" :key="vname">
                <option :value="'$' + vname" x-text="'$' + vname"></option>
              </template>
            </datalist>
          </div>
        </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>
          <div class="int-or-ref">
            <input type="number" x-model.number="alterationForm.params.count" min="0" max="99" class="input-narrow"
                   x-show="!isParamRef(alterationForm.params.count)">
            <input type="text" :value="alterationForm.params.count"
                   :list="'param-refs-spawn-count'"
                   @input="onParamRefInput('count', $event)"
                   placeholder="$creatures_in_bf..."
                   class="input-var"
                   x-show="isParamRef(alterationForm.params.count)">
            <button type="button" class="btn btn-xs"
                    @click="alterationForm.params.count = isParamRef(alterationForm.params.count) ? 0 : '$'"
                    :title="isParamRef(alterationForm.params.count) ? 'Switch to number' : 'Switch to \$variable'"
                    x-text="isParamRef(alterationForm.params.count) ? '#' : '\$'"></button>
            <datalist :id="'param-refs-spawn-count'">
              <template x-for="vname in typedParamRefs('count')" :key="vname">
                <option :value="'$' + vname" x-text="'$' + vname"></option>
              </template>
            </datalist>
          </div>
        </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>