{% load ui_classes %}

<c-vars name=""
        logo=""
        alt=""
        href=""
        display="full"
        size="md"
        class=""
        :text_sizes="{ 'xs': 'xs', 'sm': 'sm', 'md': 'sm', 'lg': 'base', 'xlg': 'base' }" />
{% ui_class "ui.brand" "root" size=size class=class as root_class %}
{% ui_class "ui.brand" "logo" size=size as logo_class %}
{% ui_class "ui.brand" "image" as image_class %}
{% ui_class "ui.brand" "text" as text_class %}

{% partialdef brand_content %}
    {% if display != "text" %}
        {% if slot or logo %}
            <span class="{{ logo_class }}"
                  data-ui-brand-logo
                  {% if name %}aria-hidden="true"{% endif %}>
                {% if slot %}
                    {{ slot }}
                {% else %}
                    <c-ui.image src="{{ logo }}"
                                alt="{% if name %}{% else %}{{ alt }}{% endif %}"
                                fit="contain"
                                class="{{ image_class }}"
                                data-ui-brand-image />
                {% endif %}
            </span>
        {% endif %}
    {% endif %}
    {% if display != "logo" and name %}
        <c-ui.text as="span"
                   size="{{ text_sizes|get_item:size }}"
                   weight="semibold"
                   color="inherit"
                   truncate="True"
                   class="{{ text_class }}"
                   data-ui-brand-text>
            {{ name }}
        </c-ui.text>
    {% endif %}
{% endpartialdef %}

{% if href %}
    <a href="{{ href }}"
       data-ui-brand
       data-display="{{ display }}"
       data-size="{{ size }}"
       {% if display == "logo" and name %}aria-label="{{ name }}"{% endif %}
       class="{{ root_class }}"
       {{ attrs }}>
        {% partial brand_content %}
    </a>
{% else %}
    <span data-ui-brand
          data-display="{{ display }}"
          data-size="{{ size }}"
          {% if display == "logo" and name %}role="img" aria-label="{{ name }}"{% endif %}
          class="{{ root_class }}"
          {{ attrs }}>
        {% partial brand_content %}
    </span>
{% endif %}