{% load gravatar card_badge %}

<div class="card trade-offer mb-3 mx-auto shadow-lg unified-card" style="border: none;">
  <div class="card-body trade-offer-body">
    <!-- Header Row: Using Grid, with relative positioning for avatar placement -->
    <div class="row no-gutters">
      <!-- Has Side -->
      <div class="col-6 position-relative" style="padding: 1rem;">
        {% if offer.initiated_by and offer.initiated_by.user.email %}
          <!-- Positioned to the left -->
          <div class="avatar position-absolute" style="left: 1rem; top: 50%; transform: translateY(-50%);">
            {{ offer.initiated_by.user.email|gravatar:40 }}
          </div>
        {% endif %}
        <!-- Centered text remains in the normal flow -->
        <div class="text-center">
          <h6 class="card-subtitle text-muted mb-0">Has</h6>
        </div>
      </div>
      <!-- Wants Side -->
      <div class="col-6 position-relative" style="padding: 1rem;">
        {% if offer.accepted_by and offer.accepted_by.user.email %}
          <!-- Positioned to the right -->
          <div class="avatar position-absolute" style="right: 1rem; top: 50%; transform: translateY(-50%);">
            {{ offer.accepted_by.user.email|gravatar:40 }}
          </div>
        {% endif %}
        <!-- Centered text remains in the normal flow -->
        <div class="text-center">
          <h6 class="card-subtitle text-muted mb-0">Wants</h6>
        </div>
      </div>
    </div>

    <!-- Body Row: Using Grid, no separators; badge spacing is consistent -->
    <div class="row no-gutters">
      <div class="col-6" style="padding: 1rem;">
        <div class="trade-offer-cards d-flex flex-wrap justify-content-center gap-2">
          {% if offer.have_cards.all %}
            {% for card in offer.have_cards.all %}
              {% card_badge card %}
            {% endfor %}
          {% endif %}
        </div>
      </div>
      <div class="col-6" style="padding: 1rem;">
        <div class="trade-off-offer-cards d-flex flex-wrap justify-content-center gap-2">
          {% if offer.want_cards.all %}
            {% for card in offer.want_cards.all %}
              {% card_badge card %}
            {% endfor %}
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Trade ID Footer with Info Icon -->
    <small class="text-muted mt-auto d-block text-end pe-2">
      <i class="bi bi-info-circle-fill" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Trade ID: {{ offer.hash }}" style="cursor: pointer;"></i>
    </small>
  </div>
</div>