{% 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 i in items %}
                        <tr>
                            <th scope="row">{{ i.item.item_model }}</th>
                            <th scope="row">{{ i.item.po_quantity }}</th>
                            <th scope="row">{{ i.item.po_unit_cost }}</th>
                            <th scope="row">
                                {% if i.status == "uploaded" %}
                                    <i data-feather="check-circle" class="text-success"></i>
                                {% else %}
                                    <a href="{% url 'upload_cars' request.dealer.slug i.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>
        <div>
        {% endblock content %}