From c8ad34fd085cde30c7d6932542927430bbfb9bd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roberto=20Fern=C3=A1ndez=20Iglesias?=
 <development@roberfi.com>
Date: Thu, 8 Jan 2026 17:34:33 +0100
Subject: [PATCH] Change the structure of cookie consent banner

---
 changelog.md                                  |  1 +
 .../buttons/accept_button.html                |  0
 .../buttons/close_button.html                 |  0
 .../buttons/settings_button.html              | 19 +++++++++++++++++
 .../index.html}                               |  7 ++++---
 .../modal.html}                               | 21 +++----------------
 6 files changed, 27 insertions(+), 21 deletions(-)
 rename src/base/templates/cotton/{ => cookie_consent_banner}/buttons/accept_button.html (100%)
 rename src/base/templates/cotton/{ => cookie_consent_banner}/buttons/close_button.html (100%)
 create mode 100644 src/base/templates/cotton/cookie_consent_banner/buttons/settings_button.html
 rename src/base/templates/cotton/{cookie_consent_banner.html => cookie_consent_banner/index.html} (72%)
 rename src/base/templates/cotton/{buttons/settings_button.html => cookie_consent_banner/modal.html} (70%)

diff --git a/changelog.md b/changelog.md
index fca6e22..cd8e86a 100644
--- a/changelog.md
+++ b/changelog.md
@@ -3,6 +3,7 @@
 ## Next Release
 
 - Improve UI
+- Change the structure of cookie consent banner
 
 ## 0.6.0
 
diff --git a/src/base/templates/cotton/buttons/accept_button.html b/src/base/templates/cotton/cookie_consent_banner/buttons/accept_button.html
similarity index 100%
rename from src/base/templates/cotton/buttons/accept_button.html
rename to src/base/templates/cotton/cookie_consent_banner/buttons/accept_button.html
diff --git a/src/base/templates/cotton/buttons/close_button.html b/src/base/templates/cotton/cookie_consent_banner/buttons/close_button.html
similarity index 100%
rename from src/base/templates/cotton/buttons/close_button.html
rename to src/base/templates/cotton/cookie_consent_banner/buttons/close_button.html
diff --git a/src/base/templates/cotton/cookie_consent_banner/buttons/settings_button.html b/src/base/templates/cotton/cookie_consent_banner/buttons/settings_button.html
new file mode 100644
index 0000000..f96799e
--- /dev/null
+++ b/src/base/templates/cotton/cookie_consent_banner/buttons/settings_button.html
@@ -0,0 +1,19 @@
+{% load i18n %}
+
+<button class="btn btn-sm btn-info gap-2 hover:scale-105 transition-transform"
+        onclick="cookies_settings_modal.showModal()">
+    <svg class="w-4 h-4"
+         xmlns="http://www.w3.org/2000/svg"
+         width="16"
+         height="16"
+         viewBox="0 0 24 24"
+         fill="none"
+         stroke="currentColor"
+         stroke-width="2"
+         stroke-linecap="round"
+         stroke-linejoin="round">
+        <circle cx="12" cy="12" r="3" />
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    </svg>
+    {% translate "Settings" %}
+</button>
diff --git a/src/base/templates/cotton/cookie_consent_banner.html b/src/base/templates/cotton/cookie_consent_banner/index.html
similarity index 72%
rename from src/base/templates/cotton/cookie_consent_banner.html
rename to src/base/templates/cotton/cookie_consent_banner/index.html
index d259c16..a6499b4 100644
--- a/src/base/templates/cotton/cookie_consent_banner.html
+++ b/src/base/templates/cotton/cookie_consent_banner/index.html
@@ -19,14 +19,15 @@ <h2 class="mb-2 text-xl font-bold text-primary">
             <div class="flex flex-row gap-2 flex-wrap">
                 {% get_cookie_groups as cookie_groups %}
                 {% if cookie_groups|any_optional_cookie_group %}
-                    <c-buttons.settings-button />
+                    <c-cookie-consent-banner.buttons.settings-button />
                 {% endif %}
 
-                <c-buttons.accept-button />
+                <c-cookie-consent-banner.buttons.accept-button />
             </div>
 
-            <c-buttons.close-button position-classes="absolute right-2 top-2" onclick="document.getElementById('cooco_banner').classList.add('hidden')" />
+            <c-cookie-consent-banner.buttons.close-button position-classes="absolute right-2 top-2" onclick="document.getElementById('cooco_banner').classList.add('hidden')" />
 
         </div>
     </div>
+    <c-cookie-consent-banner.modal />
 {% endif %}
diff --git a/src/base/templates/cotton/buttons/settings_button.html b/src/base/templates/cotton/cookie_consent_banner/modal.html
similarity index 70%
rename from src/base/templates/cotton/buttons/settings_button.html
rename to src/base/templates/cotton/cookie_consent_banner/modal.html
index be82173..e7dbf6b 100644
--- a/src/base/templates/cotton/buttons/settings_button.html
+++ b/src/base/templates/cotton/cookie_consent_banner/modal.html
@@ -1,28 +1,12 @@
 {% load i18n %}
+{% load cooco %}
 
-<button class="btn btn-sm btn-info gap-2 hover:scale-105 transition-transform"
-        onclick="cookies_settings_modal.showModal()">
-    <svg class="w-4 h-4"
-         xmlns="http://www.w3.org/2000/svg"
-         width="16"
-         height="16"
-         viewBox="0 0 24 24"
-         fill="none"
-         stroke="currentColor"
-         stroke-width="2"
-         stroke-linecap="round"
-         stroke-linejoin="round">
-        <circle cx="12" cy="12" r="3" />
-        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
-    </svg>
-    {% translate "Settings" %}
-</button>
 <dialog id="cookies_settings_modal"
         class="modal modal-bottom sm:modal-middle">
     <div class="modal-box w-11/12 max-w-5xl mx-auto bg-linear-to-br from-base-100 to-base-200 shadow-2xl p-0 flex flex-col max-h-[90vh] overflow-hidden">
         <!-- Close button -->
         <form method="dialog" class="absolute right-4 top-4 z-10">
-            <c-buttons.close-button position-classes="right-2 top-2" />
+            <c-cookie-consent-banner.buttons.close-button />
         </form>
 
         <!-- Header section - fixed at top -->
@@ -41,6 +25,7 @@ <h3 class="text-2xl sm:text-3xl font-bold bg-linear-to-r from-primary to-primary
                 <input name="next" type="hidden" value="{{ request.path }}" />
 
                 <div class="grid grid-cols-1 gap-4">
+                    {% get_cookie_groups as cookie_groups %}
                     {% for cookie_group in cookie_groups %}
                         <div class="card border-2 border-base-300 hover:border-primary/30 transition-colors bg-linear-to-r from-base-200 to-base-100 shadow-md">
                             <div class="card-body">