{% load ui_classes ui_props %}

<c-vars href=""
        variant="default"
        color="neutral"
        size="2"
        weight="normal"
        font="body"
        truncate="False"
        icon=""
        icon_trailing=""
        icon_variant="outline"
        class="" />
{% ui_class "ui.link" "root" variant=variant color=color size=size weight=weight font=font truncate=truncate|ui_bool class=class as root_class %}
{% ui_class "ui.link" "label" as label_class %}
{% ui_class "ui.link" "icon" position="leading" as leading_icon_class %}
{% ui_class "ui.link" "icon" position="trailing" as trailing_icon_class %}

<a href="{{ href }}"
   data-ui-link
   data-variant="{{ variant }}"
   data-color="{{ color }}"
   class="{{ root_class }}"
   {{ attrs }}>
    {% if icon %}
        <c-component is="icons.{{ icon }}"
                     class="{{ leading_icon_class }}"
                     data-ui-link-icon
                     data-icon="{{ icon }}"
                     data-icon-variant="{{ icon_variant }}"
                     aria-hidden="true" />
    {% endif %}
    {% if slot %}<span class="{{ label_class }}" data-ui-link-label>{{ slot }}</span>{% endif %}
    {% if icon_trailing %}
        <c-component is="icons.{{ icon_trailing }}"
                     class="{{ trailing_icon_class }}"
                     data-ui-link-icon="trailing"
                     data-icon="{{ icon_trailing }}"
                     data-icon-variant="{{ icon_variant }}"
                     aria-hidden="true" />
    {% endif %}
</a>