{% extends 'base.html.twig' %}

{% block title %}Benutzerverwaltung - Datalogger Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumbs">
        <a href="{{ path('app_dashboard') }}">Dashboard</a>
        <i class="fas fa-chevron-right"></i>
        <span>Benutzerverwaltung</span>
    </div>
    <div class="delivery-page-header">
        <h1><i class="fas fa-users"></i> Benutzerverwaltung</h1>
        <a href="{{ path('app_user_create') }}" class="btn btn-primary">
            <i class="fas fa-user-plus"></i> Neuen Benutzer erstellen
        </a>
    </div>
</div>

<div class="content-card">
    {% for message in app.flashes('success') %}
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i>
            <span>{{ message }}</span>
        </div>
    {% endfor %}

    {% if users is empty %}
        <div class="empty-state-center text-secondary">
            <i class="fas fa-users empty-state-icon-user"></i>
            <p>Noch keine Benutzer vorhanden.</p>
            <a href="{{ path('app_user_create') }}" class="btn btn-primary mt-1">
                <i class="fas fa-user-plus"></i> Ersten Benutzer erstellen
            </a>
        </div>
    {% else %}
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Benutzername</th>
                        <th>E-Mail</th>
                        <th>Rollen</th>
                        <th>Status</th>
                        <th>Erstellt am</th>
                        <th>Letzter Login</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>{{ user.id }}</td>
                        <td>
                            <strong>{{ user.username }}</strong>
                        </td>
                        <td>{{ user.email ?? '-' }}</td>
                        <td>
                            {% for role in user.roles %}
                                {% if role == 'ROLE_ADMIN' %}
                                    <span class="badge badge-admin">
                                        <i class="fas fa-shield-alt"></i> Admin
                                    </span>
                                {% elseif role == 'ROLE_USER' %}
                                    <span class="badge badge-user">
                                        <i class="fas fa-user"></i> User
                                    </span>
                                {% endif %}
                            {% endfor %}
                        </td>
                        <td>
                            {% if user.active %}
                                <span class="badge badge-success">
                                    <i class="fas fa-check-circle"></i> Aktiv
                                </span>
                            {% else %}
                                <span class="badge badge-danger">
                                    <i class="fas fa-times-circle"></i> Inaktiv
                                </span>
                            {% endif %}
                        </td>
                        <td>{{ user.createdAt|date('d.m.Y H:i') }}</td>
                        <td>
                            {% if user.lastLogin %}
                                {{ user.lastLogin|date('d.m.Y H:i') }}
                            {% else %}
                                <span class="text-secondary">Nie</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>

<style>
.table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: #f9fafb;
}

.data-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e5e7eb;
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
}

.data-table tbody tr:hover {
    background: #f9fafb;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-admin {
    background: #dbeafe;
    color: #1e40af;
}

.badge-user {
    background: #f3f4f6;
    color: #374151;
}

.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}
</style>
{% endblock %}