{% extends 'settings/layout.html' %}
{% load i18n %}{% load humanize %}
{% block title %}{% trans "Announcements" %}{% endblock %}

{% block header %}{% trans "Announcements" %}{% endblock %}

{% block edit-button %}
<a href="{% url 'settings-announcements-edit' %}">
    {% trans "Create Announcement" as text %}
    <span class="icon icon-plus" title="{{ text }}" aria-hidden="true"></span>
    <span class="is-sr-only-mobile">{{ text }}</span>
</a>
{% endblock %}

{% block panel %}
<div class="block table-container">
    <table class="table is-striped">
        <tr>
            <th>
                {% url 'settings-announcements' as url %}
                {% trans "Date added" as text %}
                {% include 'snippets/table-sort-header.html' with field="created_date" sort=sort text=text %}
            </th>
            <th>
                {% trans "Preview" as text %}
                {% include 'snippets/table-sort-header.html' with field="preview" sort=sort text=text %}
            </th>
            <th>
                {% trans "Start date" as text %}
                {% include 'snippets/table-sort-header.html' with field="start_date" sort=sort text=text %}
            </th>
            <th>
                {% trans "End date" as text %}
                {% include 'snippets/table-sort-header.html' with field="end_date" sort=sort text=text %}
            </th>
            <th>
                {% trans "Status" as text %}
                {% include 'snippets/table-sort-header.html' with field="active" sort=sort text=text %}
            </th>
            <th>
                {% trans "Actions" %}
            </th>
        </tr>
        {% for announcement in announcements %}
        <tr>
            <td>{{ announcement.created_date|naturalday }}</td>
            <td><a href="{% url 'settings-announcements' announcement.id %}">{{ announcement.preview }}</a></td>
            <td>{{ announcement.start_date|naturaltime|default:'' }}</td>
            <td>{{ announcement.end_date|naturaltime|default:'' }}</td>
            <td>{% if announcement.active %}{% trans "active" %}{% else %}{% trans "inactive" %}{% endif %}</td>
            <td>
                <form class="control" action="{% url 'settings-announcements-delete' announcement.id %}" method="post">
                    {% csrf_token %}
                    <button type="submit" class="button is-danger is-light is-small">
                        <span class="icon icon-x m-0-mobile" aria-hidden="true"></span>
                        <span class="is-sr-only-mobile">{% trans "Delete" %}</span>
                    </button>
                </form>
            </td>
        </tr>
        {% endfor %}
        {% if not announcements %}
        <tr><td colspan="5"><em>{% trans "No announcements found" %}</em></td></tr>
        {% endif %}
    </table>
</div>

{% include 'snippets/pagination.html' with page=announcements path=request.path %}
{% endblock %}