{% load gravatar card_badge cache %}

{% cache 60 trade_offer offer_pk %}
<div class="trade-offer-card m-2 h-full w-auto flex justify-center">
  <div x-data="tradeOfferCard()" x-init="defaultExpanded = {{expanded|lower}}; badgeExpanded = defaultExpanded; acceptanceExpanded = defaultExpanded; flipped = {{flipped|lower}}" class="transition-all duration-500 trade-offer-card my-auto"
      @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 freeze-bg-color grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg w-84 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="flip-face-header self-start">
              <a href="{% url 'trade_offer_detail' pk=offer_pk %}" class="no-underline block">
                <!-- Set this container as relative to position the avatar absolutely -->
                <div class="relative mt-6 mb-4 mx-2 sm:mx-4">
                  <!-- Two-column grid for the labels -->
                  <div class="grid grid-cols-2 items-center">
                    <span class="text-sm font-semibold text-center">Has</span>
                    <span class="text-sm font-semibold text-center">Wants</span>
                  </div>
                  <!-- The avatar is placed absolutely and centered -->
                  <div class="absolute inset-x-0 top-1/2 transform -translate-y-1/2 flex justify-center">
                    <div class="avatar">
                      <div class="w-10 rounded-full">
                        {{ initiated_by_email|gravatar:40 }}
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
            <!-- Main Trade Offer Row -->
            <div class="flip-face-body self-start">
              {% if not flipped %}
                <a href="{% url 'trade_offer_detail' pk=offer_pk %}" class="no-underline block">
                  <div class="px-2 main-badges pb-0">
                    <!-- Normal mode: just use an outer grid with 2 columns -->
                    <div class="flex flex-row gap-2 justify-around">
                      <!-- Has Side -->
                      <div class="flex flex-col gap-2">
                        {% for card in have_cards_available|slice:"0:1" %}
                          {% card_badge card.card card.quantity %}
                        {% endfor %}
                      </div>
                      <!-- Wants Side -->
                      <div class="flex flex-col gap-2">
                        {% for card in want_cards_available|slice:"0:1" %}
                            {% card_badge card.card card.quantity %}
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                </a>
                {% else %}
                  <div class="flex justify-center mt-8">
                    <div class="text-sm">
                      All cards have been accepted.
                    </div>
                  </div>
                {% endif %}
              <!-- Extra Card Badges (Collapsible) -->
                <div x-show="badgeExpanded" x-collapse.duration.500ms x-cloak class="px-2 extra-badges">
                  <a href="{% url 'trade_offer_detail' pk=offer_pk %}" class="no-underline block">
                    <div class="flex flex-row gap-2 justify-around">
                      <!-- Has Side Extra Badges -->
                      <div class="flex flex-col gap-2">
                        {% for card in have_cards_available|slice:"1:" %}
                            {% card_badge card.card card.quantity %}
                        {% endfor %}
                      </div>
                      <!-- Wants Side Extra Badges -->
                      <div class="flex flex-col gap-2">
                        {% for card in want_cards_available|slice:"1:" %}
                            {% card_badge card.card card.quantity %}
                        {% endfor %}
                      </div>
                    </div>
                  </a>
                </div>
            </div>
            {% if have_cards_available|length > 1 or want_cards_available|length > 1 %}
              <div @click="badgeExpanded = !badgeExpanded" class="flex justify-center h-5 cursor-pointer">
                <svg 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>
              </div>
            {% else %}
              <div class="h-5"></div>
            {% endif %}
            <div class="flip-face-footer 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="flipped = true; acceptanceExpanded = defaultExpanded">
                    <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">
                        {{ initiated_by_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>
          <div class="self-start">
            <div class="px-2 pb-0">
              <div class="overflow-hidden">
                {% if acceptances.0 %}
                  <div class="space-y-3">
                    {% with acceptance=acceptances.0 %}
                      <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 acceptances|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 h-5">
              {% if acceptances|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>
          </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="flipped = false; badgeExpanded = defaultExpanded">
                <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 ({{ acceptances|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>
</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>
{% endcache %}