{% extends "base.html" %}
{% from "_macros.html" import crumbs %}
{% block title %}{% if host %}Edit Host{% else %}New Host{% endif %} — Steward{% endblock %}
{% block breadcrumb %}{{ crumbs([("Hosts", "/hosts/"), (("Edit " ~ host.name) if host else "New host", "")]) }}{% endblock %}
{% block content %}
<div style="max-width:560px;margin:2rem auto;">
    <h1 class="page-title">{% if host %}Edit Host{% else %}Add Host{% endif %}</h1>
    <div class="card">
        <form method="post" action="{% if host %}/hosts/{{ host.id }}{% else %}/hosts/{% endif %}">
            <div class="form-group">
                <label>Display Name</label>
                <input type="text" name="name" value="{{ host.name if host else '' }}" required autofocus>
            </div>
            <div class="form-group">
                <label>Address (hostname or IP)</label>
                <input type="text" name="address" value="{{ host.address if host else '' }}" required>
            </div>
            <div style="display:flex;gap:1rem;margin-top:1.5rem;">
                <button type="submit" class="btn">{% if host %}Save{% else %}Add Host{% endif %}</button>
                <a href="{% if host %}/hosts/{{ host.id }}{% else %}/hosts/{% endif %}" class="btn btn-ghost">Cancel</a>
            </div>
        </form>
    </div>
    <p style="color:var(--text-muted);font-size:0.82rem;margin-top:1rem;text-align:center;">
        {% if host %}Monitors, agent, Ansible target, and playbook runs live on the
        <a href="/hosts/{{ host.id }}">host page</a>.{% else %}
        After adding, attach ping / DNS / HTTP monitors from the host page.{% endif %}
    </p>
</div>
{% endblock %}