{% extends "base.html" %}

{% block title %}Zugriffe für {{ user.username }} - mGuard VPN Manager{% endblock %}

{% block content %}
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/users">Benutzer</a></li>
        <li class="breadcrumb-item"><a href="/users/{{ user.id }}">{{ user.username }}</a></li>
        <li class="breadcrumb-item active">Zugriffe</li>
    </ol>
</nav>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1><i class="bi bi-key"></i> Zugriffe für {{ user.username }}</h1>
        <p class="text-muted mb-0">{{ user.email }} | Rolle: {{ user.role.value }}</p>
    </div>
    <a href="/users" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> Zurück
    </a>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-router"></i> Gateway-Zugriffe</h5>
            </div>
            <div class="card-body">
                <form method="post" action="/users/{{ user.id }}/access">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th style="width: 50px;">Zugriff</th>
                                <th>Gateway</th>
                                <th>Standort</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for gateway in gateways %}
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox"
                                               name="gateway_ids" value="{{ gateway.id }}"
                                               id="gw_{{ gateway.id }}"
                                               {{ 'checked' if gateway.id in access_gateway_ids }}>
                                    </div>
                                </td>
                                <td>
                                    <label for="gw_{{ gateway.id }}" class="mb-0" style="cursor: pointer;">
                                        {{ gateway.name }}
                                    </label>
                                </td>
                                <td class="text-muted">{{ gateway.location or '-' }}</td>
                                <td>
                                    {% if gateway.is_online %}
                                        <span class="badge bg-success">Online</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Offline</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    Keine Gateways vorhanden
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>

                    {% if gateways %}
                    <div class="d-flex justify-content-between">
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="selectAll()">
                                Alle auswählen
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="selectNone()">
                                Keine auswählen
                            </button>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> Speichern
                        </button>
                    </div>
                    {% endif %}
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Info</h5>
            </div>
            <div class="card-body">
                <p class="mb-2"><strong>Benutzer:</strong> {{ user.username }}</p>
                <p class="mb-2"><strong>Rolle:</strong>
                    <span class="badge badge-role-{{ user.role.value }}">{{ user.role.value }}</span>
                </p>

                <hr>

                <h6>Rollen-Erklärung:</h6>
                <ul class="small text-muted">
                    <li><strong>technician:</strong> Kann nur zugewiesene Gateways sehen und verbinden</li>
                    <li><strong>admin:</strong> Kann alle Gateways des Mandanten verwalten</li>
                    <li><strong>super_admin:</strong> Voller Zugriff auf alle Mandanten</li>
                </ul>

                <div class="alert alert-info small mb-0">
                    <i class="bi bi-lightbulb"></i>
                    Admins haben automatisch Zugriff auf alle Gateways ihres Mandanten.
                    Diese Zuweisungen gelten nur für Techniker.
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function selectAll() {
    document.querySelectorAll('input[name="gateway_ids"]').forEach(cb => cb.checked = true);
}
function selectNone() {
    document.querySelectorAll('input[name="gateway_ids"]').forEach(cb => cb.checked = false);
}
</script>
{% endblock %}