vacuum-wall/webui/templates/interfaces.html

{% extends "base.html" %}
{% block title %}Interfaces - Vacuum Wall{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1>Interfaces</h1>
        <div class="subtitle">Network interface to zone bindings</div>
    </div>
</div>

<div class="card">
    <table>
        <thead>
            <tr>
                <th>Interface</th>
                <th>MAC Address</th>
                <th>IP Address</th>
                <th>State</th>
                <th>Zone</th>
            </tr>
        </thead>
        <tbody id="interface-list">
            {% for iface in (interfaces or []) %}
            <tr>
                <td><strong>{{ iface.get('name', 'unknown') }}</strong></td>
                <td class="text-muted">{{ iface.get('mac', 'N/A') }}</td>
                <td>
                    {% for ip in iface.get('ips', []) %}
                    {{ ip }}{% if not loop.last %}, {% endif %}
                    {% endfor %}
                    {% if not iface.get('ips') %}N/A{% endif %}
                </td>
                <td>
                    <span class="status-dot {{ 'status-up' if iface.get('state') == 'up' else 'status-down' }}"></span>
                    {{ 'Up' if iface.get('state') == 'up' else 'Down' }}
                </td>
                <td>
                    {% if zones %}
                    <select
                        hx-on::change="fetch('/api/firewall/zones/'+encodeURIComponent(this.value)+'/interfaces',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({interfaces:['{{ iface.name }}']})}).then(r=>{if(!r.ok)throw r}).then(r=>r.ok?(showSuccessToast('{{ iface.name }} assigned to '+this.value),refreshTable('/api/firewall/interfaces',document.getElementById('interface-list'),renderInterfaces)):r.json().then(j=>{throw new Error(j.error||r.statusText)})).catch(e=>{showErrorToast(e.message);this.selectedIndex=0})"
                    >
                        {% for zone in zones %}
                        <option value="{{ zone.get('name', '') }}" {% if zone.get('name') == iface.get('zone') %}selected{% endif %}>{{ zone.get('name', '') }}</option>
                        {% endfor %}
                    </select>
                    {% else %}
                    <span class="text-muted">No zones configured</span>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
            {% if not (interfaces or []) %}
            <tr>
                <td colspan="6" class="text-muted text-sm">No interfaces found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>
{% endblock %}