{% extends "base.html" %}


{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ 'assets/stylesheets/extra.css' | url }}">
{% endblock %}



{% block header %}
{{ super() }}
{% endblock %}

{% block announce %}

{% if page.meta and page.meta.announce is defined %}
{%- set announcements = config.extra.announcements | default([]) -%}

{%- if announcements | length > 0 -%}
<style>
    @keyframes atlas-ticker {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    #atlas-announce-outer {
        display: flex !important;
        align-items: center;
        overflow: hidden;
        background: var(--atlas-blue-20);
        color: var(--md-default-fg-color);
        flex-wrap: nowrap;
        gap: 12px;
    }

    #atlas-announce-pinned {
        display: flex;
        gap: 0.4em;
        flex-shrink: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        border-right: 1px solid currentColor;
        white-space: nowrap;
    }

    #atlas-announce-scroll {
        flex: 1;
        overflow: hidden;
        min-width: 0;
    }

    #atlas-announce-track {
        display: inline-flex;
        gap: 2.8em;
        align-items: center;
        white-space: nowrap;
        animation: atlas-ticker 32s linear infinite;
    }

    .atlas-announce-item {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        flex-shrink: 0;
    }

    .twemoji {
        font-size: 1.22em;
        display: inline-flex;
        align-items: center;
    }

    /* Make sure Zensical's dismiss button stays on the line */
    .md-banner__button {
        flex-shrink: 0;
        margin-left: 8px;
    }
</style>

<div id="atlas-announce-outer">
    <!-- Pinned Coordination -->
    <div id="atlas-announce-pinned">
        {%- for item in announcements -%}
        {%- if item.groupname is defined and item.groupname | trim | lower == "coordination" and item.enabled -%}
        {%- set text = item.message | default("") | trim -%}
        {%- set url = item.url | default("#") | trim -%}
        {%- if item.icon %}<span class="twemoji">{% include ".icons/lucide/" ~ item.icon ~ ".svg" %}</span>{% endif -%}
        <strong>Coordination:</strong>
        <span class="atlas-item-text">{{ text[:42] ~ ("…" if text | length > 42 else "") }}</span>
        {%- if url and url != "#" %}<a href="{{ url }}" target="_blank" rel="noopener"
            style="text-decoration: underline;">Learn more</a>{% endif -%}
        {%- endif -%}
        {%- endfor -%}
    </div>

    <!-- Scrolling ticker -->
    <div id="atlas-announce-scroll">
        <div id="atlas-announce-track">
            {%- for item in announcements -%}
            {%- if item.enabled and (item.groupname is undefined or item.groupname | trim | lower != "coordination") -%}
            {%- set group = item.groupname | default("Update") | trim -%}
            {%- set text = item.message | default("") | trim -%}
            {%- set url = item.url | default("#") | trim -%}
            <span class="atlas-announce-item">
                {%- if item.icon %}<span class="twemoji">{% include ".icons/lucide/" ~ item.icon ~ ".svg" %}</span>{%
                endif -%}
                <strong>{{ group }}:</strong>
                {{ text[:40] ~ ("…" if text | length > 40 else "") }}
                {%- if url and url != "#" %}<a href="{{ url }}" target="_blank" rel="noopener"
                    style="text-decoration: underline; margin-left: 0.3em;">→</a>{% endif -%}
            </span>
            {%- endif -%}
            {%- endfor -%}

            <!-- Duplicate -->
            {%- for item in announcements -%}
            {%- if item.enabled and (item.groupname is undefined or item.groupname | trim | lower != "coordination") -%}
            {%- set group = item.groupname | default("Update") | trim -%}
            {%- set text = item.message | default("") | trim -%}
            {%- set url = item.url | default("#") | trim -%}
            <span class="atlas-announce-item">
                {%- if item.icon %}<span class="twemoji">{% include ".icons/lucide/" ~ item.icon ~ ".svg" %}</span>{%
                endif -%}
                <strong>{{ group }}:</strong>
                {{ text[:40] ~ ("…" if text | length > 40 else "") }}
                {%- if url and url != "#" %}<a href="{{ url }}" target="_blank" rel="noopener"
                    style="text-decoration: underline; margin-left: 0.3em;">→</a>{% endif -%}
            </span>
            {%- endif -%}
            {%- endfor -%}
        </div>
    </div>
</div>
{%- endif -%}
{%- endif -%}
{% endblock %}

{% block extrahead %}
{{ super() }}

{% set jetmet = config.extra.jetetmiss %}


{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ 'assets/javascripts/extra.js' | url }}"></script>
<script src="{{ 'assets/javascripts/mathjax.js' | url }}"></script>
<script src="https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js"></script>
{% endblock %}

{% block hero %}
{% if page.meta is defined and 'hero' in page.meta %}
<style>
    :root {
        --hero-height: 100px;
    }

    @media (max-width: 59.9375em) {
        :root {
            --hero-height: 60px;
        }
    }

    .hero-banner {
        display: block;
        width: 100%;
        height: var(--hero-height);
        opacity: 0.6;
        /* Increased to full opacity for better visibility; adjust if a fade is desired */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-bottom: 1px solid var(--md-default-fg-color--lightest);
        margin: 0 !important;
        /* Simplified margins to avoid hacks */
    }

    .hero-banner+* {
        margin-top: 0 !important;
        /* Ensures content abuts the banner cleanly */
    }

    .hero-banner~.md-grid .md-sidebar--primary,
    .hero-banner~.md-grid .md-sidebar--secondary {
        top: calc(var(--md-header-height) + var(--hero-height)) !important;
    }
</style>
<div class="hero-banner" style="background-image: url('{{ page.meta.hero | url }}')" aria-hidden="true"></div>
{% endif %}

{% endblock %}


{% block content %}
{{ super() }}
{% endblock %}