{% extends "base.html" %}

{% block title %}VPN-Server - mGuard VPN{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-server"></i> VPN-Server</h1>
    <a href="/vpn-servers/new" class="btn btn-primary">
        <i class="bi bi-plus-lg"></i> Neuer VPN-Server
    </a>
</div>

<div class="row">
    {% for server in servers %}
    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card h-100 {% if server.is_primary %}border-primary{% endif %}">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>
                    {% if server.status.value == 'running' %}
                    <span class="status-indicator online"></span>
                    {% else %}
                    <span class="status-indicator offline"></span>
                    {% endif %}
                    {{ server.name }}
                </span>
                <div>
                    {% if server.is_primary %}
                    <span class="badge bg-primary">Primär</span>
                    {% endif %}
                    {% if server.protocol.value == 'udp' %}
                    <span class="badge badge-udp">UDP</span>
                    {% else %}
                    <span class="badge badge-tcp">TCP</span>
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                <p class="text-muted small">{{ server.description or 'Keine Beschreibung' }}</p>

                <!-- Connection Info -->
                <div class="mb-3">
                    <code>{{ server.hostname }}:{{ server.port }}</code>
                </div>

                <!-- Status -->
                <div class="mb-2">
                    {% if server.status.value == 'running' %}
                    <span class="badge bg-success">Läuft</span>
                    <span class="badge bg-light text-dark">{{ server.connected_clients }} Clients</span>
                    {% elif server.status.value == 'stopped' %}
                    <span class="badge bg-secondary">Gestoppt</span>
                    {% elif server.status.value == 'starting' %}
                    <span class="badge bg-warning">Startet...</span>
                    {% elif server.status.value == 'error' %}
                    <span class="badge bg-danger">Fehler</span>
                    {% else %}
                    <span class="badge bg-light text-dark">{{ server.status.value }}</span>
                    {% endif %}
                </div>

                <!-- Details -->
                <ul class="list-unstyled small mb-0">
                    <li><strong>Netzwerk:</strong> {{ server.vpn_network }}/{{ server.vpn_netmask }}</li>
                    <li><strong>Cipher:</strong> {{ server.cipher.value }}</li>
                    <li><strong>CA:</strong> {{ server.certificate_authority.name if server.certificate_authority else '-' }}</li>
                </ul>
            </div>
            <div class="card-footer">
                <a href="/vpn-servers/{{ server.id }}" class="btn btn-sm btn-primary">
                    <i class="bi bi-eye"></i> Details
                </a>
                <a href="/vpn-servers/{{ server.id }}/clients" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-people"></i> Clients
                </a>
                <a href="/vpn-servers/{{ server.id }}/edit" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-pencil"></i>
                </a>
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-12">
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i>
            Keine VPN-Server vorhanden.
            <a href="/vpn-servers/new">Erstellen Sie einen neuen VPN-Server</a>.
            <br>
            <small class="text-muted">Hinweis: Sie benötigen zuerst eine <a href="/ca">Certificate Authority</a>.</small>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}