{% extends "base.html" %}
{% block content %}
<div class="page-actions">
  <a class="button primary" href="/routes?add=1"><i data-lucide="plus"></i>Add Route</a>
</div>

{% if show_add %}
<section class="card form-panel">
  <div class="panel-title"><h2>Add Route</h2><a href="/routes">Close</a></div>
  <form method="post" action="/routes" class="inline-form">
    <label><span>CIDR</span><input name="cidr" placeholder="192.168.10.0/24" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}/[0-9]{1,2}$" required></label>
    <button class="button primary" type="submit">Add Route</button>
  </form>
</section>
{% endif %}

<section class="card">
  {% if routes %}
  <table class="data-table">
    <thead><tr><th>CIDR</th><th>Interface</th><th>Added</th><th>Actions</th></tr></thead>
    <tbody>
      {% for route in routes %}
      <tr>
        <td><span class="dot green"></span><strong>{{ route.cidr }}</strong></td>
        <td>{{ route.interface }} {% if route.auto_detected %}<span class="lock">Auto-detected</span>{% endif %}</td>
        <td>{{ route.added }}</td>
        <td class="actions">
          {% if confirm_delete == route.id %}
            <form method="post" action="/routes/{{ route.id }}/delete" class="inline">
              <span class="confirm">{% if route.auto_detected %}Primary subnet. {% endif %}Are you sure?</span>
              <button class="button danger small" type="submit">Remove</button>
            </form>
          {% else %}
            <a class="button danger small" href="/routes?confirm_delete={{ route.id }}"><i data-lucide="trash-2"></i>Remove</a>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="empty-state text-only">
    <h2>No routes advertised.</h2>
    <p>Add a CIDR route to make a local subnet reachable through the edge.</p>
  </div>
  {% endif %}
</section>
{% endblock %}