{% extends 'app/base.html' %}
{% load static %}
{% block title %}
Order
{% endblock title %}
{% block content %}
<div class="container my-5">
    <div class="row">
        <h3>Welcome <span class="text-capitalize">{{request.user}}</span></h3>
        <div class="col-sm-2 border-end">
            <ul class="list-unstyled">
                <li class="d-gird">
                    <a href="{% url 'orders' %}" class="btn btm-prinary">Orders</a>
                </li>
            </ul>
        </div>

        <div class="col-sm-9 offset-sm-1">
            {% for order in order_placed reversed %}
            <div class="row">
                <div class="col-sm-2">
                    <img src="{{order.product.product_image.url}}" alt="" class="img-fluid">
                </div>
                <div class="col-sm-7">
                    <p>Product : {{order.product.title}}</p>
                    <p>Quantity : {{order.quantity}}</p>
                    <p>Price : {{order.total_cost}}</p>
                </div>
                <div class="col-sm-3">
                    <p>Order Status : {{order.status}}</p>
                    {% if order.status == "Accepted" %}
                    <div class="prograss">
                        <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    {% elif order.status == "Packed" %}
                    <div class="prograss">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    {% elif order.status == "On The Way" %}
                    <div class="prograss">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    {% elif order.status == "Delivered" %}
                    <div class="prograss">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    {% elif order.status == "Cancel" %}
                    <div class="prograss">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    
                    {% endif %}
                </div>
            </div>
            {% empty %}
                    <h1 class="text-center">No orders found</h1>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock content %}