{% extends "default.html" %}
{% block title %}
    {% trans %}Notifications{% endtrans %}
{% endblock %}
{% block breadcrumbs %}
    <li><a href="/notifications">{% trans %}Notifications{% endtrans %}</a></li>
{% endblock %}
{% block content %}
    <x-vbox>
        <x-frame style="--width: 896px;" class="flexible-space">
            <x-vbox>
                {% if notifications %}
                    <form method="post" action="/notifications/mark-all-read">
                        <button type="submit">{% trans %}Mark all as read{% endtrans %}</button>
                    </form>
                    {% for notification in notifications %}
                        <article class="card card-horizontal">
                            <section class="card-main flexible-space">
                                {{ notification.notification.timestamp | strftime("%A, %e %B %Y, %H:%M:%S") }}
                                {% if notification.notification.data["type"] == "welcome" %}
                                    <h2>{% trans %}Welcome{% endtrans %}</h2>
                                {% endif %}
                            </section>
                            <section>
                                {% if notification.attention_level %}
                                    <button hx-post="/notifications/{{ notification.id }}/read" hx-swap="outerHTML">
                                        {% trans %}Mark as read{% endtrans %}
                                    </button>
                                {% else %}
                                    <button hx-post="/notifications/{{ notification.id }}/unread" hx-swap="outerHTML">
                                        {% trans %}Mark as unread{% endtrans %}
                                    </button>
                                {% endif %}
                            </section>
                        </article>
                    {% endfor %}
                {% else %}
                    <p>{% trans %}When you get notifications, they'll be shown here.{% endtrans %}</p>
                {% endif %}
            </x-vbox>
        </x-frame>
    </x-vbox>
{% endblock %}