{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load custom_filters %}
{% block title %}
  {% trans "Track Inventory" %}
{% endblock %}
{% block content %}
    <div class="container-fluid px-4 py-4">
        <div class="row g-4">
            <!-- Inventory Ordered Card -->
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-header text-white">
                        <h2 class="h4 mb-0 fw-light text-center">
                            <i class="fas fa-cart-arrow-down me-2"></i>{% trans "Inventory Ordered" %}
                        </h2>
                    </div>
                    <div class="card-body p-0">
                        {% if inventory_ordered %}
                            <div class="table-responsive">{% inventory_table inventory_ordered %}</div>
                        {% else %}
                            <div class="p-4 text-center text-muted">
                                <i class="bi bi-box-seam display-6 mb-3"></i>
                                <p class="lead mb-0">{% trans "No inventory in ordered status." %}</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Inventory In Transit Card -->
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-header  text-white">
                        <h2 class="h4 mb-0 fw-light text-center">
                            <i class="fas fa-truck-moving me-2"></i>{% trans "Inventory In Transit" %}
                        </h2>
                    </div>
                    <div class="card-body p-0">
                        {% if inventory_in_transit %}
                            <div class="table-responsive">{% inventory_table inventory_in_transit %}</div>
                        {% else %}
                            <div class="p-4 text-center text-muted">
                                <i class="bi bi-box-seam display-6 mb-3"></i>
                                <p class="lead mb-0">{% trans "No inventory in transit." %}</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Inventory Received Card -->
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-header text-white">
                        <h2 class="h4 mb-0 fw-light text-center">
                            <i class="fas fa-check-circle me-2"></i>{% trans "Inventory Received" %}
                        </h2>
                    </div>
                    <div class="card-body p-0">
                        {% if inventory_received %}
                            <div class="table-responsive">{% inventory_table inventory_received %}</div>
                        {% else %}
                            <div class="p-4 text-center text-muted">
                                <i class="bi bi-box-seam display-6 mb-3"></i>
                                <p class="lead mb-0">{% trans "No inventory in received status." %}</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Action Button -->
            <div class="col-12 text-end mt-3"></div>
        </div>
    </div>
{% endblock %}