[TASK] add faqs for cox

templates/faq.html.tera

@@ -3,8 +3,41 @@
 {% extends "base" %}
 
 {% block content %}
-FAQ
+<div class="max-w-screen-lg w-full">
-
+  <h1 class="h1">FAQs</h1>
-{{ loggedin_user.name }}
 
+  <div class="grid pt-8 text-left gap-10">
+    <div>
+        <h2 class="flex mb-4 text-lg font-bold text-primary-900">
+          Wie kann ich eine erstellte Ausfahrt absagen? 
+        </h2>
+        <p class="text-primary-950">Du kannst bei deinen selbst angelegten Ausfahrt auf Details klicken und hier unter Ausfahrt bearbeiten die <strong>Anzahl der Ruderer auf 0 setzen</strong>. Danach wird die Ausfahrt als abgesagt markiert. Bedenke allerdings, dass dadurch nicht automatisch alle Mitruderer informiert werden. Bitte zusätzlich in die Signal Gruppe schreiben oder den Betroffenen persönlich Bescheid geben.</p>
+    </div>
+    <div>
+      <h2 class="flex mb-4 text-lg font-bold text-primary-900">
+        Wie kann eine Veranstaltung angelegt werden, bei der sich nicht nur Ruderer anmelden können, sondern auch Steuerleute? 
+      </h2>
+      <p class="text-primary-950">Im Moment können nur Admins eine geplante Veranstaltung anlegen. Bitte bei <strong>Marie oder Philipp</strong> mit folgenden Angaben melden, dann wird eine Veranstaltung erstellt.
+        <ul class="list-disc text-primary-950 ml-4 mt-1">
+          <li>Datum inklusive Uhrzeit</li>
+          <li>Beschreibung, z.B.: USI, A&F, Firmenrudern</li>
+          <li>Anzahl der benötigten Steuerleute</li>
+          <li>Anzahl der vereinsinternen Ruderer, falls Unterstützung gewünscht wird</li>
+        </ul>
+      </p>
+    </div>
+    <div>
+      <h2 class="flex mb-4 text-lg font-bold text-primary-900">
+        Wie kann ich eine Ausfahrt anlegen, bei der nicht alle Ruderer teilnehmen sollen, z.B. Tagesausflug nach Aschach?
+      </h2>
+      <p class="text-primary-950">Du kannst beim Anlegen definieren, welchen Typ deine Ausfahrt hat. Standardmäßig wird 'Reguläre Ausfahrt' verwendet, es gibt aber auch z.B. <strong>'Lange Ausfahrt'</strong>. Wenn du das für deine Ausfahrt auswählst, wird der User in einem Popup noch einmal extra gefragt, ob er wirklich daran teilnehmen möchte. Bitte führe zusätzlich die Kilometer oder die Anforderungen im Anmerkungen Feld der Ausfahrt an.</p>
+    </div>
+    <div>
+      <h2 class="flex mb-4 text-lg font-bold text-primary-900">
+        Wann sollte ich bei einer Ausfahrt 'Gäste erlauben' einstellen?
+      </h2>
+      <p class="text-primary-950">Wenn du Ruderer mitnehmen möchtest, die einen <strong>5er-Block</strong> besitzen, kannst du die jeweilige Ausfahrt damit für diese Gruppe freischalten. Wenn sich ein Gast für die Ausfahrt anmeldet, dann wird er mit 'Gast' neben dem jeweiligen Namen gekennzeichnet.</p>
+    </div>
+  </div>
+</div>
 {% endblock content%}

templates/includes/macros.html.tera

@@ -1,6 +1,6 @@
 {% macro header(loggedin_user) %}
     <header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full z-10">
-      <div class="max-w-screen-xl w-full flex justify-between">
+      <div class="max-w-screen-xl w-full flex justify-between items-center">
         <div>
           <a href="/">
             Hallo {{ loggedin_user.name }}
@@ -8,13 +8,19 @@
         </div>
 
         <div>
+          {% if loggedin_user.is_cox %}
+            <a href="/faq" class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">
+              {% include "includes/question-icon" %}
+              <span class="sr-only">FAQs</span>
+            </a>
+          {% endif %}
             {% if loggedin_user.is_admin %}
-            <a href="/admin/user" class="rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">
+            <a href="/admin/user" class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">
               <svg class="inline h-4" width="16" height="16" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16"> <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/> </svg>
               <span class="sr-only">Userverwaltung</span>
             </a>
           {% endif %}
-          <a href="/auth/logout" class="rounded-md bg-primary-600 ml-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">
+          <a href="/auth/logout" class="inline-flex justify-center rounded-md bg-primary-600 ml-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">
             <svg class="inline h-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
             <span class="sr-only">Ausloggen</span>
           </a>

templates/includes/question-icon.html.tera

@@ -0,0 +1 @@
+<svg class="flex-shrink-0 w-4 h-4 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>