{% extends "base.html" %}
{% block content %}
<div class="row between">
  <h1>Hosts</h1>

  <div class="actions">

    <div class="add-host-group">
      <a class="add-host-logo-link" href="https://outsidethebox.top/" target="_blank" rel="noopener">
        <img src="{{ url_for('static', filename='ufo-box.png') }}" class="add-host-logo" alt="outsidethebox.top">
      </a>

      <a class="btn" href="{{ url_for('host_new') }}">+ Add Host</a>

      <form class="inline" action="{{ url_for('backup_db') }}" method="post" onsubmit="return confirm('Create a DB backup now?');">
        <button class="btn" type="submit">Backup DB</button>
      </form>

      <a class="btn" href="{{ url_for('hosts_export') }}">Export CSV</a>
    </div>

  </div>
</div>

<div class="legend">
  <span class="dot dot-blank"></span> not configured
  <span class="dot dot-green"></span> online
  <span class="dot dot-red"></span> offline / error
  <span class="dot dot-yellow"></span> SSL expiring ≤ 30d
  <span class="dot dot-orange"></span> host expiring ≤ 30d
</div>

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th>Hostname</th>
      <th>Client</th>
      <th>Email</th>
      <th>Country</th>
      <th>SSL Exp</th>
      <th>Host Exp</th>
      <th>Package</th>
      <th>DNS</th>
      <th>Public IP</th>
      <th>Private IP</th>
      <th>PVE</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
  {% for r in rows %}
    <tr class="{% if not r.sub %}apex-row{% endif %}">
      <td><span class="dot {{ r.dot }}"></span></td>
      <td class="mono">
        {{ r.fqdn }}
        {% if r.sub %}
          <div class="subtle">sub: {{ r.sub }}</div>
        {% else %}
          <div class="subtle">apex</div>
        {% endif %}
      </td>
      <td>{{ r.client_name or "" }}</td>
      <td class="mono">{{ r.email or "" }}</td>
      <td>{{ r.country or "" }}</td>
      <td class="mono">{{ r.ssl_expires_str }}</td>
      <td class="mono">{{ r.host_expires_str }}</td>
      <td>{{ r.package_type or "" }}</td>
      <td>{{ r.dns_provider or "" }}</td>
      <td class="mono">{{ r.public_ip or "" }}</td>
      <td class="mono">{{ r.private_ip or "" }}</td>
      <td class="mono">{{ r.pve_host or "" }}</td>
      <td class="right">
        <button class="btn small ghost" type="button" data-toggle="details-{{ r.id }}">Details</button>
        <a class="btn small" href="{{ url_for('host_edit', hid=r.id) }}">Edit</a>
      </td>
    </tr>
    <tr id="details-{{ r.id }}" class="details-row hidden">
      <td></td>
      <td colspan="11">
        <div class="details">
          <div><strong>HTTP:</strong> {{ r.status_code_http if r.status_code_http is not none else "" }}</div>
          <div><strong>HTTPS:</strong> {{ r.status_code_https if r.status_code_https is not none else "" }}</div>
          <div><strong>Last check:</strong> {{ r.last_check_str }}</div>
          {% if r.last_error %}
            <div><strong>Last error:</strong> <span class="mono">{{ r.last_error }}</span></div>
          {% endif %}
          {% if r.notes %}
            <div><strong>Notes:</strong> {{ r.notes }}</div>
          {% endif %}
        </div>
      </td>
      <td></td>
    </tr>
  {% endfor %}
  </tbody>
</table>

{% if not rows %}
  <div class="empty">No hosts yet. Click “Add Host” to start.</div>
{% endif %}

<script>
document.querySelectorAll('[data-toggle]').forEach(btn => {
  btn.addEventListener('click', () => {
    const id = btn.getAttribute('data-toggle');
    const row = document.getElementById(id);
    if (!row) return;
    row.classList.toggle('hidden');
  });
});
</script>
{% endblock %}