{% 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 %}
                    {% for notification in notifications %}
                        <article class="card">
                            <section class="card-main">
                                {{ notification.notification.json }}
                            </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 %}