{# Run form for a single playbook — loaded via HTMX from /ansible/run-form/… #}
<div style="background:var(--bg-elevated);border-radius:6px;padding:1rem;border:1px solid var(--border-mid);">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;">
    <h4 class="section-title" style="margin-bottom:0;">Run <span style="font-family:ui-monospace,monospace;font-weight:normal;">{{ playbook_path }}</span></h4>
    <a href="#" onclick="this.closest('div[id^=run-form-]').innerHTML='';return false;"
       class="btn btn-ghost btn-sm">Cancel</a>
  </div>
  <form hx-post="/ansible/runs" hx-target="next .run-result" hx-swap="innerHTML">
    <input type="hidden" name="source_name" value="{{ source_name }}">
    <input type="hidden" name="playbook_path" value="{{ playbook_path }}">

    <div class="form-group">
      <label>Run against</label>
      <select name="inventory_scope">
        {% if targets %}
        <option value="steward:all">All targets ({{ targets | length }})</option>
        {% if groups %}
        <optgroup label="Group">
          {% for grp in groups %}<option value="steward:group:{{ grp.id }}">Group: {{ grp.name }}</option>{% endfor %}
        </optgroup>
        {% endif %}
        <optgroup label="Single target">
          {% for tgt in targets %}<option value="steward:target:{{ tgt.id }}">{{ tgt.name }}</option>{% endfor %}
        </optgroup>
        {% endif %}
        {% if inventories %}
        <optgroup label="Repo inventory file">
          {% for inv in inventories %}<option value="repo:{{ source_name }}:{{ inv }}">{{ source_name }}/{{ inv }}</option>{% endfor %}
        </optgroup>
        {% endif %}
        {% if not targets and not inventories %}
        <option value="" disabled>No targets or inventory files — add targets at /ansible/inventory/targets</option>
        {% endif %}
      </select>
    </div>

    {% if variables %}
    <div style="margin:0.5rem 0 0.25rem;font-size:0.82rem;color:var(--text-muted);font-weight:600;">
      Playbook variables
    </div>
    <p style="color:var(--text-dim);font-size:0.76rem;margin:0 0 0.6rem;">
      Leave a field blank to use the playbook/inventory default. Secret fields are
      never stored.
    </p>
    {% for v in variables %}
    <div class="form-group">
      <label>
        {{ v.prompt or v.name }}
        <span style="color:var(--text-muted);font-weight:normal;font-size:0.76rem;">
          ({{ v.name }}{% if v.required %}, required{% endif %}{% if v.secret %}, secret{% endif %})
        </span>
      </label>
      {% if v.secret %}<input type="hidden" name="secret__{{ v.name }}" value="1">{% endif %}
      <input type="{{ 'password' if v.secret else 'text' }}"
             name="var__{{ v.name }}"
             {% if v.required %}required{% endif %}
             {% if v.secret %}autocomplete="new-password"{% endif %}
             placeholder="{% if v.secret %}(hidden){% elif v.default not in (None, '') %}default: {{ v.default }}{% else %}no default{% endif %}"
             style="width:100%;font-family:ui-monospace,monospace;font-size:0.85rem;">
    </div>
    {% endfor %}
    {% else %}
    <p style="color:var(--text-dim);font-size:0.8rem;margin:0.25rem 0 0.6rem;">
      No declared variables found in this playbook.
    </p>
    {% endif %}

    <details style="margin:0.25rem 0 0.75rem;">
      <summary style="cursor:pointer;font-size:0.82rem;color:var(--text-muted);">Advanced</summary>
      <div class="form-group" style="margin-top:0.6rem;">
        <label>Extra vars <span style="color:var(--text-muted);font-weight:normal;">(one key=value per line)</span></label>
        <textarea name="extra_vars" rows="2" placeholder="custom_var=value"
                  style="width:100%;font-family:ui-monospace,monospace;font-size:0.85rem;"></textarea>
      </div>
      <div class="form-group">
        <label>Limit to host(s) <span style="color:var(--text-muted);font-weight:normal;">(--limit)</span></label>
        <input type="text" name="limit" placeholder="web01,db*">
      </div>
      <div class="form-group">
        <label>Tags <span style="color:var(--text-muted);font-weight:normal;">(--tags)</span></label>
        <input type="text" name="tags" placeholder="deploy,config">
      </div>
      <div class="form-group">
        <label style="display:flex;align-items:center;gap:0.5rem;font-weight:normal;">
          <input type="checkbox" name="check">
          Dry-run (--check --diff) — preview changes without applying
        </label>
      </div>
    </details>

    <div style="display:flex;gap:0.75rem;align-items:center;">
      <button type="submit" class="btn">Execute</button>
    </div>
  </form>
  <div class="run-result" style="margin-top:1rem;"></div>
</div>