{% extends "base.html" %}

{% block title %}{{ profile.name }} - {{ 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"><a href="/gateways/{{ gateway.id }}/profiles">VPN-Profile</a></li>
        <li class="breadcrumb-item active">{{ profile.name }}</li>
    </ol>
</nav>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>
        <i class="bi bi-shield-lock"></i> {{ profile.name }}
        {% if profile.priority == 1 %}
        <span class="badge bg-success">Primär</span>
        {% else %}
        <span class="badge bg-secondary">Priorität {{ profile.priority }}</span>
        {% endif %}
    </h1>
    <div>
        <a href="/gateways/{{ gateway.id }}/profiles" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Zurück
        </a>
        <a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/edit" class="btn btn-outline-primary">
            <i class="bi bi-pencil"></i> Bearbeiten
        </a>
        <a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/provision" class="btn btn-success">
            <i class="bi bi-download"></i> Herunterladen
        </a>
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-info-circle"></i> Profil-Informationen
            </div>
            <div class="card-body">
                <table class="table table-borderless">
                    <tr>
                        <th style="width: 40%;">Name</th>
                        <td>{{ profile.name }}</td>
                    </tr>
                    <tr>
                        <th>Beschreibung</th>
                        <td>{{ profile.description or '-' }}</td>
                    </tr>
                    <tr>
                        <th>Status</th>
                        <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>
                    </tr>
                    <tr>
                        <th>Priorität</th>
                        <td>{{ profile.priority }}</td>
                    </tr>
                    <tr>
                        <th>Aktiv</th>
                        <td>
                            {% if profile.is_active %}
                            <span class="text-success"><i class="bi bi-check-circle"></i> Ja</span>
                            {% else %}
                            <span class="text-danger"><i class="bi bi-x-circle"></i> Nein</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>Erstellt</th>
                        <td>{{ profile.created_at.strftime('%d.%m.%Y %H:%M') }}</td>
                    </tr>
                    {% if profile.provisioned_at %}
                    <tr>
                        <th>Zuletzt provisioniert</th>
                        <td>{{ profile.provisioned_at.strftime('%d.%m.%Y %H:%M') }}</td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-hdd-network"></i> VPN-Server
            </div>
            <div class="card-body">
                {% if profile.vpn_server %}
                <table class="table table-borderless">
                    <tr>
                        <th style="width: 40%;">Server</th>
                        <td>
                            <a href="/vpn-servers/{{ profile.vpn_server.id }}">
                                {{ profile.vpn_server.name }}
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <th>Hostname</th>
                        <td><code>{{ profile.vpn_server.hostname }}</code></td>
                    </tr>
                    <tr>
                        <th>Port / Protokoll</th>
                        <td>{{ profile.vpn_server.port }} / {{ profile.vpn_server.protocol.value|upper }}</td>
                    </tr>
                    <tr>
                        <th>VPN-Netzwerk</th>
                        <td><code>{{ profile.vpn_server.vpn_network }}/{{ profile.vpn_server.vpn_netmask }}</code></td>
                    </tr>
                </table>
                {% else %}
                <p class="text-muted mb-0">Kein VPN-Server zugewiesen</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-file-earmark-lock"></i> Zertifikat
            </div>
            <div class="card-body">
                <table class="table table-borderless">
                    <tr>
                        <th style="width: 40%;">Common Name</th>
                        <td><code>{{ profile.cert_cn }}</code></td>
                    </tr>
                    <tr>
                        <th>Gültig von</th>
                        <td>{{ profile.valid_from.strftime('%d.%m.%Y') if profile.valid_from else '-' }}</td>
                    </tr>
                    <tr>
                        <th>Gültig bis</th>
                        <td>
                            {% if profile.valid_until %}
                            {{ profile.valid_until.strftime('%d.%m.%Y') }}
                            {% if profile.is_expired %}
                            <span class="badge bg-danger ms-2">Abgelaufen</span>
                            {% elif profile.days_until_expiry <= 30 %}
                            <span class="badge bg-warning text-dark ms-2">{{ profile.days_until_expiry }} Tage</span>
                            {% endif %}
                            {% else %}
                            -
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>CA</th>
                        <td>
                            {% if profile.certificate_authority %}
                            <a href="/ca/{{ profile.certificate_authority.id }}">
                                {{ profile.certificate_authority.name }}
                            </a>
                            {% else %}
                            -
                            {% endif %}
                        </td>
                    </tr>
                </table>

                {% if profile.client_cert %}
                <hr>
                <details>
                    <summary class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-eye"></i> Zertifikat anzeigen
                    </summary>
                    <pre class="mt-3 p-3 bg-light" style="max-height: 200px; overflow: auto; font-size: 0.8rem;">{{ profile.client_cert }}</pre>
                </details>
                {% endif %}
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <i class="bi bi-download"></i> Provisioning
            </div>
            <div class="card-body">
                <p>
                    Laden Sie die OpenVPN-Konfigurationsdatei herunter und importieren Sie sie auf dem mGuard-Router.
                </p>
                <a href="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/provision"
                   class="btn btn-success btn-lg w-100">
                    <i class="bi bi-download"></i> {{ profile.name }}.ovpn herunterladen
                </a>
                {% if profile.provisioned_at %}
                <div class="text-muted mt-2 text-center">
                    <small>Zuletzt heruntergeladen: {{ profile.provisioned_at.strftime('%d.%m.%Y %H:%M') }}</small>
                </div>
                {% endif %}
            </div>
        </div>

        {% if profile.status.value not in ['revoked', 'expired'] %}
        <div class="card border-danger">
            <div class="card-header bg-danger text-white">
                <i class="bi bi-exclamation-triangle"></i> Gefahrenzone
            </div>
            <div class="card-body">
                <p class="mb-3">
                    Durch das Widerrufen des Zertifikats wird der Zugang zum VPN-Server gesperrt.
                    Diese Aktion kann nicht rückgängig gemacht werden.
                </p>
                <form action="/gateways/{{ gateway.id }}/profiles/{{ profile.id }}/revoke" method="post"
                      onsubmit="return confirm('Sind Sie sicher? Das Zertifikat wird unwiderruflich gesperrt.');">
                    <button type="submit" class="btn btn-outline-danger">
                        <i class="bi bi-shield-x"></i> Zertifikat widerrufen
                    </button>
                </form>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}