{% extends "_base.html" %}

{% comment %}
    A club's skin, used on its subdomain. `club` comes from the branding context
    processor, which reads the tenant resolved by ClubTenantMiddleware.
{% endcomment %}

{% block title %}
    {% block head_title %}{% endblock head_title %} · {{ club.name }}
{% endblock title %}

{% block extra %}
    {% if club.primary_color or club.secondary_color %}
        {% comment %}
            daisyUI declares its theme variables inside `@layer base`, and unlayered styles
            beat every layered rule regardless of specificity -- so this plain :root wins
            without any !important or selector games. primary_content_color / secondary_content_color
            are computed from the club's colours so a pale brand doesn't end up with
            white-on-yellow buttons or initials.
        {% endcomment %}
        <style>
            :root {
                {% if club.primary_color %}
                    --color-primary: {{ club.primary_color }};
                    --color-primary-content: {{ club.primary_content_color }};
                {% endif %}
                {% if club.secondary_color %}
                    --color-secondary: {{ club.secondary_color }};
                    --color-secondary-content: {{ club.secondary_content_color }};
                {% endif %}
            }
        </style>
    {% endif %}
{% endblock extra %}

{% block brand %}
    {# min-w-0 on both the link and the text column: without it a flex child's default min-width:auto refuses to shrink past the club name's intrinsic width, so `truncate` never gets the chance to kick in and the name pushes the header wider than the viewport instead of ellipsizing. The avatar and tagline shrink/hide below `sm` for the same reason -- a long club name at full size has nowhere left to give. #}
    <a class="flex min-w-0 flex-row items-center gap-2 sm:gap-3" href="/">
        {% if club.logo %}
            {# The ring is the club's own primary colour -- a plain frame around whatever crest they uploaded. #}
            <div class="avatar shrink-0">
                <div class="w-10 rounded-full bg-base-100 ring-2 ring-primary ring-offset-2 ring-offset-base-100 sm:w-16">
                    <img class="club-logo object-contain" src="{{ club.logo.url }}" alt="{{ club.name }}">
                </div>
            </div>
        {% else %}
            {# Never the RosterChief mark: that would pass our branding off as the club's own. #}
            <div class="avatar avatar-placeholder shrink-0">
                <div class="w-10 rounded-full bg-secondary text-secondary-content sm:w-16">
                    <span class="font-roboto text-sm font-bold sm:text-xl">{{ club.initials }}</span>
                </div>
            </div>
        {% endif %}
        <div class="flex min-w-0 flex-col gap-1">
            <div class="truncate font-roboto text-lg font-bold tracking-wider sm:text-2xl">{{ club.name }}</div>
            <div class="hidden truncate font-mono text-xs font-semibold text-base-content/50 sm:block">Powered by RosterChief</div>
        </div>
    </a>
{% endblock brand %}
