{% load gravatar card_badge %}

  <div class="card card-border bg-base-100 shadow-lg w-90 mx-auto">
    <!-- Header -->
    <div class="py-4 mx-4">
      <div class="flex justify-between items-center">
        <!-- Left: Initiator's avatar (moved from center) and "Has" -->
        <div class="flex items-center ms-8">
          <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>
        <!-- Right: "Wants" with the acceptor's avatar -->
        <div class="flex items-center me-8">
          <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>
    
    <!-- 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">
          <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-between p-2">
      <div class="text-gray-500 text-sm">
        {{ acceptance.get_state_display }}
      </div>
      <div class="text-gray-500 text-sm tooltip tooltip-left" data-tip="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> 