{#
 Branchement du tutoriel interactif sur la page courante.

 Inclus SANS CONDITION depuis base.html.twig, comme le bandeau cookies et la modale de
 nouveautés : c'est `tour_courant()` qui décide s'il y a quelque chose à faire ici — un
 utilisateur connecté, une route couverte par un tutoriel, et ce tutoriel a des étapes.

 Aucun outil n'a une ligne à ajouter chez lui. Poser des `data-tour-step` dans son gabarit
 suffit ; le reste vit ici.
#}

{% set tour = tour_courant() %}

{% if tour %}
    {% set couleur = tool_color_details[tour.toolCode] ?? null %}

    {# La couleur de l'outil est posée sur `:root`, et NON sur l'hôte ci-dessous.
       driver.js accroche sa bulle et son voile à `document.body`, hors du sous-arbre de
       l'hôte : une variable déclarée là ne les atteignait pas. Le bouton « Suivant » sortait
       donc sans fond et l'anneau de focus en bleu de repli, sur tous les outils.

       `:root` est sans ambiguïté : l'inventaire refuse deux tutoriels sur une même route, il
       n'y a donc jamais deux accents à déclarer sur une page. #}
    {% if couleur %}
        <style>:root { --tour-accent: {{ couleur.primary }}; --tour-accent-rgb: {{ couleur.primary|hex_to_rgb }}; }</style>
    {% endif %}

    {# `data-turbo-temporary` : Turbo réaffiche l'instantané mis en cache avant la réponse du
       serveur. Sans cet attribut, cet hôte y survit avec son `pending` d'alors, et le
       connect() du contrôleur relancerait un tutoriel que l'utilisateur vient de terminer. #}
    <div data-controller="shared--tour"
         data-turbo-temporary
         data-shared--tour-key-value="{{ tour.key }}"
         data-shared--tour-steps-value="{{ tour.steps|json_encode }}"
         data-shared--tour-pending-value="{{ tour.pending ? 'true' : 'false' }}"
         data-shared--tour-complete-url-value="{{ path('app_tour_completed', { tourKey: tour.key }) }}"
         data-shared--tour-skip-url-value="{{ path('app_tour_skipped', { tourKey: tour.key }) }}"
         data-shared--tour-token-value="{{ csrf_token('tour-' ~ tour.key) }}">

        {# Le bouton s'affiche TOUJOURS, tutoriel vu ou non : c'est son unique raison d'être —
           rejouer celui de la page où l'on se trouve. `--tour-bouton-decalage` permet à une
           page qui a déjà du mobilier en bas à droite de le pousser vers le haut, sans que
           personne n'ait à toucher à ce fichier. #}
        <button type="button"
                class="tour-bouton"
                data-action="click->shared--tour#relancer"
                data-shared--tour-target="bouton"
                title="Revoir le tutoriel de cette page"
                aria-label="Revoir le tutoriel de cette page">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
                 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <circle cx="12" cy="12" r="10"/>
                <path d="M9.1 9a3 3 0 1 1 4.5 2.6c-.9.5-1.6 1-1.6 2"/>
                <line x1="12" y1="17.5" x2="12.01" y2="17.5"/>
            </svg>
        </button>
    </div>
{% endif %}