{#
 # Encart commun aux pages de paramètres Moodia et Slidia.
 # Le texte complet reste masqué jusqu'à l'ouverture volontaire du dialogue afin
 # de ne pas alourdir la configuration principale.
 #
 # Variables : tool, content, source, sereniaColor, toolColor.
 #}
{% set charCount = source.charCount|default(content|length) %}
{% set toolLabel = tool == 'moodia' ? 'Moodia' : 'Slidia' %}
{% set toolIcon = tool == 'moodia' ? 'bubul-moodia' : 'bubul-slidia' %}
{% set accent = toolColor.primary %}

<section class="mb-6" data-controller="shared--serenia-source" data-serenia-source>
    <div class="flex flex-col sm:flex-row sm:items-center gap-3 rounded-2xl border border-gray-100 bg-white px-4 py-3 shadow-[0_2px_12px_rgba(16,24,40,0.035)]">
        <div class="flex items-center min-w-0 flex-1 gap-3">
            <div class="flex -space-x-1.5 shrink-0" aria-hidden="true">
                <span class="w-8 h-8 rounded-full border shadow-sm flex items-center justify-center"
                      data-serenia-source-icon="serenia"
                      style="background: {{ sereniaColor.bg }}; border-color: {{ sereniaColor.border }};">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'bubul-serenia',
                        size: 'sm',
                        colorPrimary: sereniaColor.primary,
                        colorSecondary: sereniaColor.secondary
                    } only %}
                </span>
                <span class="w-8 h-8 rounded-full border shadow-sm flex items-center justify-center"
                      data-serenia-source-icon="{{ tool }}"
                      style="background: {{ toolColor.bg }}; border-color: {{ toolColor.border }};">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: toolIcon,
                        size: 'sm',
                        colorPrimary: toolColor.primary,
                        colorSecondary: toolColor.secondary
                    } only %}
                </span>
            </div>

            <div class="min-w-0">
                <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
                    <p class="text-sm font-semibold text-gray-800">Contenu repris intégralement depuis Serenia</p>
                    <span class="inline-flex items-center gap-1 rounded-full bg-gray-50 px-2 py-0.5 text-[10px] font-semibold text-gray-500">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'lock', size: 'xs', color: 'current' } only %}
                        Lecture seule
                    </span>
                </div>
                <p class="mt-0.5 text-xs text-gray-400">
                    {{ charCount|number_format(0, ',', ' ') }} caractères seront utilisés tels quels par {{ toolLabel }}.
                </p>
            </div>
        </div>

        <button type="button"
                class="shrink-0 self-start sm:self-auto text-xs font-semibold text-gray-500 hover:text-gray-900 transition-colors"
                data-action="shared--serenia-source#open">
            Voir le texte
        </button>
    </div>

    <dialog class="m-auto w-[min(92vw,760px)] max-h-[88vh] overflow-hidden rounded-3xl border-0 bg-white p-0 shadow-2xl backdrop:bg-gray-950/35 backdrop:backdrop-blur-[2px]"
            data-shared--serenia-source-target="dialog"
            data-action="click->shared--serenia-source#closeOnBackdrop">
        <div class="flex max-h-[88vh] flex-col">
            <header class="flex items-start justify-between gap-4 border-b border-gray-100 px-5 py-4 sm:px-6">
                <div>
                    <h2 class="text-base font-bold text-gray-900">Contenu transmis à {{ toolLabel }}</h2>
                    <p class="mt-1 text-xs leading-relaxed text-gray-500">
                        Cette réponse provient de Serenia et sera utilisée sans modification.
                    </p>
                </div>
                <button type="button" aria-label="Fermer"
                        class="-mr-2 rounded-full p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
                        data-action="shared--serenia-source#close">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'close', size: 'sm', color: 'current' } only %}
                </button>
            </header>

            <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4 sm:px-6">
                <div class="min-h-[360px] whitespace-pre-wrap break-words rounded-2xl border border-gray-200 bg-gray-50/60 px-4 py-3 text-sm leading-6 text-gray-800"
                     data-serenia-source-content>{{ content }}</div>
                <p class="mt-2 text-right text-[11px] text-gray-400 tabular-nums">
                    {{ content|length|number_format(0, ',', ' ') }} caractères
                </p>
            </div>

            <footer class="flex justify-end border-t border-gray-100 px-5 py-4 sm:px-6">
                <button type="button"
                        class="rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:opacity-90"
                        style="background: {{ accent }};"
                        data-action="shared--serenia-source#close">
                    Fermer
                </button>
            </footer>
        </div>
    </dialog>
</section>