{% load gravatar card_badge %}

<div class="card card-border bg-base-100 shadow-lg w-90 mx-auto">
  <div class="cursor-pointer" @click.stop="window.location.href='{% url 'trade_acceptance_update' pk=acceptance.pk %}'">
    <!-- Header -->
    <div class="my-4 mx-4">
      <div class="flex justify-start items-center">
        <!-- Left: Initiator's avatar and "Has" -->
        <div class="flex items-center">
          <div class="avatar me-2">
            <div class="w-10 rounded-full">
              {{ acceptance.trade_offer.initiated_by.user.email|gravatar:40 }}
            </div>
          </div>
          <div class="text-gray-500 text-xs">
            {% if acceptance.is_initiator_state %}
              {{ acceptance.action_label_2 }}
            {% else %}
              Waiting on {{ acceptance.trade_offer.initiated_by.user.username }} to {{ acceptance.next_action_label }}...
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    <!-- Main Card Row: Single row with the acceptance's cards -->
    <div class="px-2 pb-0">
      <div class="grid grid-cols-2 items-center">
        <div class="flex flex-col items-center">
          <div class="cursor-pointer">{% card_badge acceptance.requested_card %}</div>
        </div>
        <div class="flex flex-col items-center">
          <div class="cursor-pointer">{% card_badge acceptance.offered_card %}</div>
        </div>
      </div>
    </div>
    <div class="my-4 mx-4">
      <div class="flex justify-end items-center">
        <!-- Right: "Wants" with the acceptor's avatar -->
        <div class="flex items-center">
          <div class="text-gray-500 text-xs text-right">
            {% if acceptance.is_acceptor_state %}
              {{ acceptance.action_label_2 }}
            {% else %}
              Waiting on {{ acceptance.accepted_by.user.username }} to {{ acceptance.next_action_label }}...
            {% endif %}
          </div>
          <div class="avatar ms-2">
            <div class="w-10 rounded-full">
              {{ acceptance.accepted_by.user.email|gravatar:40 }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 