{% load gravatar card_badge tailwind_tags %}<!DOCTYPE html>
<html style="background-color: transparent !important;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        {% include 'static/css/dist/styles.css' %}
    </style>
</head>
<body style="background-color: transparent !important;">
  <div class="trade-offer-card-screenshot p-4 h-full w-auto flex justify-center" style="background-color: transparent !important;">
    <div class="transition-all duration-500 trade-offer-card my-auto">

      <!-- Flip container providing perspective -->
      <div class="flip-container">
        <div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg {% if num_cards_available >= 4 %}w-192{% else %}w-96{% endif %} transform transition-transform duration-700 ease-in-out">
          
          <!-- Front Face: Trade Offer -->
          <div class="flip-face front mb-2 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">
                  <div class="mt-6 mb-4 mx-2 sm:mx-4">
                    <!-- Two-column grid for the labels -->
                    <div class="flex flex-row justify-around w-full relative">
                      <div class="text-sm font-semibold text-center ms-3">Has</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 class="text-sm font-semibold text-center {% if expanded %}ms-8{% else %}me-2{% endif %}">Wants</div>
                    </div>
                  </div>
                </a>
              </div>
              <!-- Main Trade Offer Row -->
              <div class="flip-face-body self-start">
                <a href="{% url 'trade_offer_detail' pk=offer_pk %}" class="no-underline block">
                  <div class="px-4 main-badges pb-0">
                    {% if expanded %}
                      <div class="flex flex-row gap-2 justify-around">
                        <!-- Has Side (inner grid of 2 columns) -->
                        <div class="grid grid-cols-2 gap-2">
                          {% for card in have_cards_available %}
                            {% card_badge card.card card.quantity %}
                          {% endfor %}
                        </div>
                        <!-- Vertical Divider -->
                        <div class="flex justify-center">
                          <div class="w-px bg-gray-300 h-full"></div>
                        </div>
                        <!-- Wants Side (inner grid of 2 columns) -->
                        <div class="grid grid-cols-2 gap-2">
                          {% for card in want_cards_available %}
                            {% card_badge card.card card.quantity %}
                          {% endfor %}
                        </div>
                      </div>
                    {% else %}
                    <!-- 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 %}
                            {% card_badge card.card card.quantity %}
                          {% empty %}
                            <div class="text-xs text-center mb-2 ms-3">None left.</div>
                          {% endfor %}
                        </div>
                        <!-- Wants Side -->
                        <div class="flex flex-col gap-2">
                          {% for card in want_cards_available %}
                            {% card_badge card.card card.quantity %}
                          {% empty %}
                            <div class="text-xs text-center mb-2{% if expanded %} ms-8{% else %} me-4{% endif %}">None left.</div>
                          {% endfor %}
                        </div>
                      </div>
                    {% endif %}
                  </div>
                </a>
              </div>
              
              <div class="flip-face-footer self-end">
                <div class="flex flex-col gap-2 text-center">
                  <div class="text-sm font-semibold text-base-content">
                    {{ in_game_name }} {% if show_friend_code %}<span class="text-base-content/50">•</span> {{ friend_code }}{% endif %}
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>