{% extends 'base.html.twig' %}
{% block title %}Un message pour nous ? — Bubul{% endblock %}
{% block show_sidebar %}false{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}
{% block body %}
{% set samColors = tool_color_details['sam'] ?? {primary: '#7C3AED', secondary: '#6D28D9', bg: '#EDE9FE'} %}
{% embed '_organisms/step-layout/step-layout.html.twig' with {blobColor: samColors.primary} %}
{% block logo %}
<a href="{{ path('app_landing') }}" class="inline-flex items-center gap-2 sm:gap-3 scale-75 sm:scale-100">
    {% include '_atoms/logo/logo-with-text.html.twig' with {showBadge: false, size: 'lg'} only %}
    <span class="text-gray-300 text-2xl font-light select-none">×</span>
    {% include '_atoms/logo/logo-with-text.html.twig' with {showBadge: false, size: 'lg', variant: 'sam'} only %}
</a>
{% endblock %}
{% block heading %}
<div class="w-full max-w-md text-center mb-6">
    <h1 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-2 leading-snug">Un message à nous transmettre ?</h1>
    <p class="text-sm text-gray-400">Contraintes, attentes, contexte spécifique… c'est le moment. <span class="text-gray-500">(optionnel)</span></p>
</div>
{% endblock %}
{% block card %}
    <form method="POST" action="{{ path('app_welcome') }}" class="w-full">
        <input type="hidden" name="step" value="message">
        <input type="hidden" name="_token" value="{{ csrf_token('welcome') }}">

        <div class="mb-4">
            <textarea name="message"
                      id="b2b-message"
                      maxlength="2000"
                      rows="6"
                      placeholder="Ex : on a 80 apprenants à former d'ici la rentrée, on cherche un outil compatible RGPD…"
                      oninput="document.getElementById('b2b-message-count').textContent = this.value.length"
                      class="w-full p-4 text-sm bg-white border-2 border-gray-100 rounded-2xl shadow-sm focus:border-violet-400 focus:outline-none focus:ring-2 focus:ring-violet-100 transition resize-none"></textarea>
            <div class="flex justify-end mt-1.5 text-xs text-gray-400 tabular-nums">
                <span id="b2b-message-count">0</span>
                <span class="mx-0.5">/</span>
                <span>2000</span>
            </div>
        </div>

        {% include '_atoms/button/button.html.twig' with {label: 'Envoyer ma demande', type: 'submit', width: 'full', gradientFrom: samColors.secondary, gradientTo: samColors.primary} only %}
    </form>
{% endblock %}
{% endembed %}
{% endblock %}