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

{% block title %}Update Trade Acceptance{% endblock title %}

{% block content %}
<div class="container mx-auto max-w-xl mt-6">
  <h2 class="text-2xl font-bold">Update Trade Acceptance</h2>
  <div class="text-center py-8">
    <ul class="steps">
      {% if object.is_thanked %}
        <li class="step step-primary">Accepted</li>
        <li class="step step-primary">Card Sent</li>
        <li class="step step-primary">Card Received</li>
        <li class="step step-primary">Thanks Sent</li>
        <li class="step step-primary">Thanks Received</li>
        <li class="step step-primary">Completed</li>
      {% elif object.is_rejected %}
        <li class="step step-primary">Accepted</li>
        <li class="step step-error">
          <span class="step-icon">X</span>{{ object.get_state_display }}
        </li>
      {% else %}
        <li class="step step-primary">Accepted</li>
        <li class="step {% if object.get_step_number >= 2 %}step-primary{% endif %}">Card Sent</li>
        <li class="step {% if object.get_step_number >= 3 %}step-primary{% endif %}">Card Received</li>
        {% if object.state == 'THANKED_BY_INITIATOR' %}
          <li class="step step-primary">Thanked by Initiator</li>
          <li class="step">Thanked by Acceptor</li>
          <li class="step">Completed</li>
        {% elif object.state == 'THANKED_BY_ACCEPTOR' %}
          <li class="step step-primary">Thanked by Acceptor</li>
          <li class="step">Thanked by Initiator</li>
          <li class="step">Completed</li>
        {% elif object.state == 'THANKED_BY_BOTH' %}
          <li class="step step-primary">Thanked by Initiator</li>
          <li class="step step-primary">Thanked by Acceptor</li>
          <li class="step step-primary">Completed</li>
        {% else %}
          <li class="step">Thanked by Initiator</li>
          <li class="step">Thanked by Acceptor</li>
          <li class="step">Completed</li>
        {% endif %}
      {% endif %}
    </ul>
  </div>

  <div class="py-8">
    {% render_trade_acceptance object %}
  </div>

  <div class="mt-6">
    <h3 class="text-xl font-semibold mb-4">Select an action:</h3>
    {% if form.fields.state.choices %}
      {% for state_value, state_label in form.fields.state.choices %}
        <form method="post" class="mb-2">
          {% csrf_token %}
          <input type="hidden" name="state" value="{{ state_value }}">
          <button type="submit" class="btn btn-primary w-full">{{ state_label }}</button>
        </form>
      {% endfor %}
    {% else %}
      <p>No available actions.</p>
    {% endif %}
  </div>

  {% if form and form.errors %}
    <div class="alert alert-error mt-4">
      <strong>Please correct the errors below:</strong>
      <ul>
        {% 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="mt-6">
    <a href="{% url 'trade_offer_detail' pk=object.trade_offer.pk %}" class="btn btn-secondary">
      Back to Offer Details
    </a>
  </div>
</div>
{% endblock content %}