{% extends "pobsync_backend/base.html" %}

{% block title %}{% if host %}Config | {{ host.host }}{% else %}New Host{% endif %}{% endblock %}

{% block content %}
  <header class="page-header">
    <div class="page-title">
      <div class="page-kicker">Configuration</div>
      <h1>{% if host %}Config: {{ host.host }}{% else %}New Host{% endif %}</h1>
      <div class="page-subtitle">Host-specific backup, retention, SSH, include, and exclude settings.</div>
    </div>
    <section class="actions" aria-label="Config actions">
      {% if host %}
        <a class="button-link" href="{% url 'host_detail' host.host %}">Back to host</a>
      {% else %}
        <a class="button-link" href="{% url 'dashboard' %}">Back to dashboard</a>
      {% endif %}
    </section>
  </header>

  <section class="panel">
    <h2>{% if host %}Edit Host Config{% else %}Create Host Config{% endif %}</h2>
    <form method="post" class="form-grid">
      {% csrf_token %}
      {{ form.non_field_errors }}

      {% for field in form %}
        <div class="field">
          {{ field.errors }}
          <label for="{{ field.id_for_label }}">{{ field.label }}</label>
          {{ field }}
          {% if field.help_text %}<div class="helptext">{{ field.help_text }}</div>{% endif %}
        </div>
      {% endfor %}

      <div class="form-actions">
        <button type="submit">{% if host %}Save config{% else %}Create host{% endif %}</button>
        {% if host %}
          <a class="button-link secondary" href="{% url 'host_detail' host.host %}">Cancel</a>
        {% else %}
          <a class="button-link secondary" href="{% url 'dashboard' %}">Cancel</a>
        {% endif %}
      </div>
    </form>
  </section>

  {% if config_checks %}
    <section class="panel">
      <h2>Effective Config Check</h2>
      <section class="grid" aria-label="Host config check summary">
        <div class="metric"><div class="label">OK</div><div class="value">{{ config_check_summary.ok }}</div></div>
        <div class="metric"><div class="label">Warnings</div><div class="value">{{ config_check_summary.warning }}</div></div>
        <div class="metric"><div class="label">Failed</div><div class="value">{{ config_check_summary.failed }}</div></div>
        <div class="metric"><div class="label">Skipped</div><div class="value">{{ config_check_summary.skipped }}</div></div>
      </section>
      <table>
        <thead>
          <tr>
            <th>Status</th>
            <th>Check</th>
            <th>Message</th>
            <th>Detail</th>
          </tr>
        </thead>
        <tbody>
          {% for check in config_checks %}
            <tr>
              <td><span class="status {{ check.status }}">{{ check.status }}</span></td>
              <td>{{ check.name }}</td>
              <td>{{ check.message }}</td>
              <td class="muted">{{ check.detail }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </section>
  {% endif %}
{% endblock %}