{% load static wagtailiconchooser_tags i18n %}

{% if latest_active_alert %}
    <style>
        /*
         * Full-bleed alert strip, slim density (36px). Colours come from the
         * CAP severity mapping — the same tokens the nav_left widget uses:
         *   background_color -> strip tint      border_color -> accent, rule, text
         *   icon_color       -> glyph
         */
        .top-alert-wrapper {
            width: 100%;
            border-inline-start: 5px solid transparent;
            border-bottom: 1px solid transparent;
        }

        .top-alert-wrapper .top-alert-link {
            display: block;
            color: inherit;
            text-decoration: none;
        }

        .top-alert-wrapper .top-alert-container {
            height: 36px;
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .top-alert-wrapper .alert-icon-wrapper {
            position: relative;
            flex: 0 0 26px;
            width: 26px;
            height: 26px;
            border: 2px solid #fff;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: pulse 2s infinite;
        }

        .top-alert-wrapper .alert-icon-wrapper svg {
            height: 70%;
            width: 70%;
            fill: currentColor;
        }

        .top-alert-wrapper .alert-warning {
            flex: 0 0 auto;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #fff;
            padding: 2px 8px;
            border-radius: 3px;
        }

        .top-alert-wrapper .alert-headline {
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        .top-alert-wrapper .top-alert-link:hover .alert-headline {
            text-decoration: underline;
        }

        .top-alert-wrapper .alert-severity-label {
            margin-inline-start: auto;
            flex: 0 0 auto;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 10px;
            border-radius: 999px;
            background-color: rgba(255, 255, 255, .65);
            white-space: nowrap;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
            }
            100% {
                box-shadow: 0 0 0 12px rgba(0, 0, 0, 0);
            }
        }

        @media screen and (max-width: 768px) {
            .top-alert-wrapper .alert-severity-label {
                display: none;
            }
        }
    </style>

    <div class="top-alert-wrapper"
         data-alert-style="{{ alert_style }}"
         style="background-color: {{ latest_active_alert.severity.background_color }};">
        <a class="top-alert-link" href="{{ latest_active_alert.url }}">
            <div class="container top-alert-container">
                {% if latest_active_alert.event_icon %}
                    <span class="alert-icon-wrapper"
                          style="background-color: {{ latest_active_alert.severity.background_color }};
                                  {% if latest_active_alert.severity.icon_color %}color: {{ latest_active_alert.severity.icon_color }};{% endif %}">
                        {% svg_icon name=latest_active_alert.event_icon %}
                    </span>
                {% endif %}
                <span class="alert-warning"
                      style="background-color: {{ latest_active_alert.severity.border_color }};">
                    {% translate "Alert" %}
                </span>
                <span class="alert-headline" style="color: {{ latest_active_alert.severity.border_color }};">
                    {% if latest_active_alert.properties.headline %}
                        {{ latest_active_alert.properties.headline }}
                    {% else %}
                        {{ latest_active_alert.title }}
                    {% endif %}
                </span>
                <span class="alert-severity-label" style="color: {{ latest_active_alert.severity.border_color }};">
                    {# severity.label is already a lazy gettext string from SEVERITY_MAPPING #}
                    {{ latest_active_alert.severity.label }}
                </span>
            </div>
        </a>
    </div>
{% endif %}