{% extends "base.html" %}
{% block content %}
<div class="page-head"><h1>Advertised Routes</h1><a class="button" href="/routes?add=1">Add Route</a></div>
{% if show_add %}
<section class="card form-panel">
  <form method="post" action="/routes">
    <label>CIDR</label>
    <input name="cidr" placeholder="192.168.10.0/24" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}/[0-9]{1,2}$" required>
    <button type="submit">Add</button>
  </form>
</section>
{% endif %}
<section class="card">
  <table>
    <tr><th>CIDR</th><th>Interface</th><th>Added</th><th>Auto-detected</th><th>Actions</th></tr>
    {% for route in routes %}
    <tr>
      <td>{{ route.cidr }}</td><td>{{ route.interface }}</td><td>{{ route.added }}</td><td>{% if route.auto_detected %}<span class="lock">Locked</span>{% else %}<span class="muted">No</span>{% endif %}</td>
      <td>
        {% if confirm_delete == route.id %}
          <form method="post" action="/routes/{{ route.id }}/delete" class="inline">
            <span class="confirm">{% if route.auto_detected %}This is your primary subnet. {% endif %}Are you sure?</span>
            <button class="danger small" type="submit">Remove</button>
          </form>
        {% else %}
          <a class="button small danger" href="/routes?confirm_delete={{ route.id }}">Remove</a>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </table>
</section>
{% endblock %}