{% extends "layout.html" %}

{% set title = 'Orders' %}

{% set type = 'dashboard' %}

{% block content %}

<div class="container">
    <aside class="col-sm-3 d-aside no-padding sticky" id="sidebar-menu">
        <div class="d-aside-c br">

            {% include 'component/aside-dashboard.html' %}

            <nav class="mtxxlg">
                <a href="dashboard.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/view.svg" alt="">
                    </span>
                    <span>Dashboard</span>
                </a>
                <a href="dishes.html">
                     <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/plate-1.svg" alt="">
                     </span>
                    <span>My Dishes</span>
                </a>
                <a href="weekly-deals.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/calender.svg" alt="">
                    </span>
                    <span>Weekly Deals</span>
                </a>
                <a href="menus.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/fork.svg" alt="">
                    </span>
                    <span>Menus</span>
                </a>
                <a href="orders.html" class="active">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/edit-2.svg" alt="">
                    </span>
                    <span>Orders</span>
                </a>
                <a href="ingredient-calculator.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/calculator.svg" alt="">
                    </span>
                    <span>Ingredient Calculator</span>
                </a>
                <a href="chef-account.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/user-1.svg" alt="">
                    </span>
                    <span>My Account</span>
                </a>
                <a href="wallet.html">
                    <span class="icon-c text-center d-inline mrxs">
                        <img src="_assets/img/icons/wallet.svg" alt="">
                    </span>
                    <span>My Wallet</span>
                </a>
            </nav>
        </div>
    </aside>
    <div class="col-sm-9 d-content">
        <div class="d-content-c plmd">
            <div class="order-status order mbxxlg">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="feature faq-card text-center">
                            <div class="feature-img">
                                <img src="_assets/img/icons/completed.svg" alt="">
                            </div>
                            <h3 class="no-margin mtmd">Completed</h3>
                            <h3 class="text-bold mtsm">
                                16
                            </h3>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="feature faq-card text-center">
                            <div class="feature-img">
                                <img src="_assets/img/icons/cancel.svg" alt="">
                            </div>
                            <h3 class="no-margin mtmd">Cancelled</h3>
                            <h3 class="text-bold mtsm">
                                46
                            </h3>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="feature faq-card text-center">
                            <div class="feature-img">
                                <img src="_assets/img/icons/rejected-1.svg" alt="">
                            </div>
                            <h3 class="no-margin mtmd">Rejected</h3>
                            <h3 class="text-bold mtsm">
                                29
                            </h3>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="feature faq-card text-center">
                            <div class="feature-img">
                                <img src="_assets/img/icons/rejected.svg" alt="">
                            </div>
                            <h3 class="no-margin mtmd">Auto Rejected</h3>
                            <h3 class="text-bold mtsm">
                                62
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="feature mbxxlg">
                <div class="tab-g">
                    <ul class="nav nav-tabs text-center" role="tablist">
                        <li role="presentation" class="active"><a class="btn" href="#orders" aria-controls="orders" role="tab" data-toggle="tab" aria-expanded="true">Today Orders</a></li>
                        <li role="presentation" class=""><a class="btn" href="#history" aria-controls="history" role="tab" data-toggle="tab" aria-expanded="false">Order History</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="orders">
                            <div class="menu-items order-items">
                                {% for i in range(0, 4) -%}
                                    {% include 'component/order-item-btn.html' %}
                                {%- endfor %}
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="history">
                            <form action="">
                                <div class="select-container">
                                    <div class="custom-datepicker text-left">
                                        <div class="custom-input">
                                            <input type="text" id="datepicker-from" placeholder="Start Date">
                                        </div>
                                        <div class="custom-input">
                                            <input class="d-inline" type="text" id="datepicker-to" placeholder="End Date">
                                        </div>
                                        <a class="btn btn-green btn-search" href="#">
                                            <i class="fas fa-search"></i>
                                        </a>
                                    </div>
                                </div>
                            </form>
                            <div class="last-orders order-items">
                                <div class="main-timeline4 main-history">
                                    <div class="timeline">
                                        <a href="#" class="timeline-content">
                                            <div class="avatar-img text-center mbmd"></div>
                                            <div class="inner-content">
                                                <h3 class="title text-bold">Sep 18,2018</h3>
                                            </div>
                                        </a>
                                        {% include 'component/order-item.html' %}
                                    </div>
                                    <div class="timeline">
                                        <a href="#" class="timeline-content">
                                            <div class="avatar-img text-center mbmd"></div>
                                            <div class="inner-content">
                                                <h3 class="title text-bold">Sep 18,2018</h3>
                                            </div>
                                        </a>
                                        {% include 'component/order-item.html' %}
                                    </div>
                                    <div class="timeline">
                                        <a href="#" class="timeline-content">
                                            <div class="avatar-img text-center mbmd"></div>
                                            <div class="inner-content">
                                                <h3 class="title text-bold">Sep 18,2018</h3>
                                            </div>
                                        </a>
                                        {% include 'component/order-item.html' %}
                                    </div>
                                    <div class="timeline">
                                        <a href="#" class="timeline-content">
                                            <div class="avatar-img text-center mbmd"></div>
                                            <div class="inner-content">
                                                <h3 class="title text-bold">Sep 18,2018</h3>
                                            </div>
                                        </a>
                                        {% include 'component/order-item.html' %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



{% endblock content %}