{#
 # PAGE: SLIDIA — RÉDACTION MANUELLE : TITRE ET MASQUE
 # Troisième voie de la page de choix. Aucune IA, aucun token : on nomme la présentation, on
 # choisit le masque qui fournira les mises en page, et l'éditeur s'ouvre sur une présentation
 # vide.
 #
 # DONNÉES REQUISES (SlidiaController::manual) : templates, lastUsedTemplateId.
 #
 # Avant, cette voie créait la présentation sur un simple GET, sans rien demander : le titre
 # était générique et le masque absent — donc aucune mise en page à proposer dans l'éditeur.
 #}

{% extends 'base.html.twig' %}

{% block title %}Nouvelle présentation — Slidia{% endblock %}

{% block meta_description %}Créez une présentation Slidia vide et composez-la vous-même, slide par slide.{% endblock %}

{% block body %}
{% set sdColor = tool_color_details['slidia'] %}
{% set sdRgb   = sdColor.primary|hex_to_rgb %}

<style>
    .sdl-man .sdl-label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; margin-bottom:.5rem; }
    .sdl-man .sdl-req::after { content:" *"; color:#dc2626; font-weight:700; }
    .sdl-man .sdl-input {
        width:100%; border:1px solid #e5e7eb; border-radius:.75rem; padding:.7rem .9rem;
        font-size:.9rem; line-height:1.5; color:#111827; background-color:#fff;
        transition:border-color .15s ease, box-shadow .15s ease;
    }
    .sdl-man .sdl-input::placeholder { color:#9ca3af; }
    .sdl-man .sdl-input:focus {
        outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(var(--color-primary-rgb), .14);
    }
    .sdl-man .sdl-library-card:focus-visible {
        outline:none; border-color:var(--color-primary);
        box-shadow:0 0 0 3px rgba(var(--color-primary-rgb), .35);
    }
</style>

{# Recoloration en ambre sur CE conteneur racine — les composants partagés sont écrits sur les
   variables de thème, jamais sur une couleur en dur. #}
<div class="sdl-man max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
     data-controller="slidia--configure"
     data-slidia--configure-preselect-value="{{ lastUsedTemplateId }}"
     style="
         --color-primary: {{ sdColor.primary }};
         --color-primary-rgb: {{ sdRgb }};
         --color-primary-dark: {{ sdColor.secondary }};
         --color-primary-hover: {{ sdColor.secondary }};
         --color-gradient-start: {{ sdColor.primary }};
         --color-gradient-middle: {{ sdColor.secondary }};
         --color-gradient-end: {{ sdColor.secondary }};
     ">

    <header class="mb-8 max-w-3xl mx-auto">
        <div class="flex items-center gap-4">
            <div class="w-16 h-16 rounded-2xl border flex items-center justify-center shrink-0 shadow-sm"
                 style="background: linear-gradient(135deg, {{ sdColor.bg }}, color-mix(in srgb, {{ sdColor.primary }} 6%, white)); border-color: {{ sdColor.border }}; color: {{ sdColor.primary }};">
                {% include '_atoms/icon/icon.html.twig' with { name: 'edit', size: 'xl', colorPrimary: 'current', colorSecondary: 'current' } only %}
            </div>
            <div>
                <h1 class="text-2xl lg:text-[1.75rem] font-bold text-gray-900 font-secondary leading-tight">Composez vous-même</h1>
                <p class="text-gray-500 mt-1">Nommez votre présentation et choisissez son masque : l'éditeur fera le reste.</p>
            </div>
        </div>
    </header>

    <form method="POST" action="{{ path('app_slidia_create_manual') }}"
          class="max-w-3xl mx-auto"
          data-action="submit->slidia--configure#onSubmit">

        {# Même identifiant de jeton que les autres créations Slidia : `createManual()` l'attend
           sous ce nom. Cette action écrit en base, elle ne peut pas se déclencher sur un GET. #}
        <input type="hidden" name="_token" value="{{ csrf_token('slidia_create') }}">

        <div class="bg-white rounded-3xl border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.04)] overflow-hidden">
            <div class="p-6 sm:p-8 space-y-8">

                <label class="block">
                    <span class="sdl-label sdl-req">Titre de la présentation</span>
                    <input type="text" name="title" maxlength="100" minlength="3" autocomplete="off"
                           placeholder="ex. Lancement de la nouvelle gamme"
                           class="sdl-input"
                           data-slidia--configure-target="titleInput"
                           data-action="input->slidia--configure#validate">
                </label>

                <div>
                    <div class="flex items-baseline justify-between gap-3 mb-2">
                        <span class="sdl-label sdl-req" style="margin-bottom:0;">Masques</span>
                        <span class="text-xs text-gray-400" data-slidia--configure-target="templateSummary">Aucun masque sélectionné</span>
                    </div>

                    <input type="hidden" name="templateId" value="{{ lastUsedTemplateId ?: '' }}"
                           data-slidia--configure-target="templateIdInput">

                    {% if templates is empty %}
                        <div class="rounded-2xl border border-dashed border-gray-200 bg-gray-50/60 py-10 px-6 text-center">
                            <p class="text-sm font-semibold text-gray-700">Aucun masque disponible</p>
                            <p class="text-xs text-gray-400 mt-1.5">
                                Importez un modèle .pptx depuis
                                <a href="{{ path('app_slidia') }}" class="font-semibold underline" style="color: {{ sdColor.primary }};">votre bibliothèque</a>
                                : sans masque, l'éditeur n'a aucune mise en page à proposer.
                            </p>
                        </div>
                    {% else %}
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                            {# `withActions: false` est obligatoire : la gestion des masques vit
                               dans la bibliothèque, pas ici, et ce contrôleur n'a aucune des
                               méthodes que le menu ⋯ appellerait. #}
                            {% for template in templates %}
                                {% set cardAccent = template.accentColor ?? sdColor.primary %}
                                {% include '_molecules/slidia-template-card/slidia-template-card.html.twig' with {
                                    id:              template.id,
                                    name:            template.name,
                                    layoutCount:     template.layouts|length,
                                    thumbnailsReady: template.isThumbnailsReady,
                                    accentColor:     cardAccent,
                                    accentRgb:       cardAccent|hex_to_rgb,
                                    layoutNames:     template.layouts|map(l => l.name),
                                    layoutPaths:     template.layouts|map(l => l.path),
                                    loopIndex:       loop.index0,
                                    isSystem:        template.isSystem,
                                    withActions:     false,
                                    controller:      'slidia--configure'
                                } only %}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <p class="text-sm text-gray-500">Aucun token n'est consommé : rien n'est généré.</p>
            </div>
        </div>

        {# Navigation : sous la carte, nue sur le fond de page — même molécule que les autres
           écrans. Elle reste dans le <form> : c'est elle qui porte le bouton de soumission. #}
        {% include '_molecules/step-nav/step-nav.html.twig' with {
            class: 'pt-8',
            back: { href: path('app_slidia_new') },
            next: {
                label:        "Ouvrir l'éditeur",
                type:         'submit',
                disabled:     true,
                gradientFrom: sdColor.primary,
                gradientTo:   sdColor.secondary,
                attr:         { 'data-slidia--configure-target': 'submitBtn' }
            }
        } only %}
    </form>
</div>
{% endblock %}