{% extends "base.html" %}
{% block title %}Group: {{ group.name }} — Steward{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
    <h1 class="page-title" style="margin-bottom:0;">Group: {{ group.name }}</h1>
    <a href="/ansible/inventory/groups" class="btn btn-ghost btn-sm">← Groups</a>
</div>

<form method="post" action="/ansible/inventory/groups/{{ group.id }}">
    <div class="card" style="margin-bottom:1.5rem;">
        <h3 class="section-title">Settings</h3>
        <div class="form-group">
            <label>Name</label>
            <input type="text" name="name" value="{{ group.name }}" required>
        </div>
        <div class="form-group">
            <label>
                Group Variables
                <span style="color:var(--text-muted);font-weight:normal;font-size:0.82rem;">
                    (YAML — applied to all members; per-target vars override these)
                </span>
            </label>
            <textarea name="ansible_vars" rows="8"
                      style="width:100%;font-family:ui-monospace,monospace;font-size:0.85rem;"
                      placeholder="ansible_user: deploy&#10;http_port: 80">{{ ansible_vars_yaml }}</textarea>
        </div>
    </div>

    <div class="card" style="margin-bottom:1.5rem;">
        <h3 class="section-title">Members</h3>
        {% if not all_targets %}
        <p style="color:var(--text-muted);font-size:0.9rem;">No targets exist yet.
            <a href="/ansible/inventory/targets">Add targets</a> first.</p>
        {% else %}
        <div style="display:grid;gap:0.4rem;margin-bottom:1rem;">
            {% for tgt in all_targets %}
            <label style="display:flex;align-items:center;gap:0.6rem;font-weight:normal;cursor:pointer;">
                <input type="checkbox" name="target_ids" value="{{ tgt.id }}"
                       {% if tgt.id in member_ids %}checked{% endif %}>
                <span>{{ tgt.name }}</span>
                <span style="color:var(--text-muted);font-size:0.82rem;">{{ tgt.address }}</span>
            </label>
            {% endfor %}
        </div>
        {% endif %}
    </div>

    <button type="submit" class="btn">Save Changes</button>
</form>
{% endblock %}