{# _form_radio.html.twig - Template dédié pour les boutons radio #}
{% set hasError = field.vars.errors|length > 0 %}
{% set isRequired = field.vars.required %}

<div class="radio-group">
    <div class="mb-2">
        <label class="block text-sm font-medium {{ hasError ? 'text-red-700' : 'text-gray-700' }}">
            {{ field.vars.label }}
            {% if isRequired %}
                <span class="text-red-500">*</span>
            {% endif %}
        </label>
    </div>

    <div class="flex flex-wrap gap-4">
        {% for child in field %}
            <div class="min-w-[150px] relative">
                <div class="flex items-center">
                    {{ form_widget(child, {
                        'attr': (attr|default({})) | merge({
                            'class': 'peer absolute opacity-0 w-full h-full top-0 left-0 cursor-pointer z-10',
                            'data-action': attr is defined and attr['data-action'] is defined ? attr['data-action'] : 'change->live#action',
                            'data-live-action-param': attr is defined and attr['data-live-action-param'] is defined ? attr['data-live-action-param'] : 'refreshForm'
                        })
                    }) }}
                    <div class="w-5 h-5 border border-gray-300 rounded-full flex items-center justify-center mr-2 peer-checked:border-blue-500 peer-checked:border-2 peer-focus:ring-2 peer-focus:ring-blue-300 peer-focus:ring-offset-1">
                        <div class="w-2.5 h-2.5 rounded-full bg-blue-500 hidden peer-checked:block"></div>
                    </div>
                    <label for="{{ child.vars.id }}" class="text-sm font-medium text-gray-700 cursor-pointer select-none">
                        {{ child.vars.label }}
                    </label>
                </div>
            </div>
        {% endfor %}
    </div>

    {% if hasError %}
        <div class="mt-2 text-sm text-red-600">{{ form_errors(field) }}</div>
    {% endif %}
</div>