{% load ui_classes ui_props %}

<c-vars variant="surface"
        size="md"
        type="button"
        href=""
        disabled="False"
        loading="auto"
        icon=""
        icon_trailing=""
        icon_variant="outline"
        color="neutral"
        radius="md"
        square="False"
        align="center"
        inset=""
        class=""
        :label_sizes="{ 'xs': 'xs', 'sm': 'xs', 'md': 'sm', 'lg': 'sm', 'xlg': 'sm', }" />
{% ui_class "ui.button" "root" align=align size=size radius=radius padded=square|ui_false variant=variant color=color insetLeft=inset|ui_inset:"left" insetRight=inset|ui_inset:"right" insetTop=inset|ui_inset:"top" insetBottom=inset|ui_inset:"bottom" class=class as root_class %}
{% ui_class "ui.button" "loadingIndicator" as loading_indicator_class %}
{% ui_class "ui.button" "content" align=align as content_class %}
{% ui_class "ui.button" "label" as label_class %}
{% ui_class "ui.button" "icon" position="leading" as leading_icon_class %}
{% ui_class "ui.button" "icon" position="trailing" as trailing_icon_class %}

{% partialdef loading_indicator %}
    <span class="{{ loading_indicator_class }}" data-ui-button-loading-indicator>
        <c-component is="icons.spinner" class="" data-ui-button-spinner />
    </span>
{% endpartialdef %}

{% partialdef button_content %}
    {% partial loading_indicator %}
    <span class="{{ content_class }}" data-ui-button-content>
        {% if icon %}
            <c-component is="icons.{{ icon }}"
                         class="{{ leading_icon_class }}"
                         data-ui-button-icon
                         data-icon="{{ icon }}"
                         data-icon-variant="{{ icon_variant }}"
                         aria-hidden="true" />
        {% endif %}
        {% if slot %}
            <c-ui.text as="span"
                       size="{{ label_sizes|get_item:size }}"
                       color="inherit"
                       weight="normal"
                       truncate="True"
                       class="{{ label_class }}"
                       data-ui-button-label>
                {{ slot }}
            </c-ui.text>
        {% endif %}
        {% if icon_trailing %}
            <c-component is="icons.{{ icon_trailing }}"
                         class="{{ trailing_icon_class }}"
                         data-ui-button-icon="trailing"
                         data-icon="{{ icon_trailing }}"
                         data-icon-variant="{{ icon_variant }}"
                         aria-hidden="true" />
        {% endif %}
    </span>
{% endpartialdef %}

{% if href %}
    <a href="{{ href }}"
       data-ui-button
       data-variant="{{ variant }}"
       data-color="{{ color }}"
       data-size="{{ size }}"
       data-radius="{{ radius }}"
       data-ui-loading-mode="{{ loading|ui_loading_mode }}"
       {% if disabled|ui_bool or loading|ui_bool %} aria-disabled="true" tabindex="-1" {% endif %}
       {% if disabled|ui_bool %} data-disabled="true" data-initial-disabled="true" {% endif %}
       {% if loading|ui_bool %}data-ui-loading data-initial-loading="true" aria-busy="true"{% endif %}
       class="{{ root_class }}"
       {{ attrs }}>
        {% partial button_content %}
    </a>
{% else %}
    <button type="{{ type }}"
            data-ui-button
            data-variant="{{ variant }}"
            data-color="{{ color }}"
            data-size="{{ size }}"
            data-radius="{{ radius }}"
            data-ui-loading-mode="{{ loading|ui_loading_mode }}"
            {% if disabled|ui_bool or loading|ui_bool %}disabled aria-disabled="true"{% endif %}
            {% if disabled|ui_bool %}data-disabled="true" data-initial-disabled="true"{% endif %}
            {% if loading|ui_bool %}data-ui-loading data-initial-loading="true" aria-busy="true"{% endif %}
            class="{{ root_class }}"
            {{ attrs }}>
        {% partial button_content %}
    </button>
{% endif %}