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

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

{% block content %}
<div class="container mx-auto max-w-xl mt-6">
  <h2 class="text-2xl font-bold">Update Trade</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">Thanks Sent</li>
          <li class="step">Thanks Received</li>
          <li class="step">Completed</li>
        {% elif object.state == 'THANKED_BY_ACCEPTOR' %}
          <li class="step step-primary">Thanks Received</li>
          <li class="step">Thanks Sent</li>
          <li class="step">Completed</li>
        {% elif object.state == 'THANKED_BY_BOTH' %}
          <li class="step step-primary">Thanks Sent</li>
          <li class="step step-primary">Thanks Received</li>
          <li class="step step-primary">Completed</li>
        {% else %}
          <li class="step">Thanks Sent</li>
          <li class="step">Thanks Received</li>
          <li class="step">Completed</li>
        {% endif %}
      {% endif %}
    </ul>
  </div>

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

  <div class="mt-6 card card-border bg-base-100 shadow-lg mx-auto p-6 mb-4">
    <h3 class="text-xl font-semibold mb-4">Select an action:</h3>
    {% if form.fields.state.choices %}
      <div class="flex flex-row gap-2">
        {% for state_value, state_label in form.fields.state.choices %}
          <form method="post" class="mb-2 flex-1">
            {% csrf_token %}
            <input type="hidden" name="state" value="{{ state_value }}">
            <button type="submit" class="{{ state_value|action_button_class }} w-full">
              {{ object|get_action_label:state_value }}
            </button>
          </form>
        {% endfor %}
      </div>
    {% else %}
      <p>No available actions.</p>
      <!--button class="btn-info"></button-->
    {% 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>
{% endblock content %}