{% macro ifc_fields(prefix, v) -%}
<td>
  <select name="{{ prefix }}.mode" data-mode-switch>
    {% for m, label in (('dhcp', 'DHCP'), ('static', 'статика'), ('manual', 'без адреса'), ('off', 'выключен')) %}
    <option value="{{ m }}" {{ 'selected' if v.mode == m }}>{{ label }}</option>
    {% endfor %}
    {% if prefix.startswith('if.') %}<option value="unset" {{ 'selected' if v.mode == 'unset' }}>не управлять</option>{% endif %}
  </select>
</td>
<td data-static><input name="{{ prefix }}.addresses" value="{{ (v.addresses or [])|join(', ') }}" placeholder="10.0.0.5/24"></td>
<td data-static><input name="{{ prefix }}.gateway" value="{{ v.gateway or '' }}" size="13"></td>
<td data-static><input name="{{ prefix }}.dns" value="{{ (v.dns or [])|join(', ') }}" size="13"></td>
<td><textarea name="{{ prefix }}.routes" rows="1" placeholder="10.20.0.0/16 via 10.0.0.1">{% for r in v.routes or [] %}{{ r.to }} via {{ r.via }}
{% endfor %}</textarea></td>
<td><input name="{{ prefix }}.mtu" value="{{ v.mtu or '' }}" size="5"></td>
{%- endmacro %}

<div id="network-form">
{% if pending %}
<div class="alert warn pending">
  <strong>Изменения сети применены и ждут подтверждения.</strong>
  Без подтверждения они будут откачены через <span data-countdown="{{ pending }}">{{ pending }}</span> с.
  <div class="actions">
    <button class="primary" hx-post="/network/confirm" hx-target="#network-form" hx-swap="outerHTML">Подтвердить</button>
    <button hx-post="/network/rollback" hx-target="#network-form" hx-swap="outerHTML">Откатить сейчас</button>
  </div>
</div>
{% endif %}
{% if errors %}
<div class="alert error"><ul>{% for e in errors %}<li>{{ e }}</li>{% endfor %}</ul></div>
{% endif %}

<section class="card">
  <h2>Текущее состояние</h2>
  <table class="table compact">
    <thead><tr><th>Интерфейс</th><th>Роль</th><th>Состояние</th><th>Адреса</th><th>MAC</th><th>MTU</th></tr></thead>
    <tbody>
    {% for name, s in state.items() %}
      <tr>
        <td>{{ name }}</td>
        <td>{% if name == model.mgmt %}<span class="badge st-running">mgmt</span>{% elif name in wireless %}<span class="badge">Wi-Fi AP</span>{% elif name in model.vlans %}VLAN{% endif %}</td>
        <td>{{ s.state }}</td><td>{{ s.addrs|join(', ') }}</td><td class="muted">{{ s.mac }}</td><td>{{ s.mtu }}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  <p class="muted small">
    {% if model.mgmt %}Интерфейс управления <b>{{ model.mgmt }}</b> и точка доступа Wi-Fi настраиваются только в консольной утилите <code>sudo nuc-cockpit-setup</code>.
    {% else %}Интерфейс управления не выделен (доступ через Wi-Fi). Точка доступа настраивается в <code>sudo nuc-cockpit-setup</code>.{% endif %}
  </p>
</section>

<form class="card" hx-post="/network/apply" hx-target="#network-form" hx-swap="outerHTML"
      hx-confirm="Применить сетевые настройки? Без подтверждения они откатятся через 2 минуты.">
  <h2>Проводные интерфейсы</h2>
  {% if editable %}
  <table class="table net">
    <thead><tr><th>Интерфейс</th><th>Режим</th><th data-static>Адреса (CIDR)</th><th data-static>Шлюз</th><th data-static>DNS</th><th>Маршруты</th><th>MTU</th></tr></thead>
    <tbody>
    {% for n in editable %}
      <tr data-mode-row>
        <td>{{ n }} <span class="muted small">{{ 'link' if links[n].carrier else 'нет линка' }}</span></td>
        {{ ifc_fields('if.' ~ n, model.interfaces.get(n, {'mode': 'unset'})) }}
      </tr>
    {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="muted">Нет проводных интерфейсов, доступных для настройки из веб-консоли.</p>
  {% endif %}

  <h2>VLAN</h2>
  <table class="table net">
    <thead><tr><th>Имя</th><th>ID</th><th>Родитель</th><th>Режим</th><th data-static>Адреса (CIDR)</th><th data-static>Шлюз</th><th data-static>DNS</th><th>Маршруты</th><th>MTU</th><th></th></tr></thead>
    <tbody id="vlan-rows">
    {% for name, v in model.vlans.items() %}
      {% set idx = loop.index %}
      {% include "partials/vlan_row.html" %}
    {% endfor %}
    </tbody>
  </table>
  <div class="actions">
    <button type="button" data-add-vlan>+ VLAN</button>
    <span class="grow"></span>
    <button class="primary" {{ 'disabled' if pending }}>Применить</button>
  </div>
  <p class="muted small">Родительский интерфейс VLAN должен быть поднят (режим «без адреса», DHCP или статика). VLAN можно
    создавать и поверх порта управления — сам порт управления при этом не изменяется.</p>
</form>
</div>