{% extends "base.html" %}

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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-people"></i> Benutzer</h1>
    <a href="/users/new" class="btn btn-primary">
        <i class="bi bi-person-plus"></i> Neuer Benutzer
    </a>
</div>

<div class="card">
    <div class="card-body">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Benutzername</th>
                    <th>E-Mail</th>
                    <th>Rolle</th>
                    <th>Status</th>
                    <th>Letzter Login</th>
                    <th>Aktionen</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td>
                        <i class="bi bi-person-circle"></i>
                        {{ user.username }}
                        {% if user.full_name %}
                            <small class="text-muted d-block">{{ user.full_name }}</small>
                        {% endif %}
                    </td>
                    <td>{{ user.email }}</td>
                    <td>
                        <span class="badge badge-role-{{ user.role.value }}">{{ user.role.value }}</span>
                    </td>
                    <td>
                        {% if user.is_active %}
                            <span class="badge bg-success">Aktiv</span>
                        {% else %}
                            <span class="badge bg-danger">Inaktiv</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if user.last_login %}
                            <span data-relative-time="{{ user.last_login }}">{{ user.last_login.strftime('%d.%m.%Y %H:%M') }}</span>
                        {% else %}
                            <span class="text-muted">Nie</span>
                        {% endif %}
                    </td>
                    <td>
                        <a href="/users/{{ user.id }}/edit" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <a href="/users/{{ user.id }}/access" class="btn btn-sm btn-outline-info">
                            <i class="bi bi-key"></i> Zugriffe
                        </a>
                        {% if user.id != current_user.id %}
                        <button class="btn btn-sm btn-outline-danger"
                                hx-delete="/htmx/users/{{ user.id }}"
                                hx-confirm="Benutzer '{{ user.username }}' wirklich löschen?"
                                hx-target="closest tr"
                                hx-swap="outerHTML">
                            <i class="bi bi-trash"></i>
                        </button>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="text-center text-muted py-4">
                        Keine Benutzer vorhanden
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}