{% load i18n %}

{% if site_icon %}
    <div class="shrink-0">
        <{% if site_dropdown %}span{% else %}a href="{% url "admin:index" %}"{% endif %}>
        {% if site_icon.light and site_icon.dark %}
            <img src="{{ site_icon.dark }}" alt="{% trans 'Home' %}" class="h-[38px] hidden dark:block"/>

            <img src="{{ site_icon.light }}" alt="{% trans 'Home' %}" class="block h-[38px] dark:hidden" />
        {% else %}
            <img src="{{ site_icon }}" class="h-[38px]" alt="{% trans 'Home' %}" />
        {% endif %}
    </{% if site_dropdown %}span{% else %}a{% endif %}>
    </div>
{% else %}
    <{% if site_dropdown %}span{% else %}a href="{% url "admin:index" %}"{% endif %} class="bg-primary-600 flex h-[38px] items-center justify-center rounded-default shrink-0 text-white text-xs w-[38px]">
    <span class="material-symbols-outlined md-18">{% if site_symbol %}{{ site_symbol }}{% else %}settings{% endif %}</span>
    </{% if site_dropdown %}span{% else %}a{% endif %}>
{% endif %}

<div class="flex flex-col gap-0.5 grow justify-center min-w-0">
    <div class="text-font-important-light leading-normal tracking-tight dark:text-font-important-dark *:truncate {% if site_subheader %}xl:text-sm{% else %}xl:text-base{% endif %}">
        {{ branding }}
    </div>

    {% if site_subheader %}
        <div class="font-normal text-font-subtle-light text-xs dark:text-font-subtle-dark">
            {{ site_subheader }}
        </div>
    {% endif %}
</div>
