{% extends "conjunto/app_base.html" %}
{% load static i18n %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="row row-deck row-cards">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Welcome to Conjunto</h3>
            </div>
            <div class="card-body">
                <p>This is an example dashboard page using the Conjunto template system.</p>

                <h4>Features</h4>
                <ul>
                    <li><strong>Multiple Layout Variants:</strong> Configure via <code>CONJUNTO_LAYOUT</code> setting</li>
                    <li><strong>Dynamic Menus:</strong> Built from IMenuItem GDAPS plugins</li>
                    <li><strong>Responsive Design:</strong> Mobile-friendly with collapsible sidebar</li>
                    <li><strong>Theme Toggle:</strong> Light/dark mode with localStorage persistence</li>
                    <li><strong>Nested Navigation:</strong> Support for 1-level submenus in sidebar</li>
                </ul>

                <h4>Available Menu Locations</h4>
                <ul>
                    <li><code>menu="main"</code> - Horizontal navbar menu</li>
                    <li><code>menu="sidebar"</code> - Vertical sidebar navigation</li>
                    <li><code>menu="user"</code> - User dropdown menu</li>
                    <li><code>menu="notifications"</code> - Notifications dropdown</li>
                    <li><code>menu="page_actions"</code> - Action buttons next to page title</li>
                </ul>

                <h4>Layout Variants</h4>
                <p>Set <code>CONJUNTO_LAYOUT</code> in your Django settings to one of:</p>
                <ul>
                    <li><code>"condensed"</code> - Fixed width container</li>
                    <li><code>"combined"</code> - Navbar + sidebar layout (default)</li>
                    <li><code>"fluid"</code> - Full-width container</li>
                    <li><code>"fluid-vertical"</code> - Vertical navigation layout</li>
                </ul>

                <div class="alert alert-info mt-4">
                    <strong>Current Layout:</strong> <code>{{ globals.layout }}</code>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Template Blocks</h3>
            </div>
            <div class="card-body">
                <p>The base template provides these overridable blocks:</p>
                <ul class="list-unstyled">
                    <li><code>{% templatetag openblock %} block title {% templatetag closeblock %}</code> - Page title in <code>&lt;title&gt;</code></li>
                    <li><code>{% templatetag openblock %} block banner_text {% templatetag closeblock %}</code> - Banner text at top</li>
                    <li><code>{% templatetag openblock %} block page_pretitle {% templatetag closeblock %}</code> - Breadcrumb/pretitle</li>
                    <li><code>{% templatetag openblock %} block page_title {% templatetag closeblock %}</code> - Main heading</li>
                    <li><code>{% templatetag openblock %} block page_title_actions {% templatetag closeblock %}</code> - Action buttons</li>
                    <li><code>{% templatetag openblock %} block content {% templatetag closeblock %}</code> - Main content</li>
                    <li><code>{% templatetag openblock %} block footer {% templatetag closeblock %}</code> - Footer</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Quick Start</h3>
            </div>
            <div class="card-body">
                <p>To use this template in your Django project:</p>
                <ol>
                    <li>Extend the base template in your views:
                        <pre class="bg-dark text-white p-2 rounded mt-2"><code>{% templatetag openblock %} extends "conjunto/base.html" {% templatetag closeblock %}</code></pre>
                    </li>
                    <li>Create IMenuItem implementations for your menus (see <code>example_menus.py</code>)</li>
                </ol>
            </div>
        </div>
    </div>
</div>
{% endblock %}