{% extends "base.html" %}

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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-plug"></i> Verbindungen</h1>
    <div>
        <span class="badge bg-success me-2" id="active-count"
              hx-get="/htmx/connections/count" hx-trigger="load, every 30s">
            ...
        </span>
        <button class="btn btn-outline-primary"
                hx-get="/htmx/connections/list" hx-target="#connection-log" hx-swap="innerHTML">
            <i class="bi bi-arrow-clockwise"></i> Aktualisieren
        </button>
    </div>
</div>

<!-- VPN Clients (Gateways) -->
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="bi bi-shield-check"></i> VPN-Clients (Gateways)</h5>
    </div>
    <div class="card-body" id="vpn-clients"
         hx-get="/htmx/connections/vpn-clients" hx-trigger="load, every 10s" hx-swap="innerHTML">
        <div class="text-center py-3">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Laden...</span>
            </div>
        </div>
    </div>
</div>

<!-- Active User Sessions -->
<div class="card mb-4">
    <div class="card-header bg-success text-white">
        <h5 class="mb-0"><i class="bi bi-broadcast"></i> Aktive Benutzer-Sessions</h5>
    </div>
    <div class="card-body" id="active-connections"
         hx-get="/htmx/connections/active" hx-trigger="load, every 10s" hx-swap="innerHTML">
        <div class="text-center py-3">
            <div class="spinner-border text-success" role="status">
                <span class="visually-hidden">Laden...</span>
            </div>
        </div>
    </div>
</div>

<!-- Connection History -->
<div class="card">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-clock-history"></i> Verbindungshistorie</h5>
    </div>
    <div class="card-body" id="connection-log"
         hx-get="/htmx/connections/list" hx-trigger="load" hx-swap="innerHTML">
        <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Laden...</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}