{% set announcements = config.extra.announcement | default([]) %}

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

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

    #atlas-announce-outer {
        display: flex;
        align-items: center;
        width: 100%;
        overflow: hidden;
    }

    #atlas-announce-pinned {
        display: flex;
        align-items: center;
        gap: 0.4em;
        flex-shrink: 0;
        padding: 0 0.5em 0 0.5em;
        border-right: 1px solid currentColor;
        white-space: nowrap;
        overflow: hidden;
        max-width: 40%;
    }

    #atlas-announce-pinned .atlas-item-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

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

    #atlas-announce-track {
        display: inline-flex;
        gap: 2.5em;
        align-items: center;
        padding: 0 2em;
        white-space: nowrap;
    }

    .atlas-announce-item {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        flex-shrink: 0;
        white-space: nowrap;
    }
</style>

<div id="atlas-announce-outer">
    <div id="atlas-announce-pinned">
        {% for item in announcements %}
        {% if item.groupname | default("") | trim | lower == "coordination" %}
        {% set text = item.text | default("") | trim %}
        {% set url = item.url | default("#") | trim %}
        <strong style="flex-shrink: 0;">Coordination</strong><span style="flex-shrink: 0;">:</span>
        <span class="atlas-item-text">{{ text[:40] ~ ("…" if text | length > 40 else "") }}</span>
        {% if url and url != "#" %}
        <a href="{{ url }}" target="_blank" rel="noopener" style="text-decoration: underline; flex-shrink: 0;">Learn
            more</a>
        {% endif %}
        {% endif %}
        {% endfor %}
    </div>

    <div id="atlas-announce-scroll">
        <div id="atlas-announce-track">
            {% for item in announcements %}
            {% if item.groupname | default("") | trim | lower != "coordination" %}
            {% set group = item.groupname | default("Update") | trim %}
            {% set text = item.text | default("") | trim %}
            {% set url = item.url | default("#") | trim %}
            {% set date = item.date | default("") | trim %}
            <span class="atlas-announce-item" data-date="{{ date }}">
                <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.2em;">see URL</a>
                {% endif %}
            </span>
            {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

{% endif %}