{% 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 einen Moment Zeit sie zu überprüfen und als gelesen zu markieren (&#10003;).
                        </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 %}