{% extends "layouts/dashboard.twig" %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">{{ title }}</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">{{ __('dashboard.title') }}</a></li>
        <li class="breadcrumb-item"><a href="{{ url('admin/users') }}">{{ __('users.breadcrumb.users') }}</a></li>
        <li class="breadcrumb-item active">Manual</li>
    </ol>

    {% include '@users/admin/nav.twig' ignore missing %}

    <div class="row">
        <div class="col-lg-3 d-none d-lg-block">
            <div class="list-group sticky-top" style="top: 100px; z-index: 1;">
                <a href="#visao-geral" class="list-group-item list-group-item-action">Visão Geral</a>
                <a href="#niveis-acesso" class="list-group-item list-group-item-action">Níveis de Acesso</a>
                <a href="#permissoes" class="list-group-item list-group-item-action">Permissões Granulares</a>
                <a href="#status" class="list-group-item list-group-item-action">Status do Usuário</a>
            </div>
        </div>
        
        <div class="col-lg-9">
            <!-- Visão Geral -->
            <div class="card shadow mb-4" id="visao-geral">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">1. Visão Geral</h6>
                </div>
                <div class="card-body">
                    <p>O módulo de <strong>Usuários</strong> é o coração da segurança do SysCMS. Aqui você gerencia quem pode acessar o painel administrativo, quais módulos cada pessoa pode ver e o que cada uma pode fazer.</p>
                </div>
            </div>

            <!-- Níveis de Acesso -->
            <div class="card shadow mb-4" id="niveis-acesso">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">2. Níveis de Acesso (Roles)</h6>
                </div>
                <div class="card-body">
                    <ul>
                        <li><strong>Super Admin:</strong> Acesso total a todos os módulos e configurações globais do sistema.</li>
                        <li><strong>Admin:</strong> Acesso administrativo total apenas para a sua empresa/unidade.</li>
                        <li><strong>Manager:</strong> Pode gerenciar conteúdos, mas não usuários ou configurações críticas.</li>
                        <li><strong>User/Member:</strong> Acesso limitado, geralmente apenas para visualização ou perfis públicos.</li>
                    </ul>
                </div>
            </div>

            <!-- Permissões -->
            <div class="card shadow mb-4" id="permissoes">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">3. Permissões Granulares</h6>
                </div>
                <div class="card-body">
                    <p>Além do nível de acesso, você pode definir permissões específicas. Clique no ícone de <strong>chave (escudo)</strong> na lista de usuários para escolher exatamente quais módulos aquele usuário pode gerenciar.</p>
                </div>
            </div>

            <!-- Status -->
            <div class="card shadow mb-4" id="status">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">4. Status do Usuário</h6>
                </div>
                <div class="card-body">
                    <ul>
                        <li><strong>Ativo:</strong> Acesso normal ao sistema.</li>
                        <li><strong>Inativo:</strong> O usuário não consegue fazer login, mas seus dados e históricos são preservados.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}