{% load ui_assets ui_classes ui_marks ui_props %}
{% ui_require_asset "trellis:radio" %}

<c-vars value=""
        name=""
        label=""
        description=""
        checked="False"
        disabled="False"
        required="False"
        invalid="False"
        indicator="True"
        placement="leading"
        icon=""
        variant="default"
        color="neutral"
        interaction=""
        size="md"
        input_class=""
        indicator_class=""
        icon_class=""
        content_class=""
        label_class=""
        description_class=""
        class="" />
{% ui_class "ui.radio" "radio" variant=variant size=size class=class as radio_class %}
{% ui_class "ui.radio" "input" class=input_class as input_class_resolved %}
{% ui_class "ui.radio" "indicator" variant=variant size=size class=indicator_class as indicator_class_resolved %}
{% ui_class "ui.radio" "indicatorDot" size=size as dot_class %}
{% ui_class "ui.radio" "menuIndicator" class=indicator_class as menu_indicator_class %}
{% ui_class "ui.radio" "menuIndicatorIcon" as menu_indicator_icon_class %}
{% ui_class "ui.radio" "icon" class=icon_class as icon_class_resolved %}
{% ui_class "ui.radio" "content" class=content_class as content_class_resolved %}
{% ui_class "ui.radio" "label" class=label_class as label_class_resolved %}
{% ui_class "ui.radio" "description" class=description_class as description_class_resolved %}
{% if variant == "cards" %}
    {% ui_class "ui.card" "root" size=size padding="4" paddingX="0" paddingY="0" gap="4" gapX="0" gapY="0" margin="0" marginX="0" marginY="0" class=radio_class as card_radio_class %}
{% endif %}

{% partialdef radio_content %}
    <input type="radio"
           data-ui-radio-input
           class="{{ input_class_resolved }}"
           {% if name %}name="{{ name }}"{% endif %}
           {% if value %}value="{{ value }}"{% endif %}
           {% if checked|ui_bool %}checked data-checked{% endif %}
           {% if variant == "menu" %}tabindex="-1" aria-hidden="true"{% endif %}
           {% if disabled|ui_bool %}disabled{% endif %}
           {% if required|ui_bool %}required{% endif %}
           {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
           {{ attrs }}>
    {% if indicator|ui_bool and label or indicator|ui_bool and description %}
        <span data-ui-radio-indicator
              data-class="{{ indicator_class }}"
              data-ui-selection-recipe="indicator"
              {% if checked|ui_bool %}data-checked{% endif %}
              {% if disabled|ui_bool %}data-disabled{% endif %}
              {% if invalid|ui_bool %}data-invalid{% endif %}
              {% if variant == "menu" %}hidden{% endif %}
              class="{{ indicator_class_resolved }}"
              aria-hidden="true">
            <span data-ui-radio-indicator-dot
                  {% if checked|ui_bool %}data-checked{% endif %}
                  class="{{ dot_class }}"></span>
        </span>
    {% endif %}
    {% if indicator|ui_bool %}
        <span data-ui-radio-menu-indicator
              {% if checked|ui_bool %}data-selected{% endif %}
              {% if variant != "menu" %}hidden{% endif %}
              class="{{ menu_indicator_class }}"
              aria-hidden="true">
            <span data-ui-radio-menu-indicator-icon
                  data-ui-selection-mark="selected"
                  class="{{ menu_indicator_icon_class }}"
                  aria-hidden="true">
                {% ui_selection_mark "selected" %}
            </span>
        </span>
    {% endif %}
    {% if icon %}
        <c-component is="icons.{{ icon }}"
                     data-ui-radio-icon
                     data-icon="{{ icon }}"
                     class="{{ icon_class_resolved }}"
                     aria-hidden="true" />
    {% endif %}
    {% if label or description %}
        <span data-ui-radio-content class="{{ content_class_resolved }}">
            {% if label %}
                <c-ui.text color="inherit"
                           weight="medium"
                           class="{{ label_class_resolved }}"
                           data-ui-radio-label>
                    {{ label }}
                </c-ui.text>
            {% endif %}
            {% if description %}
                <c-ui.text color="inherit"
                           size="2"
                           class="{{ description_class_resolved }}"
                           data-ui-radio-description>
                    {{ description }}
                </c-ui.text>
            {% endif %}
        </span>
    {% else %}
        {{ slot }}
    {% endif %}
{% endpartialdef %}

{% if variant == "cards" %}
    <label data-ui-card
           x-data="UiRadio"
           data-class="{{ class }}"
           data-ui-selection-root
           data-ui-option-selection="mark"
           data-ui-selection-color
           data-color="{{ color }}"
           data-ui-interaction="{% if interaction %}{{ interaction }}{% else %}combined{% endif %}"
           data-ui-surface="+1"
           data-ui-elevation="1"
           data-size="{{ size }}"
           data-padding="4"
           data-padding-x="0"
           data-padding-y="0"
           data-gap="4"
           data-gap-x="0"
           data-gap-y="0"
           data-margin="0"
           data-margin-x="0"
           data-margin-y="0"
           data-ui-radio
           {% if variant == "menu" %}data-ui-menu-item data-ui-option-recipe data-keep-open="true" role="menuitemradio" aria-checked="{% if checked|ui_bool %}true{% else %}false{% endif %}" tabindex="-1"{% endif %}
           data-variant="{{ variant }}"
           data-placement="{{ placement }}"
           {% if not indicator|ui_bool %}data-indicator="false"{% endif %}
           {% if value %}data-value="{{ value }}"{% endif %}
           {% if name %}data-name="{{ name }}"{% endif %}
           {% if checked|ui_bool %}data-prop-checked data-checked{% if variant == "menu" %} data-selected{% endif %} data-state="checked"{% else %}data-state="unchecked"{% endif %}
           {% if disabled|ui_bool %}data-prop-disabled data-disabled{% endif %}
           {% if required|ui_bool %}data-prop-required data-required{% endif %}
           {% if invalid|ui_bool %}data-prop-invalid data-invalid{% endif %}
           class="{{ card_radio_class }}">
        {% partial radio_content %}
    </label>
{% else %}
    <label x-data="UiRadio"
           data-ui-radio
           data-class="{{ class }}"
           data-ui-selection-root
           data-ui-option-selection="mark"
           {% if variant == "menu" %}data-ui-menu-item data-ui-option-recipe data-keep-open="true" role="menuitemradio" aria-checked="{% if checked|ui_bool %}true{% else %}false{% endif %}" tabindex="-1"{% endif %}
           data-variant="{{ variant }}"
           {% if variant == "pills" %}data-ui-selection-color data-color="{{ color }}" data-ui-interaction="{% if interaction %}{{ interaction }}{% else %}tonal{% endif %}"{% endif %}
           data-size="{{ size }}"
           data-placement="{{ placement }}"
           {% if not indicator|ui_bool %}data-indicator="false"{% endif %}
           {% if value %}data-value="{{ value }}"{% endif %}
           {% if name %}data-name="{{ name }}"{% endif %}
           {% if checked|ui_bool %}data-prop-checked data-checked{% if variant == "menu" %} data-selected{% endif %} data-state="checked"{% else %}data-state="unchecked"{% endif %}
           {% if disabled|ui_bool %}data-prop-disabled data-disabled{% endif %}
           {% if required|ui_bool %}data-prop-required data-required{% endif %}
           {% if invalid|ui_bool %}data-prop-invalid data-invalid{% endif %}
           class="{{ radio_class }}">
        {% partial radio_content %}
    </label>
{% endif %}