show information that people should mark msgs as read if there are more than 10 unread msgs

templates/includes/macros.html.tera

@@ -35,9 +35,9 @@
             </div>
             <div class="flex items-center">
                 {% if loggedin_user.amount_unread_notifications > 0 %}
-                    <a href="/#notification" class="relative inline-flex items-end ms-2 me-3">
-                      <svg 
-                            height="20"
+                    <a href="/#notification"
+                       class="relative inline-flex items-end ms-2 me-3">
+                        <svg height="20"
                              width="24"
                              aria-hidden="true"
                              xmlns="http://www.w3.org/2000/svg"

templates/index.html.tera

@@ -2,7 +2,11 @@
 {% extends "base" %}
 {% block content %}
     <div class="max-w-screen-lg w-full">
-        <h1 class="h1">Ruder<wbr/>assistent</h1>
+        <h1 class="h1">
+            Ruder
+            <wbr />
+            assistent
+        </h1>
         <div class="grid gap-3 my-5">
             <div class="m-auto">
                 <a href="/planned"
@@ -11,9 +15,15 @@
                     <span class="text-xl px-3">Geplante Ausfahrten</span>
                 </a>
             </div>
-            <div id="notification" class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
+            <div id="notification"
+                 class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
                  role="alert">
                 <h2 class="h2">Nachrichten</h2>
+                {% if notifications | length > 10 %}
+                    <div class="text-yellow-800 dark:text-yellow-300 text-center p-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 %}