{% extends 'base.html' %}
{% load trade_offer_tags %}

{% block title %}{{title}}{% endblock title %}

{% block content %}
<div class="container mx-auto max-w-2xl mt-6">
  <h2 class="text-2xl font-bold">Trade Offer Details</h2>
  <div class="flex justify-center mt-10">
    {% if screenshot_mode == "true" %}
      {% render_trade_offer object True show_friend_code %}
    {% else %}
      {% render_trade_offer object False False True %}
    {% endif %}
  </div>
  {% if acceptance_form %}
  <div class="w-3/4 mx-auto mt-4">
    <h3 class="text-xl font-semibold mt-6 mb-2">Accept This Offer</h3>
      <form method="post" action="{% url 'trade_acceptance_create' offer_pk=object.pk %}">
        {% csrf_token %}
        <input type="hidden" name="next" value="{% url 'trade_offer_detail' pk=object.pk %}">

        <div class="mb-4">
          <label for="{{ acceptance_form.offered_card.id_for_label }}" class="block text-sm font-medium text-gray-700">I have:</label>
          {{ acceptance_form.offered_card }}
          {% for error in acceptance_form.offered_card.errors %}
            <p class="mt-1 text-sm text-red-600">{{ error }}</p>
          {% endfor %}
        </div>

        <div class="mb-4">
          <label for="{{ acceptance_form.requested_card.id_for_label }}" class="block text-sm font-medium text-gray-700">I want:</label>
          {{ acceptance_form.requested_card }}
          {% for error in acceptance_form.requested_card.errors %}
            <p class="mt-1 text-sm text-red-600">{{ error }}</p>
          {% endfor %}
        </div>

        <div class="mb-4">
          {% if not acceptance_form.accepted_by.field.widget.is_hidden %}
            <label for="{{ acceptance_form.accepted_by.id_for_label }}" class="block text-sm font-medium text-gray-700">
              Accepted By
            </label>
          {% endif %}
          {{ acceptance_form.accepted_by }}
          {% for error in acceptance_form.accepted_by.errors %}
            <p class="mt-1 text-sm text-red-600">{{ error }}</p>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    <div class="mt-6 flex justify-between">
      <a href="{% url 'trade_offer_list' %}" class="btn btn-secondary">Back to Trade Offers</a>
      {% if is_initiator %}
        <a href="{{ delete_close_url }}" class="btn btn-danger">Delete/Close Trade Offer</a>
      {% elif request.user.is_authenticated %}
        <button type="submit" class="btn btn-primary">Accept Offer</button>
      {% endif %}
    </form>
  </div>
</div>
{% endblock content %}