{% 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 id="zone-grid" 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 hx-delete="/api/firewall/zones/{{ zone.get('name', '') }}" hx-swap="none" hx-confirm="Delete zone {{ zone.name }}? This will affect traffic to its interfaces." hx-on::after-request="if(evt.detail.successful){ refreshTable('/api/firewall/zones', document.getElementById('zone-grid'), renderZones); showSuccessToast('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" hx-on::after-request="if(evt.detail.successful){ closeModal('create-zone-modal'); refreshTable('/api/firewall/zones', document.getElementById('zone-grid'), renderZones); showSuccessToast('Zone created'); }">
            <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 %}