{% 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>
                                {% elif notification.notification.data["type"] == "commit" %}
                                    {% set commit = db.session.get(Commit, notification.notification.data["repo"] + "/" + notification.notification.data["commit"]) %}
                                    <h2><a href="{{ notification.notification.data['repo'] + '/commit/' + notification.notification.data['commit'] }}">{{ commit.message | split("\n\n", 1) | first }}</a></h2>
                                    <p>
                                        Commited by <a href="/{{ commit.owner.username }}">{{ commit.owner.username }}</a>
                                        in <a href="{{ commit.repo.route }}">{{ commit.repo.owner.username }}/{{ commit.repo.name }}</a>
                                    </p>
                                {% 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 %}