{% extends "base.html" %}

{% block title %}Gateways - mGuard VPN Manager{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-router"></i> Gateways</h1>
    <a href="/gateways/new" class="btn btn-primary">
        <i class="bi bi-plus-circle"></i> Neues Gateway
    </a>
</div>

<!-- Filter -->
<div class="card mb-4">
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-md-4">
                <input type="text" class="form-control" placeholder="Suchen..."
                       hx-get="/htmx/gateways/search"
                       hx-trigger="keyup changed delay:300ms"
                       hx-target="#gateway-list"
                       name="q">
            </div>
            <div class="col-md-3">
                <select class="form-select" hx-get="/htmx/gateways/filter"
                        hx-trigger="change" hx-target="#gateway-list" name="status">
                    <option value="">Alle Status</option>
                    <option value="online">Online</option>
                    <option value="offline">Offline</option>
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select" hx-get="/htmx/gateways/filter"
                        hx-trigger="change" hx-target="#gateway-list" name="type">
                    <option value="">Alle Typen</option>
                    <option value="FL_MGUARD_2000">FL MGUARD 2000</option>
                    <option value="FL_MGUARD_4000">FL MGUARD 4000</option>
                    <option value="FL_MGUARD_RS4000">FL MGUARD RS4000</option>
                </select>
            </div>
            <div class="col-md-2">
                <button class="btn btn-outline-secondary w-100"
                        hx-get="/htmx/gateways/list"
                        hx-target="#gateway-list">
                    <i class="bi bi-arrow-clockwise"></i> Refresh
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Gateway List -->
<div id="gateway-list" hx-get="/htmx/gateways/list" hx-trigger="load" hx-swap="innerHTML">
    <div class="text-center py-5">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Laden...</span>
        </div>
    </div>
</div>
{% endblock %}