myep/templates/forms.html.twig

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

{%- block form_row -%}
    {%- set row_attr = row_attr|merge({ 'class': (row_attr.class|default('') ~ ' mb-1')|trim }) -%}
    {%- set widget_attr = {} -%}
    {%- if help is not empty -%}
        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
    {%- endif -%}
    <div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
        {{- form_label(form) -}}
        {{- form_widget(form, widget_attr) -}}
        {{- form_errors(form) -}}
        {{- form_help(form) -}}
    </div>
{%- endblock form_row -%}

{%- block form_label -%}
    {% set class = 'font-semibold' %}
    {% if errors|length %}
        {% set class = class ~ ' text-red-500' %}
    {% endif %}
    {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ class)|trim}) %}
    {{ parent() }}
{%- endblock form_label -%}

{%- block form_errors -%}
    {%- if errors|length > 0 -%}
        <ul class="pb-2">
            {%- for error in errors -%}
                <li class="text-red-500">{{ error.message }}</li>
            {%- endfor -%}
        </ul>
    {%- endif -%}
{%- endblock form_errors -%}

{%- block form_widget_simple -%}
    {%- set type = type|default('text') -%}
    {%- if type != 'hidden' -%}
        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
        {%- if errors|length -%}
            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
        {%- endif -%}
        {%- if disabled is defined and disabled == true -%}
            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
        {%- endif -%}
    {%- endif -%}
    {{ parent() }}
    {%- if disabled is defined and disabled == true -%}
        <input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}">
    {%- endif -%}
{%- endblock form_widget_simple -%}

{%- block textarea_widget -%}
    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
    {%- if errors|length -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
    {%- endif -%}
    {%- if disabled is defined and disabled == true -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
    {%- endif -%}
    {{ parent() }}
    {%- if disabled is defined and disabled == true -%}
        <input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}">
    {%- endif -%}
{%- endblock textarea_widget -%}

{%- block checkbox_widget -%}
    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-checkbox')|trim }) -%}
    {%- if errors|length -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-checkbox--has-error' }) -%}
    {%- endif -%}
    {%- if attr.disabled is defined and attr.disabled == true -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
    {%- endif -%}
    <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{%- endblock checkbox_widget -%}

{%- block radio_widget -%}
    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-radio')|trim }) -%}
    {%- if errors|length -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-radio--has-error' }) -%}
    {%- endif -%}
    {%- if attr.disabled is defined and attr.disabled == true -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
    {%- endif -%}
    <input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{%- endblock radio_widget -%}

{% block checkbox_row %}
    <div class="relative flex items-start">
        <div class="flex h-6 items-center">
            {{ form_widget(form) }}
        </div>
        <div class="{{ html_classes('ml-1 leading-6', { 'text-red-500': errors|length }) }}">
            <label for="{{ form.vars.id }}">
                {{ form.vars.label }}
            </label>
            {{- form_errors(form) -}}
        </div>
    </div>
{% endblock %}

{%- block choice_widget_collapsed -%}
    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
    {%- if errors|length -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
    {%- endif -%}
    {%- if disabled is defined and disabled == true -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
    {%- endif -%}
    {%- if attr.readonly is defined %}
        <div class="cursor-not-allowed">
            {{ parent() }}
        </div>
    {% else %}
        {{ parent() }}
    {% endif %}
    {%- if disabled is defined and disabled == true -%}
        <input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}">
    {%- endif -%}
{%- endblock choice_widget_collapsed -%}

{%- block choice_widget_expanded -%}
    {%- for child in form %}
        {{- form_row(child) -}}
    {% endfor -%}
{%- endblock choice_widget_expanded -%}

{%- block multiselect_widget -%}
    <div class="relative" {{ stimulus_controller('multiselect', { 'placeholder': form.vars.empty_label }) }}>
        <div {{ stimulus_action('multiselect', 'toggle', 'click')}}
                role="button"
                class="relative rounded-md border border-gray-300 flex items-start space-x-2 px-3">
            <div {{ stimulus_target('multiselect', 'label') }} class="flex-1 min-h-8 py-1.5 text-gray-900 text-sm"></div>
            {{ icon('dots', 'w-4 h-4 mt-2') }}
        </div>
        <div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 max-h-48 overflow-y-scroll px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
            {% for item in form.children %}
                {{ form_row(item, { 'attr': { 'data-action': 'multiselect#update', 'data-multiselect-target': 'choice', 'data-label': item.vars.label } }) }}
            {% endfor %}
        </div>
    </div>
{%- endblock multiselect_widget -%}