{% 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">
    <div class="flip-container">
      <div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg max-w-90 transform transition-transform duration-500 ease-in-out{%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">
              <a{% if not on_detail_page %} href="{% url 'trade_offer_detail' pk=offer_pk %}"{% endif %}>
                <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 cursor-default" @click.stop.prevent data-tip="{{ initiated_by_username }} | {{ initiated_reputation }} rep">
                      <div class="max-w-10 rounded-full">
                        {{ initiated_by_email|gravatar:40 }}
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
            <div class="flip-face-body self-start{% if not on_detail_page %} cursor-pointer{% endif %}"{% if not on_detail_page %} @click.stop.prevent="window.location.href = '{% url 'trade_offer_detail' pk=offer_pk %}'"{% endif %}>
              <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 gap-2">
                      {% for card in have_cards_available %}
                          {% card_badge card.card card.quantity %}
                      {% endfor %}
                    </div>
                    <div class="flex flex-col gap-2">
                      {% for card in want_cards_available %}
                          {% card_badge card.card card.quantity %}
                      {% 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">
              <a{% if not on_detail_page %} href="{% url 'trade_offer_detail' pk=offer_pk %}"{% endif %}>
                <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 text-transparent shadow-gray-700 dark:shadow-white" style="text-shadow: 0 0 0 var(--tw-shadow-color);">{{ rarity_icon }}</div>
                  <div class="cursor-pointer text-gray-500"
                      @click.stop.prevent="$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>
              </a>
            </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">
            <a{% if not on_detail_page %} href="{% url 'trade_offer_detail' pk=offer_pk %}"{% endif %}>
              <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 cursor-default" @click.stop.prevent data-tip="{{ initiated_by_username }} | {{ initiated_reputation }} rep">
                    <div class="max-w-10 rounded-full">
                      {{ initiated_by_email|gravatar:40 }}
                    </div>
                  </div>
                </div>
              </div>
            </a>
          </div>
          <div class="flip-face-body self-start">
            <div class="text-xs">
                <div x-show="acceptanceExpanded" x-collapse.duration.500ms class="flex flex-row flex-wrap justify-center items-baseline mx-auto">
                  {% for trade in acceptances %}
                    <div class="mb-2 grid grid-cols-2 justify-items-center items-baseline gap-x-3 gap-y-1">
                      <div class="">{% card_badge trade.offered_card %}</div>
                      <div class="">{% card_badge trade.requested_card %}</div>
                      <div class="col-span-2 text-center tooltip tooltip-bottom" data-tip="{{ trade.accepted_by.user.username }} | {{ trade.accepted_by.user.reputation_score }} rep">{{ trade.accepted_by.user.username }} &bull; <a class="link link-hover" href="{% url 'trade_acceptance_update' pk=trade.pk %}">#{{ trade.hash }}</a> &bull; {{ trade.get_state_display }}</div>
                    </div>
                  {% empty %}
                    <div class="w-full text-center">No trades yet.</div>
                  {% endfor %}
                </div>
            </div>
          </div>
          <div class="flip-face-footer self-end">
            <a{% if not on_detail_page %} href="{% url 'trade_offer_detail' pk=offer_pk %}"{% endif %}></a>
              <div class="flex justify-between px-2 pb-2">
              <div class="text-gray-500 cursor-pointer"
                  @click.stop.prevent="$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 text-transparent shadow-gray-700 dark:shadow-white" style="text-shadow: 0 0 0 var(--tw-shadow-color);">{{ rarity_icon }}</div>
              <div class="px-1 text-center text-gray-500">
                <span class="text-sm font-semibold">
                  ({{ acceptances|length }})
                </span>
                </div>
              </div>
            </a>
          </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 %}