{% load gravatar card_badge cache %}

{% cache 60 trade_offer offer_pk %}
  <div x-data="{ flipped: {{flipped|lower}}, offerExpanded: {{flipped|yesno:'false,true'}}, acceptanceExpanded: {{flipped|lower}} }" x-ref="tradeOffer" class="transition-all duration-500 trade-offer-card my-auto h-full w-auto justify-center">
    <div class="flip-container">
      <div{% if not on_detail_page %} @click="window.location.href = '{% url 'trade_offer_detail' pk=offer_pk %}'"{% endif %} class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg w-90 transform transition-transform duration-500 ease-in-out{% if not on_detail_page %} cursor-pointer{% endif %}{%if flipped %} rotate-y-180{% endif %}"
          :class="{'rotate-y-180': flipped}">
        <div class="flip-face front rotate-y-0 col-start-1 row-start-1 grid grid-cols-1 auto-rows-min gap-2 content-between">
            <div class="flip-face-header self-start">
                <div class="relative mt-6 mb-4 mx-2 sm:mx-4">
                  <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>
                  <div class="absolute inset-x-0 top-1/2 transform -translate-y-1/2 flex justify-center">
                    <div class="avatar tooltip tooltip-top" data-tip="{{ initiated_by_username }} | {{ initiated_reputation }}">
                      <div class="w-10 rounded-full">
                        {{ initiated_by_email|gravatar:40 }}
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div class="flip-face-body self-start">
              <div x-show="offerExpanded" x-collapse.duration.500ms class="px-2 badges">
                  <div class="flex flex-row justify-around">
                    {% if num_cards_available > 0 %}
                    <div class="flex flex-col">
                      {% for card in have_cards_available %}
                          <div class="cursor-pointer" @click.stop="window.location.href='{% url 'cards:card_detail' pk=card.card.pk %}'">{% card_badge card.card card.quantity %}</div>
                      {% endfor %}
                    </div>
                    <div class="flex flex-col">
                      {% for card in want_cards_available %}
                          <div class="cursor-pointer" @click.stop="window.location.href='{% url 'cards:card_detail' pk=card.card.pk %}'">{% card_badge card.card card.quantity %}</div>
                      {% endfor %}
                    </div>
                    {% else %}
                      <div class="text-center text-sm mb-2">All cards traded!</div>
                    {% endif %}
                  </div>
              </div>
            </div>
            <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>
                <div class="text-xs">{{ rarity_icon }}</div>
                <div class="cursor-pointer text-gray-500"
                    @click.stop="$refs.tradeOffer.scrollIntoView({ behavior: 'auto', block: 'start' }); 
                        offerExpanded = false; 
                        setTimeout(() => { 
                          flipped = true; 
                          setTimeout(() => { acceptanceExpanded = true; }, 500); 
                        }, 500);">
                    <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>
        <div class="flip-face back col-start-1 row-start-1 grid grid-cols-1 auto-rows-min gap-2 content-between rotate-y-180">
          <div class="flip-face-header self-start">
            <div class="relative mt-6 mb-4 mx-2 sm:mx-4">
              <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>
              <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>
          </div>
          <div class="flip-face-body self-start">
            <div class="px-2">
              <div x-show="acceptanceExpanded" x-collapse.duration.500ms class="space-y-3">
                {% for acceptance in acceptances %}
                  <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">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>
                {% empty %}
                  <div class="text-center text-sm mb-2">No trades yet!</div>
                {% endfor %}
              </div>
            </div>
          </div>
          <div class="flip-face-footer self-end">
            <div class="flex justify-between px-2 pb-2">
            <div class="text-gray-500 cursor-pointer"
                @click.stop="$refs.tradeOffer.scrollIntoView({ behavior: 'auto', block: 'start' }); acceptanceExpanded = false; setTimeout(() => { flipped = false; setTimeout(() => { offerExpanded = true; }, 500); }, 500);">
                <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="text-xs">{{ rarity_icon }}</div>
            <div class="px-1 text-center text-gray-500">
              <span class="text-sm font-semibold">
                ({{ acceptances|length }})
              </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .flip-container {
      perspective: 1000px;
    }
    .flip-inner {
      transform-style: preserve-3d;
    }
    .flip-face {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .rotate-y-0 {
      transform: rotateY(0);
    }
    .rotate-y-180 {
      transform: rotateY(180deg);
    }
  </style>
{% endcache %}