{% extends "base.html" %}
{% block title %}Target: {{ target.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;">Target: {{ target.name }}</h1>
    <a href="/ansible/inventory/targets" class="btn btn-ghost btn-sm">← Targets</a>
</div>

<form method="post" action="/ansible/inventory/targets/{{ target.id }}">
    <div class="card" style="margin-bottom:1.5rem;">
        <h3 class="section-title">Connection</h3>
        <div class="form-group">
            <label>Name <span style="color:var(--text-muted);font-weight:normal;font-size:0.82rem;">(Ansible hostname — used in plays as <code>hosts: name</code>)</span></label>
            <input type="text" name="name" value="{{ target.name }}" required>
        </div>
        <div class="form-group">
            <label>Address <span style="color:var(--text-muted);font-weight:normal;font-size:0.82rem;">(becomes <code>ansible_host</code> in inventory)</span></label>
            <input type="text" name="address" value="{{ target.address }}" required>
        </div>
        <div class="form-group">
            <label>
                Target Variables
                <span style="color:var(--text-muted);font-weight:normal;font-size:0.82rem;">
                    (YAML — override group vars for this target only)
                </span>
            </label>
            <textarea name="ansible_vars" rows="8"
                      style="width:100%;font-family:ui-monospace,monospace;font-size:0.85rem;"
                      placeholder="ansible_user: ubuntu&#10;ansible_port: 22">{{ ansible_vars_yaml }}</textarea>
        </div>
    </div>

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

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