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

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

{% block content %}
{% 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 %}
  <h2 class="text-2xl font-bold">Trade Details</h2>

  <div class="card card-border bg-base-100 shadow-lg mx-auto p-6 m-4 text-sm">
    <div class="text-center mb-4">
      <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="divider"></div>
    <div class="grid grid-cols-2 justify-items-end items-baseline gap-4">
      <div class="font-semibold">Initiator:</div>
      <div class="justify-self-start">{{ object.trade_offer.initiated_by.user.username }}</div>
      <div class="font-semibold">Initiator's Card:</div>
      <div class="justify-self-start">{% card_badge object.offered_card %}</div>
      <div class="font-semibold">Acceptor:</div>
      <div class="justify-self-start">{{ object.accepted_by.user.username }}</div>
      <div class="font-semibold">Acceptor's Card:</div>
      <div class="justify-self-start">{% card_badge object.requested_card %}</div>
      <div class="font-semibold">State:</div>
      <div class="justify-self-start">{{ object.get_state_display }}, Waiting on {% if object.is_initiator_state %}{{ object.accepted_by.user.username }}{% else %}{{ object.trade_offer.initiated_by.user.username }}{% endif %} to {{ object.next_action_label }}</div>
      <div class="font-semibold">ID:</div>
      <div class="justify-self-start">#{{ object.hash }}</div>
      <div class="font-semibold">Trade Offer:</div>
      <div class="justify-self-start"><a class="link link-hover" href="{% url 'trade_offer_detail' object.trade_offer.id %}">#{{ object.trade_offer.hash }}</a></div>
      <div class="font-semibold">Created At:</div>
      <div class="justify-self-start">{{ object.created_at }}</div>
      <div class="font-semibold">Last Updated:</div>
      <div class="justify-self-start">{{ object.updated_at }}</div>
    </div>
    {% if form.fields.state.choices %}
      <div class="divider"></div>
      <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>
    {% endif %}
  </div>
{% endblock content %}