{% load static %}
{% load i18n %}
{% load admin_url %}
{% load mastodon %}
{% load oauth_token %}
{% load truncate %}
{% load thumb %}
<div id="modals">
    <style>
        .bottom-link {
            margin-top: 30px; text-align: center; margin-bottom: 5px;
        }
        .bottom-link a {
            color: #ccc;
        }
    </style>
    <div class="announcement-modal modal">
        <div class="announcement-modal__head">
            <h4 class="announcement-modal__title">{% trans '公告' %}</h4>
    
            <span class="announcement-modal__close-button modal-close">
                <span class="icon-cross">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <polygon
                            points="20 2.61 17.39 0 10 7.39 2.61 0 0 2.61 7.39 10 0 17.39 2.61 20 10 12.61 17.39 20 20 17.39 12.61 10 20 2.61">
                        </polygon>
                    </svg>
                </span>
            </span>
        </div>
        <div class="announcement-modal__body">
            <ul>
                {% for ann in unread_announcements %}
                    <li class="announcement">
                        <a href="{% url 'management:retrieve' ann.pk %}">
                            <h5 class="announcement__title">{{ ann.title }}</h5>
                        </a>
                        <span class="announcement__datetime">{{ ann.created_time }}</span>
                        <p class="announcement__content">{{ ann.get_plain_content | truncate:200 }}</p>
                    </li>
                    {% if not forloop.last %}
                        <div class="dividing-line" style="border-top-style: dashed;"></div>
                    {% endif %}
                {% endfor %}
            </ul>
            <div class="bottom-link">
                <a href="{% url 'management:list' %}">{% trans '查看全部公告' %}</a>
            </div>
        </div>
    </div>
</div>
<div class="bg-mask"></div>
<script>
    // because the modal and mask elements only exist when there are new announcements
    $(".announcement-modal").show();
    $(".bg-mask").show();
    $(".modal-close").on('click', function () {
        $(this).parents(".modal").hide();
        $(".bg-mask").hide();
    });
</script>
