{% 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 %}
    <a class="flex flex-row items-center 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">
                <div class="w-16 rounded-full bg-base-100 ring-2 ring-primary ring-offset-2 ring-offset-base-100">
                    <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">
                <div class="w-16 rounded-full bg-secondary text-secondary-content">
                    <span class="font-roboto text-xl font-bold">{{ club.initials }}</span>
                </div>
            </div>
        {% endif %}
        <div class="flex flex-col gap-1">
            <div class="font-roboto text-2xl font-bold tracking-wider">{{ club.name }}</div>
            <div class="font-mono text-xs font-semibold text-base-content/50">Powered by RosterChief</div>
        </div>
    </a>
{% endblock brand %}