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

{%- block form_row -%}
    {%- set row_attr = row_attr|merge({ 'class': (row_attr.class|default('') ~ ' mb-4')|trim }) -%}
    {%- set widget_attr = {} -%}
    {%- if help is not empty -%}
        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
    {%- endif -%}
    {%- if form.vars.expanded is defined and form.vars.expanded -%}
        <div class="pb-4">
            <fieldset class="border border-primary-bg">
                <legend class="{{ html_classes('w-full bg-primary-bg p-2 font-semibold uppercase', { 'text-red-500': form.vars.errors | length > 0 }) }}">
                    {{ label }}
                    {%- if required -%}<span>*</span>{%- endif -%}
                </legend>
                {{- form_widget(form, widget_attr) -}}
            </fieldset>
            {{- form_errors(form) -}}
            {{- form_help(form) -}}
        </div>
    {%- else -%}
        <div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
            {{- form_label(form) -}}
            {{- form_widget(form, widget_attr) -}}
            {{- form_errors(form) -}}
            {{- form_help(form) -}}
        </div>
    {%- endif -%}
{%- endblock form_row -%}

{%- block choice_widget_expanded -%}
    <table class="w-full table-fixed border-collapse">
        {%- for child in form %}
            {% set choiceData = form.vars.choices[loop.index0].data %}
            {% set description = child.vars.attr['data-description']|default(null) %}
            {% set isReadonly = child.vars.attr.readonly is defined %}
            {%- set child_attr = {} -%}
            {%- if attr['hx-trigger'] is defined -%}
                {%- set child_attr = {
                    'hx-trigger': attr['hx-trigger'],
                    'hx-post': attr['hx-post'],
                    'hx-target': attr['hx-target']|default('#main-content'),
                    'hx-swap': attr['hx-swap']
                } -%}
            {%- endif -%}
            <tr>
                <td class="border border-primary-bg p-2 align-top">
                    <div>{{- child.vars.label -}}</div>
                    {%- if description is not null -%}
                        <div {{ stimulus_controller('tooltip') }}>
                            <button type="button" data-tooltip-target="trigger" class="text-sm text-primary-light">
                                Details
                            </button>
                            <template data-tooltip-target="template">
                                <div class="text-sm">{{ description|raw }}</div>
                            </template>
                        </div>
                    {%- endif -%}
                </td>
                {% if choiceData %}
                    <td class="border border-primary-bg p-2 align-top w-24 text-right whitespace-nowrap">
                        {% if choiceData.price is defined %}
                            {{ choiceData.price | format_service_price }}
                        {% endif %}
                    </td>
                {% endif %}
                <td class="border border-primary-bg p-2 align-top w-12 text-center">
                    {% set childTooltip = child.vars.attr['data-tooltip']|default(null) %}
                    <div class="{{ html_classes({ 'cursor-not-allowed': isReadonly }) }}"{% if childTooltip is not null %} {{ stimulus_controller('tooltip', { 'content': childTooltip }) }}{% endif %}>
                        <div class="{{ isReadonly ? 'pointer-events-none' : '' }}">
                            {{- form_widget(child, { 'attr': child_attr }) -}}
                        </div>
                    </div>
                </td>
            </tr>
        {% endfor -%}
    </table>
{%- endblock choice_widget_expanded -%}