{# templates/back/dashboard/index.html.twig #}
{% extends 'backend/base_back.html.twig' %}

{% import _self as ui %}

{% macro step_card(step) %}
    <li class="mb-3 w-100">
        <a href="{{ step.url }}" aria-label="{{ step.label }}" class="btn btn-{{ step.color }} btn-md  w-100 text-start rounded-3 py-3 shadow-sm">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <strong>{{ step.label }}</strong><br>
                    <small class="text-light">{{ step.desc }}</small>
                </div>
                <i class="fas fa-chevron-right" aria-hidden="true"></i>
            </div>
        </a>
    </li>
{% endmacro %}

{% macro option_card(opt) %}
    <article class="h-100 w-100">
        <a href="{{ opt.route }}" aria-label="{{ opt.title }}" class="card text-center h-100 text-decoration-none shadow-sm border-top border-4 border-{{ opt.color }} rounded-3 p-4">
            <div class="card-body p-3">
                <i class="fas fa-{{ opt.icon }} fa-2x text-{{ opt.color }} mb-2" aria-hidden="true"></i>
                <h3 class="card-title h5 mb-2">{{ opt.title }}</h3>
                <p class="text-muted small mb-0">{{ opt.desc }}</p>
            </div>
        </a>
    </article>
{% endmacro %}

{% block title %}Tableau de bord – Bluesy{% endblock %}

{% block body %}
    <main role="main" class="container py-4 px-3 px-md-4 pb-4">
        <h1 class="dashboard-title text-center">Bienvenue sur votre tableau de bord</h1>

        {# Étapes utilisateur - vertical and centered #}
        <section aria-labelledby="steps-title" class="mt-5">
            <h2 id="steps-title" class="visually-hidden">Étapes de configuration</h2>
            <ul class="list-unstyled d-flex flex-column align-items-center">
                {% set steps = [
                    { label: '1. Créer votre page',    url: path('app_new_page'), icon: '', color: 'primary', desc: 'Votre page pro visible par tous avec votre lien unique' },
                    { label: '2. Choisir un thème',    url: path('app_theme'),    icon: '', color: 'info',    desc: 'Personnalisez le style de votre page en un clic' },
                    { label: '3. Partager votre page', url: path('public_profile_show', {'slug': app.user.profile.slug}), icon: '', color: 'success', desc: 'Diffusez votre lien sur vos réseaux et en signature' }
                ] %}
                {% for step in steps %}
                    <li class="col-12 col-md-8 col-lg-6">
                        {{ ui.step_card(step) }}
                    </li>
                {% endfor %}
            </ul>
        </section>

        <hr class="my-4">

        {# Options Premium - spaced 2 per row on desktop, 1 per on mobile #}
        <section aria-labelledby="premium-title" class="pb-5">
            <h2 id="premium-title" class="text-center mb-4">Options Premium pour aller plus loin 🚀</h2>
            <div class="row justify-content-center gx-4 gy-4">
                {% set options = [
                    { title: 'Ajouter des blocs',     route: path('app_new_page'),    icon: 'plus-circle',  desc: 'Ajoutez plus de sections à votre page',        color: 'success' },
                    { title: 'Analyser les visites',  route: path('app_statistiques'), icon: 'chart-bar',    desc: 'Statistiques détaillées de votre page',       color: 'danger'  },
                    { title: 'Plus de thèmes',        route: path('app_theme'),        icon: 'palette',      desc: 'Changez le style de votre page facilement',     color: 'info'    },
                    { title: 'Texte de présentation', route: '#',                        icon: 'comment-alt',  desc: 'Ajoutez une accroche ou un pitch marquant',    color: 'warning' }
                ] %}
                {% for opt in options %}
                    <div class="col-12 col-lg-5 mt-2">
                        {{ ui.option_card(opt) }}
                    </div>
                {% endfor %}
            </div>
        </section>
    </main>
{% endblock %}