From 27c7238a82dc1cb6220d4ba41e909f0919ee8dd3 Mon Sep 17 00:00:00 2001
From: badbl0cks <4161747+badbl0cks@users.noreply.github.com>
Date: Sat, 15 Mar 2025 21:51:23 -0700
Subject: [PATCH] Enable caching via DB and update cache timeouts

---
 accounts/migrations/0001_initial.py      |   2 +-
 cards/migrations/0001_initial.py         |   2 +-
 cards/templatetags/card_multiselect.py   |   5 +-
 django_project/settings.py               |   4 +-
 home/views.py                            |   1 -
 reset-db_make-migrations_seed-data.sh    |   3 +
 theme/templates/home/home.html           |   8 +-
 theme/templatetags/card_multiselect.html |   2 +-
 theme/templatetags/trade_acceptance.html |  84 ++---
 theme/templatetags/trade_offer.html      | 451 +++++++++++------------
 trades/migrations/0001_initial.py        |   2 +-
 11 files changed, 281 insertions(+), 283 deletions(-)

diff --git a/accounts/migrations/0001_initial.py b/accounts/migrations/0001_initial.py
index 28426c2..db8f4b6 100644
--- a/accounts/migrations/0001_initial.py
+++ b/accounts/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 5.1.2 on 2025-03-15 22:05
+# Generated by Django 5.1.2 on 2025-03-16 04:58
 
 import django.contrib.auth.models
 import django.contrib.auth.validators
diff --git a/cards/migrations/0001_initial.py b/cards/migrations/0001_initial.py
index 76f7364..b13630e 100644
--- a/cards/migrations/0001_initial.py
+++ b/cards/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 5.1.2 on 2025-03-15 22:05
+# Generated by Django 5.1.2 on 2025-03-16 04:58
 
 import django.db.models.deletion
 from django.db import migrations, models
diff --git a/cards/templatetags/card_multiselect.py b/cards/templatetags/card_multiselect.py
index 581716d..ba0fdb5 100644
--- a/cards/templatetags/card_multiselect.py
+++ b/cards/templatetags/card_multiselect.py
@@ -4,7 +4,7 @@ from cards.models import Card
 register = template.Library()
 
 @register.inclusion_tag('templatetags/card_multiselect.html')
-def card_multiselect(field_name, label, placeholder, cards=None, selected_values=None, cache_timeout=86400, cache_key="cards_multiselect"):
+def card_multiselect(field_name, label, placeholder, cards=None, selected_values=None, cache_timeout=86400):
     """
     Renders a multiselect field for choosing cards while supporting quantity data.
     
@@ -50,6 +50,5 @@ def card_multiselect(field_name, label, placeholder, cards=None, selected_values
         'cards': cards,
         'placeholder': placeholder,
         'selected_values': list(selected_cards.keys()),
-        'cache_timeout': cache_timeout,
-        'cache_key': cache_key,
+        'cache_timeout': cache_timeout
     }
\ No newline at end of file
diff --git a/django_project/settings.py b/django_project/settings.py
index 9534160..1571649 100644
--- a/django_project/settings.py
+++ b/django_project/settings.py
@@ -286,7 +286,7 @@ if DEBUG:
 else:
     CACHES = {
         "default": {
-            "BACKEND": "django.core.cache.backends.locmem.LocMemCache",
-            "LOCATION": "unique-snowflake",
+            "BACKEND": "django.core.cache.backends.db.DatabaseCache",
+            "LOCATION": "site_cache",
         }
     }
\ No newline at end of file
diff --git a/home/views.py b/home/views.py
index 7c47e08..176ed9f 100644
--- a/home/views.py
+++ b/home/views.py
@@ -10,7 +10,6 @@ from django.views.decorators.cache import cache_page
 from django.template.response import TemplateResponse
 from django.http import HttpResponseRedirect
 
-@method_decorator(cache_page(60), name='get')
 class HomePageView(TemplateView):
     template_name = "home/home.html"
 
diff --git a/reset-db_make-migrations_seed-data.sh b/reset-db_make-migrations_seed-data.sh
index e1d4f31..d19f192 100755
--- a/reset-db_make-migrations_seed-data.sh
+++ b/reset-db_make-migrations_seed-data.sh
@@ -22,5 +22,8 @@ uv run python manage.py migrate
 echo "Loading seed data..."
 uv run python manage.py loaddata seed/0*
 
+echo "Creating cache table..."
+uv run python manage.py createcachetable
+
 echo "Seeding default friend codes..."
 uv run python manage.py seed_default_friend_codes
\ No newline at end of file
diff --git a/theme/templates/home/home.html b/theme/templates/home/home.html
index 4d6dc8e..5b8aee0 100644
--- a/theme/templates/home/home.html
+++ b/theme/templates/home/home.html
@@ -85,9 +85,9 @@
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <!-- Featured Offers -->
         <div>
-          {% cache 86400 featured_offers %}
-            <div class="p-4">
-              <h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Featured Offers</h5>
+          {% cache 60 featured_offers %}
+            <div class="p-4 text-center ">
+              <h5 class="text-xl font-semibold whitespace-nowrap truncate mb-0">Featured Offers</h5>
             </div>
             <div class="p-4">
               <!-- Tab contents -->
@@ -139,7 +139,7 @@
       <!-- Recent Offers -->
       <div>
         {% cache 60 recent_offers %}
-          <div class="text-center text-base-content p-4">
+          <div class="text-center p-4">
             <h5 class="text-xl font-semibold whitespace-nowrap truncate mb-0">Recent Offers</h5>
           </div>
           <div class="p-4">
diff --git a/theme/templatetags/card_multiselect.html b/theme/templatetags/card_multiselect.html
index b8b93e5..b2be0d0 100644
--- a/theme/templatetags/card_multiselect.html
+++ b/theme/templatetags/card_multiselect.html
@@ -3,7 +3,7 @@
   <span class="label-text">{{ label }}</span>
 </label>
 <select name="{{ field_name }}" id="{{ field_id }}" class="select select-bordered w-full card-multiselect" data-placeholder="{{ placeholder }}" multiple>
-  {% cache cache_timeout cache_key selected_values|join:"," %}
+  {% cache cache_timeout card_multiselect selected_values|join:"," %}
     <option value="" disabled>{{ placeholder }}</option>
     {% for card in cards %}
       <option 
diff --git a/theme/templatetags/trade_acceptance.html b/theme/templatetags/trade_acceptance.html
index 8e11bf7..06293f6 100644
--- a/theme/templatetags/trade_acceptance.html
+++ b/theme/templatetags/trade_acceptance.html
@@ -1,51 +1,53 @@
-{% load gravatar card_badge %}
+{% load gravatar card_badge cache %}
 
-<div class="card card-border bg-base-100 shadow-lg w-96 md:w-80 lg:w-96">
-  <!-- Header -->
-  <div class="py-4 mx-2 sm:mx-4">
-    <div class="flex justify-between items-center">
-      <!-- Left: Initiator's avatar (moved from center) and "Has" -->
-      <div class="flex items-center">
-        <div class="avatar mr-2">
-          <div class="w-10 rounded-full">
-            {{ acceptance.trade_offer.initiated_by.user.email|gravatar:40 }}
+{% cache 60 trade_acceptance acceptance.pk %}
+  <div class="card card-border bg-base-100 shadow-lg w-96 md:w-80 lg:w-96">
+    <!-- Header -->
+    <div class="py-4 mx-2 sm:mx-4">
+      <div class="flex justify-between items-center">
+        <!-- Left: Initiator's avatar (moved from center) and "Has" -->
+        <div class="flex items-center">
+          <div class="avatar mr-2">
+            <div class="w-10 rounded-full">
+              {{ acceptance.trade_offer.initiated_by.user.email|gravatar:40 }}
+            </div>
           </div>
+          <span class="text-sm font-semibold">Has</span>
         </div>
-        <span class="text-sm font-semibold">Has</span>
-      </div>
-      <!-- Right: "Wants" with the acceptor's avatar -->
-      <div class="flex items-center">
-        <span class="text-sm font-semibold mr-2">Wants</span>
-        <div class="avatar">
-          <div class="w-10 rounded-full">
-            {{ acceptance.accepted_by.user.email|gravatar:40 }}
+        <!-- Right: "Wants" with the acceptor's avatar -->
+        <div class="flex items-center">
+          <span class="text-sm font-semibold mr-2">Wants</span>
+          <div class="avatar">
+            <div class="w-10 rounded-full">
+              {{ acceptance.accepted_by.user.email|gravatar:40 }}
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  
-  <!-- Main Card Row: Single row with the acceptance's cards -->
-  <a href="{% url 'trade_acceptance_update' pk=acceptance.pk %}" class="no-underline block">
-    <div class="px-2 pb-0">
-      <div class="grid grid-cols-2 items-center border-t border-gray-300">
-        <div class="flex flex-col items-center">
-          {% card_badge acceptance.requested_card %}
-        </div>
-        <div class="flex flex-col items-center">
-          {% card_badge acceptance.offered_card %}
+    
+    <!-- Main Card Row: Single row with the acceptance's cards -->
+    <a href="{% url 'trade_acceptance_update' pk=acceptance.pk %}" class="no-underline block">
+      <div class="px-2 pb-0">
+        <div class="grid grid-cols-2 items-center border-t border-gray-300">
+          <div class="flex flex-col items-center">
+            {% card_badge acceptance.requested_card %}
+          </div>
+          <div class="flex flex-col items-center">
+            {% card_badge acceptance.offered_card %}
+          </div>
         </div>
       </div>
+    </a>
+    
+    <!-- Footer: Only info button with acceptance hash -->
+    <div class="flex justify-end px-2 pb-2">
+      <div class="text-gray-500 text-sm tooltip tooltip-left" data-tip="Acceptance ID: {{ acceptance.hash }}">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+          <path stroke-linecap="round" stroke-linejoin="round"
+                d="M11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0zm-9-3.75h.008v.008H12V8.25z" />
+        </svg>
+      </div>
     </div>
-  </a>
-  
-  <!-- Footer: Only info button with acceptance hash -->
-  <div class="flex justify-end px-2 pb-2">
-    <div class="text-gray-500 text-sm tooltip tooltip-left" data-tip="Acceptance ID: {{ acceptance.hash }}">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-        <path stroke-linecap="round" stroke-linejoin="round"
-              d="M11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0zm-9-3.75h.008v.008H12V8.25z" />
-      </svg>
-    </div>
-  </div>
-</div> 
\ No newline at end of file
+  </div> 
+{% endcache %}
\ No newline at end of file
diff --git a/theme/templatetags/trade_offer.html b/theme/templatetags/trade_offer.html
index 281682c..c2c89c6 100644
--- a/theme/templatetags/trade_offer.html
+++ b/theme/templatetags/trade_offer.html
@@ -1,46 +1,135 @@
-{% load gravatar card_badge %}
+{% load gravatar card_badge cache %}
 
-<!--
-  Define the Alpine component only once.
--->
-<script>
-if (!window.tradeOfferCard) {
-  window.tradeOfferCard = function() {
-    return {
-      flipped: false,
-      badgeExpanded: false,
-      acceptanceExpanded: false,
-      // Helper method to set the badgeExpanded state
-      setBadge(expanded) {
-         this.badgeExpanded = expanded;
-      },
-    };
+{% cache 60 trade_offer offer.pk %}
+  <script>
+  if (!window.tradeOfferCard) {
+    window.tradeOfferCard = function() {
+      return {
+        flipped: false,
+        badgeExpanded: false,
+        acceptanceExpanded: false,
+        // Helper method to set the badgeExpanded state
+        setBadge(expanded) {
+          this.badgeExpanded = expanded;
+        },
+      };
+    }
   }
-}
-</script>
+  </script>
 
-<!--
-  The outer div now only establishes Alpine's data context.
-  The dynamic height adjustment (x-init & x-effect with x-ref) has been removed.
--->
-<div x-data="tradeOfferCard()" class="transition-all duration-500 trade-offer-card"
-     @toggle-all.window="setBadge($event.detail.expanded)">
+  <div x-data="tradeOfferCard()" class="transition-all duration-500 trade-offer-card"
+      @toggle-all.window="setBadge($event.detail.expanded)">
 
-  <!-- Flip container providing perspective -->
-  <div class="flip-container" style="perspective: 1000px;">
-    <!--
-      The rotating element (.flip-inner) now uses CSS Grid to stack its children in a single cell.
-      Persistent border, shadow, and rounding are applied here and the card rotates entirely.
-    -->
-    <div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg w-96 md:w-80 lg:w-96 transform transition-transform duration-700 ease-in-out"
-         :class="{'rotate-y-180': flipped}">
-      
-      <!-- Front Face: Trade Offer -->
-      <!-- Using grid placement classes (col-start-1 row-start-1) ensures both faces overlap -->
-      <div class="flip-face front col-start-1 row-start-1 grid grid-cols-1 auto-rows-min gap-2 content-between">
-          <!-- Header -->
+    <!-- Flip container providing perspective -->
+    <div class="flip-container" style="perspective: 1000px;">
+      <!--
+        The rotating element (.flip-inner) now uses CSS Grid to stack its children in a single cell.
+        Persistent border, shadow, and rounding are applied here and the card rotates entirely.
+      -->
+      <div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg w-96 md:w-80 lg:w-96 transform transition-transform duration-700 ease-in-out"
+          :class="{'rotate-y-180': flipped}">
+        
+        <!-- Front Face: Trade Offer -->
+        <!-- Using grid placement classes (col-start-1 row-start-1) ensures both faces overlap -->
+        <div class="flip-face front col-start-1 row-start-1 grid grid-cols-1 auto-rows-min gap-2 content-between">
+            <!-- Header -->
+            <div class="self-start">
+              <a href="{% url 'trade_offer_detail' pk=offer.pk %}" class="no-underline block">
+                <div class="py-4 mx-2 sm:mx-4">
+                  <div class="grid grid-cols-3 items-center">
+                    <div class="flex justify-center items-center">
+                      <span class="text-sm font-semibold">Has</span>
+                    </div>
+                    <div class="flex justify-center items-center">
+                      <div class="avatar">
+                        <div class="w-10 rounded-full">
+                          {{ offer.initiated_by.user.email|gravatar:40 }}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-center items-center">
+                      <span class="text-sm font-semibold">Wants</span>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <!-- Main Trade Offer Row -->
+            <div class="self-start">
+              <a href="{% url 'trade_offer_detail' pk=offer.pk %}" class="no-underline block">
+                <div class="px-2 pb-0">
+                  <div class="grid grid-cols-2 gap-2 items-center">
+                    <div class="flex flex-col items-center">
+                      {% if have_cards_available %}
+                        {% with first_have=have_cards_available.0 %}
+                          {% card_badge first_have.card first_have.quantity %}
+                        {% endwith %}
+                      {% endif %}
+                    </div>
+                    <div class="flex flex-col items-center">
+                      {% if want_cards_available %}
+                        {% with first_want=want_cards_available.0 %}
+                          {% card_badge first_want.card first_want.quantity %}
+                        {% endwith %}
+                      {% endif %}
+                    </div>
+                  </div>
+                </div>
+            
+                <!-- Extra Card Badges (Collapsible) -->
+                <div x-show="badgeExpanded" x-collapse.duration.500ms class="px-2">
+                    <div class="grid grid-cols-2 gap-2">
+                      <div class="flex flex-col items-center">
+                        {% for th in have_cards_available|slice:"1:" %}
+                          {% card_badge th.card th.quantity %}
+                        {% endfor %}
+                      </div>
+                      <div class="flex flex-col items-center">
+                        {% for th in want_cards_available|slice:"1:" %}
+                          {% card_badge th.card th.quantity %}
+                        {% endfor %}
+                      </div>
+                    </div>
+                </div>
+              </a>
+              <div class="flex justify-center my-1 h-5">
+                {% if have_cards_available|length > 1 or want_cards_available|length > 1 %}
+                  <svg @click="badgeExpanded = !badgeExpanded" 
+                      x-bind:class="{ 'rotate-180': badgeExpanded }" 
+                      class="transition-transform duration-500 h-5 w-5 cursor-pointer" 
+                      xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                          d="M19 9l-7 7-7-7" />
+                  </svg>
+                {% endif %}
+              </div>
+            </div>
+            <div class="self-end">
+              <div class="flex justify-between px-2 pb-2">
+                <div class="text-gray-500 text-sm tooltip tooltip-right" data-tip="ID: {{ offer.hash }}">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 
+                      stroke="currentColor" class="size-5">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                          d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+                  </svg>
+                </div>
+                <!-- Front-to-back flip button -->
+                <div class="cursor-pointer text-gray-500"
+                    @click="if(badgeExpanded){ badgeExpanded = false; setTimeout(() => { flipped = true; }, 500); } else { flipped = true; }">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M3 8.689c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 0 1 0 1.954l-7.108 4.061A1.125 1.125 0 0 1 3 16.811V8.69ZM12.75 8.689c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 0 1 0 1.954l-7.108 4.061a1.125 1.125 0 0 1-1.683-.977V8.69Z" />
+                    </svg>
+                    
+                </div>
+              </div>
+            </div>
+          </div>
+        
+        <!-- Back Face: Acceptances View -->
+        <!-- Placed in the same grid cell as the front face -->
+        <div class="flip-face back col-start-1 row-start-1 grid grid-cols-1 auto-rows-min gap-2 content-between" style="transform: rotateY(180deg);">
           <div class="self-start">
-            <a href="{% url 'trade_offer_detail' pk=offer.pk %}" class="no-underline block">
+            <a href="{% url 'trade_offer_detail' pk=offer.pk %}" class="no-underline">
               <div class="py-4 mx-2 sm:mx-4">
                 <div class="grid grid-cols-3 items-center">
                   <div class="flex justify-center items-center">
@@ -60,215 +149,121 @@ if (!window.tradeOfferCard) {
               </div>
             </a>
           </div>
-          <!-- Main Trade Offer Row -->
           <div class="self-start">
-            <a href="{% url 'trade_offer_detail' pk=offer.pk %}" class="no-underline block">
-              <div class="px-2 pb-0">
-                <div class="grid grid-cols-2 gap-2 items-center">
-                  <div class="flex flex-col items-center">
-                    {% if have_cards_available %}
-                      {% with first_have=have_cards_available.0 %}
-                        {% card_badge first_have.card first_have.quantity %}
-                      {% endwith %}
-                    {% endif %}
+            <div class="px-2 pb-0">
+              <div class="overflow-hidden">
+                {% if offer.acceptances.first %}
+                  <div class="space-y-3">
+                    {% with acceptance=offer.acceptances.first %}
+                      <a href="{% url 'trade_acceptance_update' pk=acceptance.pk %}" class="no-underline"
+                        data-tooltip-html='<div class="flex items-center space-x-2">
+                                                <div class="avatar">
+                                                  <div class="w-10 rounded-full">
+                                                    {{ acceptance.accepted_by.user.email|gravatar:"40" }}
+                                                  </div>
+                                                </div>
+                                                <div class="flex flex-col">
+                                                  <span class="text-sm">Accepted by: {{ acceptance.accepted_by.user.username }}</span>
+                                                  <span class="text-sm">State: {{ acceptance.state }}</span>
+                                                  <span class="text-sm">Acceptance ID: {{ acceptance.hash }}</span>
+                                                </div>
+                                              </div>'>
+                        <div class="grid grid-cols-2 gap-4 items-center">
+                          <div>
+                            {% card_badge acceptance.requested_card %}
+                          </div>
+                          <div>
+                            {% card_badge acceptance.offered_card %}
+                          </div>
+                        </div>
+                      </a>
+                    {% endwith %}
                   </div>
-                  <div class="flex flex-col items-center">
-                    {% if want_cards_available %}
-                      {% with first_want=want_cards_available.0 %}
-                        {% card_badge first_want.card first_want.quantity %}
-                      {% endwith %}
-                    {% endif %}
-                  </div>
-                </div>
+                {% endif %}
               </div>
-          
-              <!-- Extra Card Badges (Collapsible) -->
-              <div x-show="badgeExpanded" x-collapse.duration.500ms class="px-2">
-                  <div class="grid grid-cols-2 gap-2">
-                    <div class="flex flex-col items-center">
-                      {% for th in have_cards_available|slice:"1:" %}
-                        {% card_badge th.card th.quantity %}
-                      {% endfor %}
+              <div x-show="acceptanceExpanded" x-collapse.duration.500ms class="space-y-3">
+                {% for acceptance in offer.acceptances.all|slice:"1:" %}
+                  <a href="{% url 'trade_acceptance_update' pk=acceptance.pk %}" class="no-underline"
+                    data-tooltip-html='<div class="flex items-center space-x-2">
+                                            <div class="avatar">
+                                              <div class="w-10 rounded-full">
+                                                {{ acceptance.accepted_by.user.email|gravatar:"40" }}
+                                              </div>
+                                            </div>
+                                            <div class="flex flex-col">
+                                              <span class="text-sm">Accepted by: {{ acceptance.accepted_by.user.username }}</span>
+                                              <span class="text-sm">State: {{ acceptance.state }}</span>
+                                              <span class="text-sm">Acceptance ID: {{ acceptance.hash }}</span>
+                                            </div>
+                                          </div>'>
+                    <div class="grid grid-cols-2 gap-4 items-center">
+                      <div>
+                        {% card_badge acceptance.requested_card %}
+                      </div>
+                      <div>
+                        {% card_badge acceptance.offered_card %}
+                      </div>
                     </div>
-                    <div class="flex flex-col items-center">
-                      {% for th in want_cards_available|slice:"1:" %}
-                        {% card_badge th.card th.quantity %}
-                      {% endfor %}
-                    </div>
-                  </div>
+                  </a>
+                {% endfor %}
               </div>
-            </a>
-            <div class="flex justify-center my-1 h-5">
-              {% if have_cards_available|length > 1 or want_cards_available|length > 1 %}
-                <svg @click="badgeExpanded = !badgeExpanded" 
-                    x-bind:class="{ 'rotate-180': badgeExpanded }" 
+            </div>
+              <div class="flex justify-center my-1 h-5">
+                {% if offer.acceptances.all|length > 1 %}
+                <svg @click="acceptanceExpanded = !acceptanceExpanded" 
+                    x-bind:class="{ 'rotate-180': acceptanceExpanded }" 
                     class="transition-transform duration-500 h-5 w-5 cursor-pointer" 
                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                         d="M19 9l-7 7-7-7" />
                 </svg>
-              {% endif %}
-            </div>
+                {% endif %}
+              </div>
           </div>
-          <div class="self-end">
-            <div class="flex justify-between px-2 pb-2">
-              <div class="text-gray-500 text-sm tooltip tooltip-right" data-tip="ID: {{ offer.hash }}">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 
-                    stroke="currentColor" class="size-5">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          <div class="flex justify-between px-2 pb-2 self-end">
+            <!-- Back-to-front flip button -->
+            <div class="text-gray-500 cursor-pointer"
+                @click="if(acceptanceExpanded){ acceptanceExpanded = false; setTimeout(() => { flipped = false; }, 500); } else { flipped = false; }">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M21 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061A1.125 1.125 0 0 1 21 8.689v8.122ZM11.25 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061a1.125 1.125 0 0 1 1.683.977v8.122Z" />
                 </svg>
-              </div>
-              <!-- Front-to-back flip button -->
-              <div class="cursor-pointer text-gray-500"
-                  @click="if(badgeExpanded){ badgeExpanded = false; setTimeout(() => { flipped = true; }, 500); } else { flipped = true; }">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 8.689c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 0 1 0 1.954l-7.108 4.061A1.125 1.125 0 0 1 3 16.811V8.69ZM12.75 8.689c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 0 1 0 1.954l-7.108 4.061a1.125 1.125 0 0 1-1.683-.977V8.69Z" />
-                  </svg>
-                  
-              </div>
             </div>
-          </div>
-        </div>
-      
-      <!-- Back Face: Acceptances View -->
-      <!-- Placed in the same grid cell as the front face -->
-      <div class="flip-face back col-start-1 row-start-1 grid grid-cols-1 auto-rows-min gap-2 content-between" style="transform: rotateY(180deg);">
-        <div class="self-start">
-          <a href="{% url 'trade_offer_detail' pk=offer.pk %}" class="no-underline">
-            <div class="py-4 mx-2 sm:mx-4">
-              <div class="grid grid-cols-3 items-center">
-                <div class="flex justify-center items-center">
-                  <span class="text-sm font-semibold">Has</span>
-                </div>
-                <div class="flex justify-center items-center">
-                  <div class="avatar">
-                    <div class="w-10 rounded-full">
-                      {{ offer.initiated_by.user.email|gravatar:40 }}
-                    </div>
-                  </div>
-                </div>
-                <div class="flex justify-center items-center">
-                  <span class="text-sm font-semibold">Wants</span>
-                </div>
-              </div>
+            <div class="px-1 text-center">
+              <span class="text-sm font-semibold">
+                Acceptances ({{ offer.acceptances.all|length }})
+              </span>
             </div>
-          </a>
-        </div>
-        <div class="self-start">
-          <div class="px-2 pb-0">
-            <div class="overflow-hidden">
-              {% if offer.acceptances.first %}
-                <div class="space-y-3">
-                  {% with acceptance=offer.acceptances.first %}
-                    <a href="{% url 'trade_acceptance_update' pk=acceptance.pk %}" class="no-underline"
-                      data-tooltip-html='<div class="flex items-center space-x-2">
-                                              <div class="avatar">
-                                                <div class="w-10 rounded-full">
-                                                  {{ acceptance.accepted_by.user.email|gravatar:"40" }}
-                                                </div>
-                                              </div>
-                                              <div class="flex flex-col">
-                                                <span class="text-sm">Accepted by: {{ acceptance.accepted_by.user.username }}</span>
-                                                <span class="text-sm">State: {{ acceptance.state }}</span>
-                                                <span class="text-sm">Acceptance ID: {{ acceptance.hash }}</span>
-                                              </div>
-                                            </div>'>
-                      <div class="grid grid-cols-2 gap-4 items-center">
-                        <div>
-                          {% card_badge acceptance.requested_card %}
-                        </div>
-                        <div>
-                          {% card_badge acceptance.offered_card %}
-                        </div>
-                      </div>
-                    </a>
-                  {% endwith %}
-                </div>
-              {% endif %}
-            </div>
-            <div x-show="acceptanceExpanded" x-collapse.duration.500ms class="space-y-3">
-              {% for acceptance in offer.acceptances.all|slice:"1:" %}
-                <a href="{% url 'trade_acceptance_update' pk=acceptance.pk %}" class="no-underline"
-                  data-tooltip-html='<div class="flex items-center space-x-2">
-                                          <div class="avatar">
-                                            <div class="w-10 rounded-full">
-                                              {{ acceptance.accepted_by.user.email|gravatar:"40" }}
-                                            </div>
-                                          </div>
-                                          <div class="flex flex-col">
-                                            <span class="text-sm">Accepted by: {{ acceptance.accepted_by.user.username }}</span>
-                                            <span class="text-sm">State: {{ acceptance.state }}</span>
-                                            <span class="text-sm">Acceptance ID: {{ acceptance.hash }}</span>
-                                          </div>
-                                        </div>'>
-                  <div class="grid grid-cols-2 gap-4 items-center">
-                    <div>
-                      {% card_badge acceptance.requested_card %}
-                    </div>
-                    <div>
-                      {% card_badge acceptance.offered_card %}
-                    </div>
-                  </div>
-                </a>
-              {% endfor %}
-            </div>
-          </div>
-            <div class="flex justify-center my-1 h-5">
-              {% if offer.acceptances.all|length > 1 %}
-              <svg @click="acceptanceExpanded = !acceptanceExpanded" 
-                  x-bind:class="{ 'rotate-180': acceptanceExpanded }" 
-                  class="transition-transform duration-500 h-5 w-5 cursor-pointer" 
-                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
-                      d="M19 9l-7 7-7-7" />
+            <div class="text-gray-500 text-sm tooltip tooltip-left" data-tip="ID: {{ offer.hash }}">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 
+                  stroke="currentColor" class="size-5">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                      d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
               </svg>
-              {% endif %}
             </div>
-        </div>
-        <div class="flex justify-between px-2 pb-2 self-end">
-          <!-- Back-to-front flip button -->
-          <div class="text-gray-500 cursor-pointer"
-               @click="if(acceptanceExpanded){ acceptanceExpanded = false; setTimeout(() => { flipped = false; }, 500); } else { flipped = false; }">
-               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M21 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061A1.125 1.125 0 0 1 21 8.689v8.122ZM11.25 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061a1.125 1.125 0 0 1 1.683.977v8.122Z" />
-              </svg>
-          </div>
-          <div class="px-1 text-center">
-            <span class="text-sm font-semibold">
-              Acceptances ({{ offer.acceptances.all|length }})
-            </span>
-          </div>
-          <div class="text-gray-500 text-sm tooltip tooltip-left" data-tip="ID: {{ offer.hash }}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 
-                 stroke="currentColor" class="size-5">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                    d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
-            </svg>
           </div>
         </div>
+        
       </div>
-      
     </div>
   </div>
-</div>
 
-<style>
-  /* Ensure proper 3D transformations on the rotating element */
-  .flip-inner {
-    transform-style: preserve-3d;
-  }
-  /* Hide the back face of each card side */
-  .flip-face {
-    backface-visibility: hidden;
-    -webkit-backface-visibility: hidden;
-  }
-  /* The front face is unrotated by default */
-  .flip-face.front {
-    transform: rotateY(0);
-  }
-  /* The .rotate-y-180 class rotates the entire element by 180deg */
-  .rotate-y-180 {
-    transform: rotateY(180deg);
-  }
-</style>
+  <style>
+    /* Ensure proper 3D transformations on the rotating element */
+    .flip-inner {
+      transform-style: preserve-3d;
+    }
+    /* Hide the back face of each card side */
+    .flip-face {
+      backface-visibility: hidden;
+      -webkit-backface-visibility: hidden;
+    }
+    /* The front face is unrotated by default */
+    .flip-face.front {
+      transform: rotateY(0);
+    }
+    /* The .rotate-y-180 class rotates the entire element by 180deg */
+    .rotate-y-180 {
+      transform: rotateY(180deg);
+    }
+  </style>
+{% endcache %}
\ No newline at end of file
diff --git a/trades/migrations/0001_initial.py b/trades/migrations/0001_initial.py
index 2f5f330..b19de94 100644
--- a/trades/migrations/0001_initial.py
+++ b/trades/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 5.1.2 on 2025-03-15 22:05
+# Generated by Django 5.1.2 on 2025-03-16 04:58
 
 import django.db.models.deletion
 from django.db import migrations, models