{% extends "base.html" %}

{% block title %}VPN-Profile - {{ gateway.name }} - mGuard VPN{% endblock %}

{% block content %}
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/gateways">Gateways</a></li>
        <li class="breadcrumb-item"><a href="/gateways/{{ gateway.id }}">{{ gateway.name }}</a></li>
        <li class="breadcrumb-item active">VPN-Profile</li>
    </ol>
</nav>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>
        <i class="bi bi-shield-lock"></i> VPN-Profile
        <span class="badge bg-primary">{{ profiles|length }}</span>
    </h1>
    <div>
        <a href="/gateways/{{ gateway.id }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Zurück
        </a>
        <a href="/gateways/{{ gateway.id }}/profiles/new" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> Neues Profil
        </a>
    </div>
</div>

{% if profiles %}
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th style="width: 60px;">Priorität</th>
                        <th>Name</th>
                        <th>VPN-Server</th>
                        <th>Common Name</th>
                        <th>Status</th>
                        <th>Gültigkeit</th>
                        <th>Aktionen</th>
                    </tr>
                </thead>
                <tbody>
                    {% for profile in profiles %}
                    <tr>
                        <td>
                            <span class="badge bg-secondary fs-6">{{ profile.priority }}</span>
                        </td>
                        <td>
                            <a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}" class="text-decoration-none">
                                <strong>{{ profile.name }}</strong>
                            </a>
                            {% if profile.priority == 1 %}
                            <span class="badge bg-success ms-1">Primär</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if profile.vpn_server %}
                            <a href="/vpn-servers/{{ profile.vpn_server.id }}">
                                {{ profile.vpn_server.name }}
                            </a>
                            <br>
                            <small class="text-muted">
                                {{ profile.vpn_server.hostname }}:{{ profile.vpn_server.port }}/{{ profile.vpn_server.protocol.value }}
                            </small>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            <code>{{ profile.cert_cn }}</code>
                        </td>
                        <td>
                            {% if profile.status.value == 'active' %}
                            <span class="badge bg-success">Aktiv</span>
                            {% elif profile.status.value == 'provisioned' %}
                            <span class="badge bg-info">Provisioniert</span>
                            {% elif profile.status.value == 'pending' %}
                            <span class="badge bg-warning text-dark">Ausstehend</span>
                            {% elif profile.status.value == 'expired' %}
                            <span class="badge bg-danger">Abgelaufen</span>
                            {% elif profile.status.value == 'revoked' %}
                            <span class="badge bg-dark">Widerrufen</span>
                            {% else %}
                            <span class="badge bg-secondary">{{ profile.status.value }}</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if profile.valid_until %}
                            <small>
                                bis {{ profile.valid_until.strftime('%d.%m.%Y') }}
                                {% if profile.days_until_expiry is defined %}
                                    {% if profile.days_until_expiry <= 30 %}
                                    <br><span class="text-warning">{{ profile.days_until_expiry }} Tage</span>
                                    {% endif %}
                                {% endif %}
                            </small>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}"
                                   class="btn btn-outline-primary" title="Details">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/edit"
                                   class="btn btn-outline-secondary" title="Bearbeiten">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/provision"
                                   class="btn btn-outline-success" title="Konfiguration herunterladen">
                                    <i class="bi bi-download"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card mt-4">
    <div class="card-header">
        <i class="bi bi-info-circle"></i> Hinweis zur Priorität
    </div>
    <div class="card-body">
        <p class="mb-0">
            Profile mit niedrigerer Prioritätsnummer werden bevorzugt verwendet.
            Bei Verbindungsproblemen mit dem primären Server (Priorität 1) versucht der Client
            automatisch, sich mit dem nächsten Profil zu verbinden (Failover).
        </p>
    </div>
</div>

{% else %}
<div class="card">
    <div class="card-body text-center py-5">
        <i class="bi bi-shield-lock" style="font-size: 3rem;" class="text-muted"></i>
        <h4 class="mt-3">Keine VPN-Profile vorhanden</h4>
        <p class="text-muted">
            Erstellen Sie ein VPN-Profil, um dieses Gateway mit einem VPN-Server zu verbinden.
        </p>
        <a href="/gateways/{{ gateway.id }}/profiles/new" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> Erstes Profil erstellen
        </a>
    </div>
</div>
{% endif %}
{% endblock %}