Redesign recipient management dashboard

infra/debug-dashboard/templates/recipients.html

@@ -1,17 +1,27 @@
 {% extends "base.html" %}
 {% block title %}Empfaenger - OC Sentinel{% endblock %}
 {% block content %}
-<section class="panel"><div class="panel-heading"><h2>Empfaenger hinzufuegen</h2></div>
-<form class="recipient-form" method="post" action="{{ url_for('add_recipient') }}">
-  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-  <label>Organisation<select name="organization_id" id="organization_id" required onchange="document.getElementById('organization_name').value=this.options[this.selectedIndex].dataset.name"><option value="*" data-name="Alle Organisationen">Alle Organisationen</option>{% for organization in organizations %}<option value="{{ organization[0] }}" data-name="{{ organization[1] }}">{{ organization[1] }}</option>{% endfor %}</select></label>
-  <input type="hidden" name="organization_name" id="organization_name" value="Alle Organisationen">
-  <label>E-Mail-Adresse<input type="email" name="recipient_email" placeholder="name@officecom.it" required></label>
-  <button type="submit">Speichern</button>
-</form></section>
+<section class="recipient-intro">
+  <span class="eyebrow">Wochenberichte</span>
+  <h1>Empfaenger verwalten</h1>
+  <p>Lege fest, welche Personen den Sicherheitsbericht einer Organisation erhalten. Regeln fuer <strong>Alle Organisationen</strong> gelten zusaetzlich zu den einzelnen Organisationen.</p>
+</section>
 
-<section class="panel"><div class="panel-heading"><h2>E-Mail-Verteiler</h2></div>
-<div class="table-wrap"><table><thead><tr><th>Organisation</th><th>E-Mail-Adresse</th><th>Status</th><th>Aktion</th></tr></thead><tbody>
-{% for rule in rules %}<tr><td>{{ rule[2] }}</td><td>{{ rule[3] }}</td><td><span class="state {{ 'ok' if rule[4] else 'warning' }}">{{ 'aktiv' if rule[4] else 'pausiert' }}</span></td><td class="rule-actions"><form method="post" action="{{ url_for('toggle_recipient', rule_id=rule[0]) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="button-secondary" type="submit">{{ 'Pausieren' if rule[4] else 'Aktivieren' }}</button></form><form method="post" action="{{ url_for('delete_recipient', rule_id=rule[0]) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="button-danger" type="submit">Loeschen</button></form></td></tr>{% else %}<tr><td colspan="4">Keine Empfaengerregeln.</td></tr>{% endfor %}
-</tbody></table></div></section>
+<section class="panel recipient-create-panel">
+  <div class="panel-heading"><span class="eyebrow">Neue Regel</span><h2>Bericht zustellen</h2><p>Die Adresse wird beim naechsten Wochenbericht automatisch beruecksichtigt.</p></div>
+  <form class="recipient-form" method="post" action="{{ url_for('add_recipient') }}">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+    <label>Organisation<select name="organization_id" id="organization_id" required onchange="document.getElementById('organization_name').value=this.options[this.selectedIndex].dataset.name"><option value="*" data-name="Alle Organisationen">Alle Organisationen</option>{% for organization in organizations %}<option value="{{ organization[0] }}" data-name="{{ organization[1] }}">{{ organization[1] }}</option>{% endfor %}</select></label>
+    <input type="hidden" name="organization_name" id="organization_name" value="Alle Organisationen">
+    <label>E-Mail-Adresse<input type="email" name="recipient_email" placeholder="name@officecom.it" required></label>
+    <button type="submit">Empfaenger hinzufuegen</button>
+  </form>
+</section>
+
+<section class="panel recipient-rules-panel">
+  <div class="panel-heading"><span class="eyebrow">Aktive Konfiguration</span><h2>E-Mail-Verteiler <small>{{ rules|length }} Regel{{ '' if rules|length == 1 else 'n' }}</small></h2></div>
+  <div class="table-wrap recipient-table"><table><thead><tr><th>Organisation</th><th>E-Mail-Adresse</th><th>Status</th><th class="actions-heading">Verwalten</th></tr></thead><tbody>
+{% for rule in rules %}<tr><td><strong>{{ rule[2] }}</strong></td><td><a class="recipient-email" href="mailto:{{ rule[3] }}">{{ rule[3] }}</a></td><td><span class="state {{ 'ok' if rule[4] else 'warning' }}">{{ 'aktiv' if rule[4] else 'pausiert' }}</span></td><td class="rule-actions"><form method="post" action="{{ url_for('toggle_recipient', rule_id=rule[0]) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="button-secondary" type="submit">{{ 'Pausieren' if rule[4] else 'Aktivieren' }}</button></form><form method="post" action="{{ url_for('delete_recipient', rule_id=rule[0]) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="button-danger" type="submit">Loeschen</button></form></td></tr>{% else %}<tr><td colspan="4" class="empty-state">Noch keine Empfaengerregeln angelegt.</td></tr>{% endfor %}
+</tbody></table></div>
+</section>
 {% endblock %}