{% load humanize %}{% load i18n %}{% load utilities %}
{% with announcement.id|uuid as uuid %}
<aside
        class="notification mb-1 p-3{% if not admin_mode %} is-hidden{% endif %} transition-y {% if announcement.display_type %}has-background-{{ announcement.display_type }}{% endif %}"
    {% if not admin_mode %}data-hide="hide_announcement_{{ announcement.id }}"{% endif %}
>
    <details>
        <summary>
            {% if announcement.event_date %}
            <strong>{{ announcement.event_date|naturalday|title }}:</strong>
            {% endif %}

            {{ announcement.preview|safe }}

            {% if announcement.content %}
            <span class="details-close mt-4 mr-4 icon icon-x is-small" aria-hidden></span>
            {% endif %}
        </summary>
        {% if announcement.content %}
        <div class="mb-2 mt-2" id="announcement_{{ uuid }}">
            <div class="box is-shadowless mb-0">
                {{ announcement.content|safe }}
            </div>
        </div>
        {% endif %}
    </details>
    <div class="is-flex mt-0 help">
        <p>{% blocktrans with user_path=announcement.user.local_path username=announcement.user.display_name %}Posted by <a href="{{ user_path }}">{{ username }}</a>{% endblocktrans %}</p>
        {% if not admin_mode %}
        <span class="mr-2 ml-2" aria-hidden="true">&middot;</span>
        <a class="set-display" data-id="hide_announcement_{{ announcement.id }}" data-value="true">{% trans "Dismiss message" %}</a>
        {% endif %}
    </div>
</aside>
{% endwith %}