{% import "includes/macros" as macros %}
{% import "includes/forms/log" as log %}
{% extends "base" %}
{% block content %}
                <div id="notification"
                     class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5 mb-5"
                     role="alert">
                    <h2 class="h2">Nachrichten</h2>
            {% if notifications %}
                    {% if loggedin_user.amount_unread_notifications > 10 %}
                        <div class="text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 text-center pb-3 px-3">
                            Du hast viele ungelesene Benachrichtigungen. Um deine Oberfläche übersichtlich zu halten und wichtige Updates nicht zu verpassen, nimm dir bitte in Zukunft einen kurzen Moment Zeit sie zu überprüfen und als gelesen zu markieren (&#10003;).<br /><a href="/notification/read/all" class="underline">Du kannst hier ausnahmsweise alle als gelesen markieren.</a>

                        </div>
                    {% endif %}
                    <div class="divide-y">
                        {% for notification in notifications %}
                            {% if not notification.read_at %}
                                <div class="relative flex justify-between items-center p-3">
                                    <div class="grow me-4">
                                        <small class="uppercase text-gray-600 dark:text-gray-100">
                                            <strong>{{ notification.category }}</strong> &bullet; {{ notification.created_at | date(format="%d.%m.%Y %H:%M",) }}
                                        </small>
                                        <div class="mt-1">{{ notification.message | safe }}</div>
                                    </div>
                                    <div>
                                        {% if notification.link %}
                                            <a href="{{ notification.link }}" class="inline-block">
                                                <button class="btn btn-primary" type="button">🔗</button>
                                            </a>
                                        {% endif %}
                                        {% if not notification.read_at %}
                                            <a href="/notification/{{ notification.id }}/read" class="inline-block">
                                                <button class="btn btn-primary" type="button">
                                                    &#10003;
                                                    <span class="sr-only">Notification gelesen</span>
                                                </button>
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                    <details class="py-3 border-t rounded-b-md">
                        <summary class="px-3 cursor-pointer">Vergangene Nachrichten (14 Tage)</summary>
                        <div class="divide-y text-sm">
                            {% for notification in notifications %}
                                {% if notification.read_at %}
                                    <div class="p-3 relative">
                                        <small class="uppercase text-gray-600 dark:text-gray-100">
                                            <strong>{{ notification.category }}</strong> &bullet; {{ notification.created_at | date(format="%d.%m.%Y %H:%M") }}
                                        </small>
                                        <div class="mt-1">{{ notification.message | safe }}</div>
                                        {% if notification.link %}
                                            <a href="{{ notification.link }}" class="inline-block">
                                                <button class="btn btn-primary" type="button">🔗</button>
                                            </a>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </details>
            {% endif %}
                </div>

{% endblock content %}