{% load i18n %}

{% if site_icon %}
    <div class="shrink-0">
        <a href="{% url "admin:index" %}">
            {% if site_icon.light and site_icon.dark %}
                <img src="{{ site_icon.dark }}" alt="{% trans 'Home' %}" class="h-8 hidden dark:block"/>

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

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

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