{% extends "base.html" %}
{% block title %}Routes – Alpine 5G Router{% endblock %}
{% block content %}
<h2>Static routes (SQLite)</h2>
<p style="color: var(--text-muted); margin: 0 0 1rem;">Routes are stored in SQLite. Add below, then click Apply to run <code>ip route add</code> for each. Existing system routes are not removed.</p>

<div class="table-wrap">
  <table>
    <thead>
      <tr><th>Destination</th><th>Gateway</th><th>Dev</th><th>Metric</th><th>Enabled</th><th>Actions</th></tr>
    </thead>
    <tbody id="routesTable"></tbody>
  </table>
</div>

<div class="panel-form" style="margin-top: 1rem;">
  <h3 style="font-size: 0.9375rem; margin: 0 0 0.5rem;">Add route</h3>
  <div class="form-row">
    <input type="text" id="routeDest" placeholder="0.0.0.0/0" style="width: 120px;">
    <input type="text" id="routeGw" placeholder="gateway (optional)" style="width: 100px;">
    <input type="text" id="routeDev" placeholder="dev (e.g. eth1)" style="width: 80px;">
    <input type="number" id="routeMetric" placeholder="metric" style="width: 70px;">
    <button type="button" class="btn btn-primary" id="routeAddBtn">Add</button>
  </div>
</div>

<div class="actions" style="margin-top: 1rem;">
  <button type="button" class="btn btn-primary" id="routesApplyBtn">Apply to system</button>
  <button type="button" class="btn btn-secondary" id="routesRefreshLive">Refresh live view</button>
</div>
<div id="routesMsg" class="msg"></div>

<h3 style="font-size: 0.9375rem; margin: 1.5rem 0 0.5rem;">Current system routes (ip route show)</h3>
<div class="routes-list" id="routesLive"></div>
{% endblock %}