{% 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 active">Módulo Modelo</li>
    </ol>

    {% include '@modelo/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="#templates" class="list-group-item list-group-item-action">Gerenciar Templates</a>
                <a href="#placeholders" class="list-group-item list-group-item-action">Placeholders Dinâmicos</a>
                <a href="#visibilidade" class="list-group-item list-group-item-action">Visibilidade e Ordem</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 <strong>Modelo</strong> é uma ferramenta de prototipagem e padronização de conteúdo. Ele permite criar estruturas pré-definidas (templates) que podem ser reutilizadas em todo o sistema, garantindo consistência visual e agilidade na criação de novas páginas.</p>
                </div>
            </div>

            <!-- Templates -->
            <div class="card shadow mb-4" id="templates">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">2. Gerenciar Templates</h6>
                </div>
                <div class="card-body">
                    <p>Ao criar um novo modelo, você define o título e o conteúdo base. Esse conteúdo pode incluir HTML rico, estilos e referências que servirão de base para outros módulos ou páginas estáticas.</p>
                </div>
            </div>

            <!-- Placeholders -->
            <div class="card shadow mb-4" id="placeholders">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">3. Placeholders Dinâmicos</h6>
                </div>
                <div class="card-body">
                    <p>Você pode usar variáveis nos seus modelos que serão substituídas por dados reais do sistema:</p>
                    <ul>
                        <li><code>[site_name]</code> - Nome da empresa/unidade.</li>
                        <li><code>[current_date]</code> - Data atual formatada.</li>
                        <li><code>[contact_email]</code> - E-mail de contato principal.</li>
                    </ul>
                </div>
            </div>

            <!-- Visibilidade -->
            <div class="card shadow mb-4" id="visibilidade">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">4. Visibilidade e Ordem</h6>
                </div>
                <div class="card-body">
                    <ul>
                        <li><strong>Ordem:</strong> Define a sequência de exibição dos modelos em listas de seleção.</li>
                        <li><strong>Público/Privado:</strong> Define se o modelo pode ser acessado por qualquer pessoa ou apenas internamente pela equipe administrativa.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}