{% extends "admin/layout.twig" %}

{% block title %}Administração - Usuários{% endblock %}

{% block header_title %}Gerenciar Usuários{% endblock %}

{% block global_actions %}
    <a href="/admin/users/create" class="btn btn-success">+ Novo Usuário</a>
{% endblock %}

{% block extra_css %}
        .role-badge { padding: 4px 8px; border-radius: 12px; font-size: 0.8em; font-weight: bold; background: #eee; text-transform: capitalize; }
        .role-superadmin { background: #8e44ad; color: #fff; }
        .role-administrador { background: #2980b9; color: #fff; }
        .role-financeiro { background: #f39c12; color: #fff; }
        .role-recepcao { background: #27ae60; color: #fff; }
        .actions form { display: inline-block; margin-left: 5px; }
{% endblock %}

{% block content %}
<div class="content-container">
    {% if users is empty %}
        <p>Nenhum usuário cadastrado.</p>
    {% else %}
        <table>
            <thead>
                <tr>
                    <th>Email</th>
                    <th>Função (Role)</th>
                    <th>Criado em</th>
                    <th class="actions">Ações</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                    <tr>
                        <td>{{ user.email }}</td>
                        <td><span class="role-badge role-{{ user.role|lower }}">{{ user.role }}</span></td>
                        <td>{{ user.created|date('d/m/Y H:i') }}</td>
                        <td class="actions">
                            <a href="/admin/users/{{ user.id }}/edit" class="btn btn-sm">Editar</a>
                            <form action="/admin/users/{{ user.id }}/delete" method="POST" onsubmit="return confirm('Tem certeza que deseja excluir este usuário?');">
                                <button type="submit" class="btn btn-danger btn-sm">Excluir</button>
                            </form>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
</div>
{% endblock %}