{# Flowbite-style selectable radio cards with optional title/description/icon/image #}
<div>
    <label class="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1.5">
        {{ field.get_label() }}{% if field.is_required() %}<span class="text-red-500 ml-0.5">*</span>{% endif %}</label>

    <ul class="select-none flex flex-col gap-4 md:flex-row md:flex-wrap md:items-stretch w-full">
        {% for opt in field.get_options() %}
            {% if opt is mapping %}
                {% set value = opt.value if opt.value is defined else opt['value'] %}
                {% set title = opt.title if opt.title is defined else (opt.label if opt.label is defined else value) %}
                {% set description = opt.description if opt.description is defined else (opt.desc if opt.desc is defined else None) %}
                {% set icon = opt.icon if opt.icon is defined else None %}
                {% set image = opt.image if opt.image is defined else None %}
            {% elif opt is iterable and opt|length > 1 %}
                {% set value = opt[0] %}
                {% set title = opt[1] %}
                {% set description = opt[2] if opt|length > 2 else None %}
                {% set icon = None %}
                {% set image = None %}
            {% else %}
                {% set value = opt %}
                {% set title = opt %}
                {% set description = None %}
                {% set icon = None %}
                {% set image = None %}
            {% endif %}

            {% set input_id = field.get_key() ~ "-" ~ loop.index0 %}
            {# `group` on <li> lets us use group-has-[input:checked] on any descendant,
               bypassing the peer-sibling limitation of `peer-checked:`. #}
            <li class="w-full md:flex-1 md:min-w-[120px] group">
                <input type="radio" id="{{ input_id }}" name="{{ field.get_key() }}" value="{{ value }}"
                       class="hidden peer" {% if current == value %}checked{% endif %}
                       {% if field.is_required() %}required{% endif %}>
                <label for="{{ input_id }}"
                       class="flex flex-col h-full items-start justify-between w-full p-2 md:p-3
                        text-secondary-900 dark:text-secondary-100 bg-neutral-primary-soft
                        dark:bg-secondary-900 border border-secondary-200 dark:border-secondary-700
                         rounded-base cursor-pointer
                              hover:bg-neutral-secondary-medium dark:hover:bg-secondary-950
                              peer-checked:hover:bg-brand-subtle peer-checked:bg-brand-softer dark:peer-checked:bg-brand-softer
                              peer-checked:border-brand-subtle dark:peer-checked:border-primary-500
                              peer-checked:text-fg-brand-strong dark:peer-checked:text-secondary-100">
                    <div class="flex items-center gap-3 flex-wrap w-full">
                        {% if icon %}
                            {# group-has-[input:checked] on the <li> ancestor reaches into any depth
                               of nesting — unlike peer-checked which only works on direct siblings.
                               The SVG inherits currentColor so toggling text-color here changes the icon. #}
                            <div class="shrink-0 text-secondary-400 dark:text-secondary-500
                                        group-has-[input:checked]:text-primary-500
                                        dark:group-has-[input:checked]:text-primary-400">
                                {% if icon.strip().startswith("<svg") %}
                                    {{ icon|safe }}
                                {% else %}
                                    {# Let the SVG inherit the label's color (stroke=currentColor) so
                                       peer-checked color on the label cascades to the icon. Avoid
                                       setting explicit text color on the SVG here. #}
                                    {{ render_icon(icon, "w-5 h-5")|safe }}
                                {% endif %}
                            </div>
                        {% elif image %}
                            <img src="{{ image }}" alt="{{ title }}" class="w-7 h-7 rounded"/>
                        {% endif %}
                        <div class="flex-1 min-w-0">
                            <div class="font-medium truncate">{{ title }}</div>
                        </div>
                    </div>
                    {% if description %}
                        <div class="mt-2 text-sm text-secondary-500 w-full">{{ description }}</div>
                    {% endif %}
                </label>
            </li>
        {% endfor %}
    </ul>

    {% if has_error %}
        <p class="text-xs text-red-600 dark:text-red-400 mt-1">{{ errors[field.get_key()] }}</p>
    {% elif field.get_help_text() %}
        <p class="text-xs text-secondary-400 dark:text-secondary-500 mt-1">{{ field.get_help_text() }}</p>
    {% endif %}
</div>