{% extends "base.html" %}
{% import "_macros.html" as ui %}
{% block title %}Local DNS · sagittarius{% endblock %}
{% block content %}
<hgroup>
  <h1 class="sgt-page-title">{% call ui::icon("local") %}{% endcall %}Local DNS records</h1>
  <p class="sgt-muted">Authoritative answers served without contacting upstreams. Wildcards like <code>*.home.lan</code> are supported.</p>
</hgroup>

{% if let Some(error) = error %}
<p class="sgt-notice sgt-notice--error" role="alert">{{ error }}</p>
{% endif %}

<form method="post" action="/local/add" class="sgt-actions">
  <input type="hidden" name="csrf_token" value="{{ chrome.csrf_token }}" />
  <input type="text" name="name" placeholder="router.home.lan" required aria-label="Name" />
  <select name="type" aria-label="Record type">
    <option value="A">A</option>
    <option value="AAAA">AAAA</option>
  </select>
  <input type="text" name="value" placeholder="192.168.1.1" required aria-label="Value" />
  <input type="number" name="ttl" value="300" min="0" max="2147483647" required aria-label="TTL" style="width: 7rem" />
  <button type="submit">{% call ui::icon("add") %}{% endcall %}Add</button>
</form>

{% if records.is_empty() %}
<p class="sgt-muted">No local records yet.</p>
{% else %}
<div class="sgt-table-wrap">
  <table>
    <thead>
      <tr><th>Name</th><th>Type</th><th>Value</th><th class="sgt-num">TTL</th><th></th></tr>
    </thead>
    <tbody>
      {% for r in records %}
      <tr>
        <td class="sgt-mono">{{ r.name }}</td>
        <td>{{ r.record_type }}</td>
        <td class="sgt-mono">{{ r.value }}</td>
        <td class="sgt-num">{{ r.ttl }}</td>
        <td class="sgt-num">
          <form method="post" action="/local/remove" class="sgt-inline-form">
            <input type="hidden" name="csrf_token" value="{{ chrome.csrf_token }}" />
            <input type="hidden" name="id" value="{{ r.id }}" />
            <button type="submit" class="secondary outline sgt-btn-sm">{% call ui::icon("remove") %}{% endcall %}Remove</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}
{% endblock %}