{# Add-child picker for a container node.

   Context: name, parent_id, parent_type, slot, all_slots, candidate_tags.

   Simplified MVP: the operator picks a slot + a child type_tag, we
   insert a minimal node of that type (just type + id) and then the
   operator uses the per-node Edit button to fill in fields.
#}
<div class="logixng-node">
  <form class="card" style="border-color:var(--accent,#368)"
        hx-post="/logixng/{{ name }}/node/{{ parent_id }}/add-child"
        hx-target="#logixng-tree" hx-swap="outerHTML">
    <strong>Add child under</strong>
    <code class="mono">{{ parent_type }}</code>
    <code class="mono muted small">{{ parent_id }}</code>

    <label>Slot
      <select name="slot" required>
        {% for s in all_slots %}
        <option value="{{ s }}"{% if slot == s %} selected{% endif %}>{{ s }}</option>
        {% endfor %}
      </select>
    </label>

    <label>Child type
      <select name="child_type" required>
        {% for tag in candidate_tags %}
        <option value="{{ tag }}">{{ tag }}</option>
        {% endfor %}
      </select>
    </label>

    <p class="muted small">The new node is created with its type-default
      field values. Click <strong>Edit</strong> on the new node after
      adding to fill in bean names, states, messages, etc.</p>

    <div class="row" style="gap:0.5rem">
      <button type="submit">Add</button>
      <button type="button"
              hx-get="/logixng/{{ name }}/tree"
              hx-target="#logixng-tree"
              hx-swap="outerHTML">Cancel</button>
    </div>
  </form>
</div>