{% layout 'layout' %}
{% block title %}eCommerce Dashboard{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li>App Templates</li>
<li>eCommerce</li>
<li class="active"><a href="app-ecommerce-dashboard.html">eCommerce Dashboard</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block content %} 
	<div class="row">
		<div class="col-md-3">
    		<a class="info-tiles tiles-midnightblue" href="#">
			    <div class="tiles-heading">
			        <div class="pull-left">Total Sales</div>
			        <div class="pull-right">+10.2%</div>
			    </div>
			    <div class="tiles-body">
			        <div class="pull-left"><i class="fa fa-dollar"></i></div>
			        <div class="pull-right">$85,687</div>
			    </div>
			</a>
    	</div>
    	<div class="col-md-3">
    		<a class="info-tiles tiles-primary" href="#">
			    <div class="tiles-heading">
			        <div class="pull-left">Total Earnings</div>
			        <div class="pull-right">+15.6%</div>
			    </div>
			    <div class="tiles-body">
			        <div class="pull-left"><i class="fa fa-money"></i></div>
			        <div class="pull-right">$62,356</div>
			    </div>
			</a>
    	</div>
    	<div class="col-md-3">
    		<a class="info-tiles tiles-orange" href="#">
			    <div class="tiles-heading">
			        <div class="pull-left">Total Orders</div>
			        <div class="pull-right">+32.1%</div>
			    </div>
			    <div class="tiles-body">
			        <div class="pull-left"><i class="fa fa-shopping-cart"></i></div>
			        <div class="pull-right">1,412</div>
			    </div>
			</a>
    	</div>
    	<div class="col-md-3">
    		<a class="info-tiles tiles-danger" href="#">
			    <div class="tiles-heading">
			        <div class="pull-left">Total Customers</div>
			        <div class="pull-right">+12.6%</div>
			    </div>
			    <div class="tiles-body">
			        <div class="pull-left"><i class="fa fa-group"></i></div>
			        <div class="pull-right">11,396</div>
			    </div>
			</a>
    	</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading"><h2>Order List</h2></div>
				<div class="panel-body panel-no-padding">
					<table id="example" class="table table-striped table-bordered" cellspacing="0" >
						<thead>
							<tr>
								<th>Order #</th>
								<th>Purchased On</th>
								<th>Customer Name</th>
								<th>Ship To</th>
								<th>Base Price</th>
								<th>Purchased Price</th>
								<th>Status</th>
								<th>Action</th>
							</tr>
						</thead>
						

						<tbody>
							<tr>
								<td>1</td>
								<td>19/08/2014</td>
								<td>John Smith</td>
								<td>Idaho</td>
								<td>$250</td>
								<td>$300</td>
								<td><span class="label label-info">Pending</span></td>
								<td>
									<a href="#" class="btn btn-default btn-xs btn-label"><i class="fa fa-search"></i> View</a>
								</td>
							</tr>
							<tr>
								<td>2</td>
								<td>19/08/2014</td>
								<td>Adam Smith</td>
								<td>Idaho</td>
								<td>$250</td>
								<td>$300</td>
								<td><span class="label label-info">Pending</span></td>
								<td>
									<a href="#" class="btn btn-default btn-xs btn-label"><i class="fa fa-search"></i> View</a>
								</td>
							</tr>

							<tfoot>
					            <tr>
									<th>Order #</th>
									<th>Purchased On</th>
									<th>Customer Name</th>
									<th>Ship To</th>
									<th>Base Price</th>
									<th>Purchased Price</th>
									<th>Status</th>
									<th>Action</th>
					            </tr>
				        	</tfoot>

						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
{% endblock %}
