e-cosplay/templates/form_tailwind.twig

{% use 'form_div_layout.html.twig' %}

{# ---------- FORM START / END ---------- #}
{% block form_start -%}
    {{ parent() }}
{%- endblock %}
{% block form_end -%}
    {{ parent() }}
{%- endblock %}

{# ---------- ROW ---------- #}
{# ---------- ROW : Version Esport / Neubrutaliste ---------- #}
{% block form_row %}
    <div class="flex flex-col mb-6 last:mb-0 w-full">
        {# Label avec style forcé #}
        {{ form_label(form, null, {
            'label_attr': {'class': 'font-black uppercase italic text-xs tracking-widest text-gray-900 mb-2'}
        }) }}

        {# Widget (Input, Select, etc.) #}
        <div class="relative w-full">
            {{ form_widget(form) }}
        </div>

        {# Erreurs de validation #}
        {% if not form.vars.valid %}
            <div class="mt-2 self-start bg-red-500 text-white font-black italic uppercase text-[10px] px-2 py-1 border-2 border-black shadow-[3px_3px_0px_#000]">
                {{ form_errors(form) }}
            </div>
        {% endif %}
    </div>
{% endblock %}
{# ---------- LABEL ---------- #}
{% block form_label %}

    {% if label is not same as(false) %}
        <label for="{{ id }}" class="block text-sm font-medium text-gray-700">
            {{ label|trans({}, translation_domain) }}
            {% if required %}
                <span class="text-red-500">*</span>
            {% endif %}
        </label>
    {% endif %}
{% endblock %}

{# ---------- ERRORS ---------- #}
{% block form_errors %}
    {% if errors|length > 0 %}
        <ul class="mt-1 text-sm text-red-600 list-disc list-inside">
            {% for error in errors %}
                <li>{{ error.message }}</li>
            {% endfor %}
        </ul>
    {% endif %}
{% endblock %}

{# ---------- WIDGET DISPATCH ---------- #}
{% block form_widget %}
    {% if compound %}
        {{ block('form_widget_compound') }}
    {% else %}
        {{ block('form_widget_simple') }}
    {% endif %}
{% endblock %}

{# --- STYLE COMMUN POUR WIDGETS (Light Mode) --- #}

{# ---------- SIMPLE INPUTS (text, email, number...) ---------- #}
{% block form_widget_simple %}
    {% set type = type|default('text') %}
    <input
        type="{{ type }}"
        {{ block('widget_attributes') }}
        value="{{ value }}"
        class="form-input mt-1 block w-full px-3 py-2 bg-white border border-gray-300 text-gray-900 placeholder-gray-400 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition duration-150"
    />
{% endblock %}

{# ---------- TEXTAREA ---------- #}
{% block textarea_widget %}
    <textarea
        {{ block('widget_attributes') }}
        class="form-textarea form-input mt-1 block w-full px-3 py-2 bg-white border border-gray-300 text-gray-900 placeholder-gray-400 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition duration-150"
    >{{ value }}</textarea>
{% endblock %}
{# ---------- CHECKBOX : Alignée en ligne ---------- #}
{% block checkbox_widget %}
    <label class="flex items-center group cursor-pointer select-none w-full">
        <input type="checkbox" value="{{ value }}" {{ block('widget_attributes') }} {% if checked %}checked="checked"{% endif %} class="peer hidden">

        {# Le carré de la checkbox #}
        <div class="flex-shrink-0 w-6 h-6 bg-white border-[3px] border-black shadow-[3px_3px_0px_#000] peer-checked:bg-green-400 peer-checked:shadow-none peer-checked:translate-x-[2px] peer-checked:translate-y-[2px] transition-all flex items-center justify-center">
            <svg class="w-4 h-4 text-black opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M5 13l4 4L19 7"></path>
            </svg>
        </div>

        {# Le texte à côté #}
        {% if label is defined and label is not same as(false) %}
            <span class="ml-3 font-black uppercase italic text-xs tracking-tight text-gray-900 leading-none">
                {{ label|trans }}
            </span>
        {% endif %}
    </label>
{% endblock %}


{# ---------- RADIO ---------- #}
{% block radio_widget %}
    <input type="radio"
        {{ block('widget_attributes') }}
           value="{{ value }}"
        {% if checked %}checked="checked"{% endif %}
           class="form-radio h-5 w-5 text-indigo-600 border-gray-300 focus:ring-indigo-500">
{% endblock %}

{# ---------- FILE ---------- #}
{% block file_widget %}
    <input type="file"
        {{ block('widget_attributes') }}
           class="block w-full text-sm text-gray-800 file:mr-4 file:py-2 file:px-4
                  file:rounded-md file:border-0
                  file:text-sm file:font-semibold
                  file:bg-indigo-600 file:text-white
                  hover:file:bg-indigo-700
                  bg-white border border-gray-300 rounded-md shadow-sm">
{% endblock %}



{% block choice_widget_expanded %}
    <div {{ block('widget_container_attributes') }} class="flex flex-col gap-3 mt-2">
        {% for child in form %}
            <div class="flex items-center">
                {{ form_widget(child) }}
            </div>
        {% endfor %}
    </div>
{% endblock %}