From 4c6ef71a1711ee5c0b5c76dfbcb4e017219100e4 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 19 Apr 2024 12:48:23 +0200
Subject: [PATCH] [TASK] improve btn sidebar unregister guest

---
 templates/includes/macros.html.tera | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 59660f2..7fe7407 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -180,18 +180,24 @@
     <div class="p-2 border border-t-0 border-{{ bg }} mb-4 rounded-b-md">
         {% if participants | length > 0 %}
             {% for rower in participants %}
-                {{ rower.name }}
-                {% if rower.is_guest %}<small class="text-gray-600 dark:text-gray-100">(Scheckbuch)</small>{% endif %}
-                {% if rower.is_real_guest %}
-                    <small class="text-gray-600 dark:text-gray-100">(Gast)</small>
-                    {% if allow_removing %}
-                        <a href="/planned/remove/{{ trip_details_id }}/{{ rower.name }}"
-                           class="btn btn-attention btn-fw">Abmelden</a>
+                <div class="relative">
+                    {{ rower.name }}
+                    {% if rower.is_guest %}<small class="text-gray-600 dark:text-gray-100">(Scheckbuch)</small>{% endif %}
+                    {% if rower.is_real_guest %}
+                        <small class="text-gray-600 dark:text-gray-100">(Gast)</small>
+                        {% if allow_removing %}
+                            <a href="/planned/remove/{{ trip_details_id }}/{{ rower.name }}"
+                              class="absolute r-0 bg-red-500 w-5 h-5 text-white rounded-full flex items-center justify-center transform rotate-45 top-0 right-0">
+                              <svg class="inline h-5 w-5" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
+                              </svg>
+                              <span class="sr-only">Abmelden</span>
+                            </a>
+                        {% endif %}
                     {% endif %}
-                {% endif %}
-                <span class="hidden">(angemeldet seit
-                {{ rower.registered_at }})</span>
-                <br />
+                  <span class="hidden">(angemeldet seit
+                  {{ rower.registered_at }})</span>
+                </div>
             {% endfor %}
         {% else %}
             {{ text }}