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

{% block title %}Hosts | pobsync{% endblock %}

{% block content %}
  <header class="page-header">
    <div class="page-title">
      <div class="page-kicker">Inventory</div>
      <h1>Hosts</h1>
      <div class="page-subtitle">Configured backup targets, schedules, retention state, and host-level controls.</div>
    </div>
    {% if can_manage_control_panel %}
      <section class="actions" aria-label="Host actions">
        <a class="button-link" href="{% url 'create_host_config' %}">New host</a>
      </section>
    {% endif %}
  </header>

  <section class="grid dashboard-summary-grid" aria-label="Host summary">
    <a class="metric metric-link" href="{% url 'hosts_list' %}"><div class="label">Showing</div><div class="value">{{ counts.hosts }}</div></a>
    <a class="metric metric-link" href="{% url 'hosts_list' %}?enabled=yes"><div class="label">Enabled</div><div class="value">{{ counts.enabled_hosts }}</div></a>
    <a class="metric metric-link" href="{% url 'hosts_list' %}?enabled=no"><div class="label">Disabled</div><div class="value">{{ counts.disabled_hosts }}</div></a>
    <a class="metric metric-link" href="{% url 'dashboard' %}"><div class="label">Total</div><div class="value">{{ total_count }}</div></a>
  </section>

  <section class="panel">
    <h2>Filters</h2>
    <form class="filter-form" method="get">
      <div class="field">
        <label for="enabled">Host state</label>
        <select id="enabled" name="enabled">
          <option value="" {% if selected_enabled == "" %}selected{% endif %}>All hosts</option>
          <option value="yes" {% if selected_enabled == "yes" %}selected{% endif %}>Enabled only</option>
          <option value="no" {% if selected_enabled == "no" %}selected{% endif %}>Disabled only</option>
        </select>
      </div>
      <div class="form-actions">
        <button type="submit">Apply filters</button>
        <a class="button-link secondary" href="{% url 'hosts_list' %}">Reset</a>
      </div>
    </form>
  </section>

  {% include "pobsync_backend/partials/dashboard_hosts.html" %}
{% endblock %}