{% extends "base.html" %}

{% block content %}
  <div class="mt-4">
    <h1><i class="fa-solid fa-cart-shopping me-1"></i>{{po.po_number}}</h1>

    <div class="d-flex align-items-center">
      <h4>Status:</h4>
    {% comment %} Apply appropriate text color based on po.po_status {% endcomment %}
      {% if po.po_status == 'draft' %}
        <h4 class="ms-2 text-warning mb-0">{{ po.po_status|capfirst }}</h4>
      {% elif po.po_status == 'in_review' %}
        <h4 class="ms-2 text-secondary mb-0">{{ po.po_status|capfirst }}</h4>
      {% elif po.po_status == 'approved' %}
        <h4 class="ms-2 text-success mb-0">{{ po.po_status|capfirst }}</h4>
      {% elif po.po_status == 'fulfilled' %}
        <h4 class="ms-2 text-success mb-0">{{ po.po_status|capfirst }}</h4>
      {% elif po.po_status == 'void' %}
        <h4 class="ms-2 text-danger mb-0">{{ po.po_status|capfirst }}</h4>
      {% else %}
        <h4 class="ms-2 text-muted mb-0">{{ po.po_status|capfirst }}</h4> {# Use muted for unknown/default status #}
      {% endif %}
    </div>





    <div class="table-responsive mt-3">
      <table class="table table-striped table-hover align-middle">
        <thead>
          <tr class="bg-body-highlight">
            <th scope="col">Name</th>
            <th scope="col">Quatnity</th>
            <th scope="col">Unit Cost</th>
            <th scope="col">Is Data Uploaded ?</th>
          </tr>
        </thead>
        <tbody>
          {% for item in items %}
            <tr>
              <th scope="row">{{ item.item_model }}</th>
              <th scope="row">{{ item.po_quantity }}</th>
              <th scope="row">{{ item.po_unit_cost }}</th>
              <th scope="row">
                {% if item.item_model.additional_info.uploaded %}
                  <i data-feather="check-circle" class="text-success"></i>
                {% else %}
                  <a href="{% url 'upload_cars' item.pk %}" class="btn btn-sm btn-phoenix-primary">
                    <i data-feather="upload" class="me-2"></i>Upload Data
                  </a>
                {% endif %}
              </th>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% if page_obj.paginator.num_pages > 1 %}

      <div class="d-flex justify-content-end mt-3">

        <div class="d-flex">
          {% include 'partials/pagination.html'%}
        </div>

      </div>
    {% endif %}
    <div>
{% endblock content %}