{% extends 'base.html' %}
{% block title%}Card block{% endblock %}

{% block content %}
<br>
<div class="row mt-5 ml-6" style="margin-left:10%;">
	<div class="col">
		<div class="col-md">
			<div class="card bg-primary text-center text-white  mb-3" id="total-orders">
			  	<div class="card-header">
			  		<h5 class="card-title">Total Orders</h5>
			  	</div>
			  	<div class="card-body">
			    	<h3 class="card-title">{{total_orders}}</h3>
			  	</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="col-md">
			<div class="card bg-success text-center text-white  mb-3" id="orders-delivered">
			  	<div class="card-header">
			  		<h5 class="card-title">Orders Delivered</h5>
			  	</div>
			  	<div class="card-body">
			    	<h3 class="card-title">{{orders_delivered}}</h3>
			  	</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="col-md">
			<div class="card bg-danger text-center text-white  mb-3" id="orders-pending">
			  	<div class="card-header">
			  		<h5 class="card-title">Orders Pending</h5>
			  	</div>
			  	<div class="card-body">
			    	<h3 class="card-title">{{orders_pending}}</h3>
			  	</div>
			</div>
		</div>
	</div>
</div>











{% endblock %}