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 ---------- #}
{% block form_row %}
    <div class="mb-5">
        {{ form_label(form) }}
        <div class="mt-1">
            {{ form_widget(form) }}
        </div>
        {% if not compound and not form.vars.valid %}
            <p class="text-sm text-red-500 mt-1">{{ form_errors(form) }}</p>
        {% else %}
            {{ form_errors(form) }}
        {% 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-200 dark:text-gray-300">
            {{ label|trans({}, translation_domain) }}
            {% if required %}
                <span class="text-red-400">*</span>
            {% endif %}
        </label>
    {% endif %}
{% endblock %}

{# ---------- ERRORS ---------- #}
{% block form_errors %}
    {% if errors|length > 0 %}
        <ul class="mt-1 text-sm text-red-500">
            {% 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 %}

{# ---------- 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-gray-800 border border-gray-700 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
    />
{% endblock %}

{# ---------- TEXTAREA ---------- #}
{% block textarea_widget %}
    <textarea
        {{ block('widget_attributes') }}
        class="form-textarea mt-1 block w-full px-3 py-2 bg-gray-800 border border-gray-700 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
    >{{ value }}</textarea>
{% endblock %}

{# ---------- SELECT ---------- #}
{% block choice_widget_collapsed %}
    <select
        {{ block('widget_attributes') }}
        class="form-select mt-1 block w-full px-3 py-2 bg-gray-800 border border-gray-700 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
    >
        {% if placeholder is not none %}
            <option value="" {% if required and value is empty %}selected{% endif %}>
                {{ placeholder != '' ? (placeholder|trans({}, translation_domain)) : '' }}
            </option>
        {% endif %}
        {% for group_label, choice in choices %}
            {% if choice is iterable %}
                <optgroup label="{{ group_label|trans({}, translation_domain) }}">
                    {% for nested_choice in choice %}
                        <option value="{{ nested_choice.value }}" {% if nested_choice is selectedchoice(value) %}selected{% endif %}>
                            {{ nested_choice.label|trans({}, translation_domain) }}
                        </option>
                    {% endfor %}
                </optgroup>
            {% else %}
                <option value="{{ choice.value }}" {% if choice is selectedchoice(value) %}selected{% endif %}>
                    {{ choice.label|trans({}, translation_domain) }}
                </option>
            {% endif %}
        {% endfor %}
    </select>
{% endblock %}

{# ---------- CHECKBOX ---------- #}
{% block checkbox_widget %}
    <div class="flex items-center space-x-2">
        <input type="checkbox"
            {{ block('widget_attributes') }}
            {% if value not in ['', null] %} value="{{ value }}"{% endif %}
            {% if checked %}checked="checked"{% endif %}
               class="form-checkbox h-5 w-5 text-indigo-500 bg-gray-800 border-gray-700 rounded focus:ring-indigo-500">
    </div>
{% 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-500 bg-gray-800 border-gray-700 focus:ring-indigo-500">
{% endblock %}

{# ---------- FILE ---------- #}
{% block file_widget %}
    <input type="file"
        {{ block('widget_attributes') }}
           class="block w-full text-sm text-gray-300 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-gray-800 border border-gray-700 rounded-md">
{% endblock %}