{{> partials/menu}}
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
    <div class="col-sm-12">
        <h2>Orders</h2>
    </div>
    <div class="col-sm-12 search_bar">
        <div class="input-group">
            <input type="text" name="order_filter" id="order_filter" class="form-control" placeholder="Filter orders">
            <div class="input-group-append">
                <button class="btn btn-outline-success" id="btn_order_filter">{{ @root.__ "Filter" }}</button>
                <a href="/admin/orders/bystatus/" class="hidden-xs btn btn-outline-info orderFilterByStatus">{{ @root.__ "By status" }}</a>
                <a href="/admin/orders" class="hidden-xs btn btn-outline-warning">{{{feather 'x-octagon'}}}</a>
            </div>
        </div>
        <div class="orderFilter">
            <div class="row">
                <div class="text-warning top-pad-10 col-sm-8">{{ @root.__ "Orders can be filtered by: surname, email address or postcode/zipcode" }}</div>
                <div class="col-sm-4 top-pad-10">
                    <form class="form-inline float-sm-right">
                        <label for="orderStatusFilter" class="control-label formLabel right-pad-10">Status</label>
                        <select class="form-control" id="orderStatusFilter">
                            <option>{{ @root.__ "Completed" }}</option>
                            <option>{{ @root.__ "Paid" }}</option>
                            <option>{{ @root.__ "Created" }}</option>
                            <option>{{ @root.__ "Cancelled" }}</option>
                            <option>{{ @root.__ "Declined" }}</option>
                            <option>{{ @root.__ "Shipped" }}</option>
                            <option>{{ @root.__ "Pending" }}</option>
                        </select>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-12 top-pad-10">
        <ul class="list-group">
            <li class="list-group-item">
                {{#if searchTerm}}
                    <strong>{{ @root.__ "Orders" }} - <span class="text-danger">{{ @root.__ "Filtered term" }}: {{searchTerm}} </span></strong>
                {{else}}
                    <strong>{{ @root.__ "Recent orders" }}</strong>
                {{/if}}
            </li>
            {{#if orders}}
            {{#each orders}}
                <li class="list-group-item">
                    <div class="float-right top-pad-5">
                        {{ @root.__ "Status" }}: <span class="text-{{getStatusColor this.orderStatus}}">{{this.orderStatus}}</span>
                        <a class="text-danger" href="/admin/order/delete/{{this._id}}" onclick="return confirm('Are you sure you want to delete this order?');"> {{{feather 'trash-2'}}}</a>
                    </div>
                    <div class="top-pad-5">
                        <a href="/admin/order/view/{{this._id}}" class="text-success">View order</a> - <span class="text-info">Date: </span>{{formatDate this.orderDate "DD/MM/YYYY hh:mm"}} | <span class="text-info">Email:</span> {{this.orderEmail}} | <span class="text-info">{{ @root.__ "Last name" }}:</span> {{this.orderLastname}}
                    </div>
                </li>
            {{/each}}
            {{else}}
                <li class="list-group-item">
                    <h5 class="text-center">
                        {{ @root.__ "No orders found" }}
                    </h5>
                </li>
            {{/if}}
        </ul>
    </div>
    <div class="col-md-12 mt-5">
        <div id="pager" class="d-flex justify-content-center"></div>
    </div>
</main>
{{!-- Pager settings --}}
<input type="hidden" id="itemsPerPage" value="10" >
<input type="hidden" id="pageNum" value="{{pageNum}}">
<input type="hidden" id="totalItemCount" value="{{totalItemCount}}">
<input type="hidden" id="paginateUrl" value="{{paginateUrl}}">
<input type="hidden" id="searchTerm" value="{{searchTerm}}">