vacuum-wall/webui/templates/zones.html

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

{% block content %}
<div class="page-header">
    <div>
        <h1>Zones</h1>
        <div class="subtitle">Firewalld zone management</div>
    </div>
    <button class="btn btn-primary" onclick="openModal('create-zone-modal')">+ Create Zone</button>
</div>

<div class="card-grid">
    {% for zone in (zones or []) %}
    <div class="card" style="position:relative;">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;">
            <div>
                <h3 style="font-size:16px;color:var(--accent);">{{ zone.get('name', 'unnamed') }}</h3>
                <div class="text-muted text-sm" style="margin-bottom:10px;">
                    {% if zone.get('target') %}Target: {{ zone.target }}{% endif %}
                </div>
            </div>
        </div>

        <div class="text-sm mb-4">
            <div class="text-muted" style="margin-bottom:4px;">Interfaces</div>
            {% if zone.get('interfaces') %}
                {% for iface in zone.interfaces %}
                <span class="badge badge-info">{{ iface }}</span>
                {% endfor %}
            {% else %}
                <span class="text-muted">None</span>
            {% endif %}
        </div>

        <div class="text-sm mb-4">
            <div class="text-muted" style="margin-bottom:4px;">Services</div>
            {% if zone.get('services') %}
                {% for svc in zone.services %}
                <span class="badge badge-success">{{ svc }}</span>
                {% endfor %}
            {% else %}
                <span class="text-muted">None</span>
            {% endif %}
        </div>

        <div style="display:flex;justify-content:flex-end;gap:6px;margin-top:12px;">
            <form method="POST" action="/api/firewall/zones/{{ zone.get('name', '') }}/delete" hx-post="/api/firewall/zones/{{ zone.get('name', '') }}/delete" hx-swap="none" onsubmit="return confirm('Delete zone {{ zone.name }}? This will affect traffic to its interfaces.');" class="htmx-on-success" data-success="Zone deleted">
                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
            </form>
        </div>
    </div>
    {% endfor %}
    {% if not (zones or []) %}
    <div class="card">
        <div class="text-muted text-sm">No zones configured. Create a zone to get started.</div>
    </div>
    {% endif %}
</div>

<!-- Create Zone Modal -->
<div class="modal-overlay" id="create-zone-modal" onclick="if(event.target===this) closeModal('create-zone-modal')">
    <div class="modal">
        <h2>Create Zone</h2>
        <form hx-post="/api/firewall/zones" hx-swap="none" class="htmx-on-success" data-success="Zone created" onsuccess="setTimeout(function(){closeModal('create-zone-modal');},500); location.reload();">
            <div class="form-group">
                <label for="zone-name">Zone Name</label>
                <input type="text" id="zone-name" name="name" placeholder="e.g., trusted, dmz, external" required>
            </div>
            <div class="form-group">
                <label for="zone-target">Target</label>
                <select id="zone-target" name="target">
                    <option value="default">default</option>
                    <option value="%%REJECT%%">%REJECT%</option>
                    <option value="%%DROP%%">%DROP%</option>
                    <option value="%%ACCEPT%%">%ACCEPT%</option>
                </select>
            </div>
            <div class="form-group">
                <label for="zone-services">Default Services (comma-separated)</label>
                <input type="text" id="zone-services" name="services" placeholder="e.g., dhcp, dns, ssh">
            </div>
            <div class="modal-actions">
                <button type="button" class="btn btn-outline" onclick="closeModal('create-zone-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Create</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}