{% extends 'base.html' %}

{% block title %}Trade Offer Details & Update{% endblock title %}

{% block content %}
<div class="container mx-auto max-w-2xl mt-6 space-y-6">
  <h2 class="text-2xl font-bold">Trade Offer Details</h2>
  <!-- Offer Details Card -->
  <div class="card bg-base-100 shadow-lg">
    <div class="card-body">
      <p class="text-gray-700">
        <strong>Created At:</strong> {{ object.created_at|date:"M d, Y H:i" }}<br>
        <strong>Updated At:</strong> {{ object.updated_at|date:"M d, Y H:i" }}<br>
        {% if object.initiated_by.user == request.user or object.accepted_by and object.accepted_by.user == request.user %}
          <strong>Initiated By:</strong> {{ object.initiated_by }}<br>
          <strong>Accepted By:</strong>
          {% if object.accepted_by %}
            {{ object.accepted_by }}
          {% else %}
            Not yet accepted
          {% endif %}<br>
        {% endif %}
        <strong>Cards You Have:</strong>
          {% for card in object.have_cards.all %}
            {{ card.name }}{% if not forloop.last %}, {% endif %}
          {% endfor %}<br>
        <strong>Cards You Want:</strong>
          {% for card in object.want_cards.all %}
            {{ card.name }}{% if not forloop.last %}, {% endif %}
          {% endfor %}<br>
        <strong>Status:</strong> {% if object.is_active %}Open{% else %}Closed{% endif %}
      </p>
    </div>
  </div>
  
  {% if form.fields %}
    <!-- Form Card -->
    <div class="card bg-base-100 shadow-lg">
      <div class="card-body">
        <div class="mb-4 font-semibold text-lg">
          {% if action == "accept" %}
            Accept Trade Offer
          {% else %}
            Update Trade Offer
          {% endif %}
        </div>
        <form method="post" novalidate class="space-y-4">
          {% csrf_token %}
          {{ form.as_p }}
          <button type="submit" class="btn {% if action == 'accept' %}btn-success{% else %}btn-primary{% endif %}">
            {% if action == "accept" %}
              Accept Trade Offer
            {% else %}
              Submit
            {% endif %}
          </button>
        </form>
      </div>
    </div>
  {% else %}
    <div class="alert alert-info">
      You are not authorized to perform any status changes on this trade offer.
    </div>
  {% endif %}
  
  {% if form and form.errors %}
    <div class="alert alert-error">
      <strong>Please correct the errors below:</strong>
      <ul class="mt-2">
        {% for field in form %}
          {% for error in field.errors %}
            <li>{{ error }}</li>
          {% endfor %}
        {% endfor %}
        {% for error in form.non_field_errors %}
          <li>{{ error }}</li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
  
  <div class="flex space-x-4">
    <a href="{% url 'trade_offer_list' %}" class="btn btn-secondary">Back to Trade Offers</a>
    {% if can_delete %}
      <a href="{% url 'trade_offer_delete' object.pk %}" class="btn btn-error">Delete Trade Offer</a>
    {% endif %}
  </div>
</div>
{% endblock content %}