{% extends "admin/layout.html" %}
{% block title %}{{ super() }} - {{ page | capitalize }}{% endblock %}
{% block pagetitle %}USERS{% endblock %}
{% block content %}
{% include 'modals/confirm.html' %}
{% include 'admin/users/modal.html' %}

{% for (category, message) in get_flashed_messages(request) %}
<div class="alert alert-{{ category }} mb-3 fade-in">
    <i class="fas fa-{% if category == 'danger' %}exclamation-circle{% elif category == 'success' %}check-circle{% else %}info-circle{% endif %}"></i>
    <span>{{ message }}</span>
    <button type="button" class="btn-close" data-bs-dismiss="alert"><i class="fas fa-times"></i></button>
</div>
{% endfor %}

{% if users %}
<div class="tools d-flex justify-content-end mb-4 gap-2">
    <div class="btn-group" role="group">
        <a href="{{ url_for('admin_list_users') }}?view=grid" 
           class="btn {% if request.session['view'] != 'list' %}btn-accent{% else %}btn-outline-secondary{% endif %}" 
           title="Grid view">
            <i class="fas fa-th-large fa-fw"></i>
        </a>
        <a href="{{ url_for('admin_list_users') }}?view=list" 
           class="btn {% if request.session['view'] == 'list' %}btn-accent{% else %}btn-outline-secondary{% endif %}" 
           title="Table view">
            <i class="fas fa-th-list fa-fw"></i>
        </a>
    </div>
    <div class="btn-group" role="group">
        <a href="#confirmModal" role="button" class="btn btn-outline-danger" data-bs-toggle="modal">
            <i class="fas fa-trash-alt fa-fw"></i>
        </a>
        <a href="#userModal" role="button" class="btn btn-accent" data-bs-toggle="modal">
            <i class="fas fa-plus fa-fw"></i>
            <span class="d-none d-sm-inline">New User</span>
        </a>
    </div>
</div>

{% if request.session['view'] == 'list' %}
{% include 'admin/users/list.html' %}
{% else %}
{% include 'admin/users/grid.html' %}
{% endif %}

{% else %}
<div class="empty-state fade-in">
    <i class="fas fa-users"></i>
    <div class="empty-state-title">No users yet</div>
    <p class="empty-state-text mb-4">Create a new user account</p>
    <a href="#userModal" class="btn btn-accent" data-bs-toggle="modal">
        <i class="fas fa-plus fa-fw"></i>
        Create User
    </a>
</div>
{% endif %}
{% endblock %}