{% extends "layout.html" %}

{% set title = 'Ingredient Calculator' %}

{% 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">
                    <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" class="active">
                    <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="row">
                <div class="col-sm-12">
                    <label class="text-semibold mlmd">Ingredient Calculator</label>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <input type="text" name="dishName" placeholder="Dish Name" required>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <input type="text" name="numberOfPortions" placeholder="Number Of portions" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <label class="text-semibold mlmd">Add Ingredient</label>
                    <form action="">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group mbxlg">
                                    <input type="text" name="ingredient" placeholder="ingredient" required>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group mbxlg">
                                    <div class="input-group">
                                        <input type="text" name="quantityUsed" placeholder="Quantity Used">
                                        <div class="input-group-btn bs-dropdown-to-select-group">
                                            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                                <span class="text-upper label-name">qty</span>
                                                <input type="hidden" data-bind="bs-drp-sel-value" value="qty">
                                                <span class="caret"></span>
                                                <span class="sr-only">Toggle Dropdown</span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li data-value="KG"><a href="#">KG</a></li>
                                                <li data-value="Gram"><a href="#">Gram</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group mbxlg">
                                    <div class="input-group">
                                        <input type="text" name="quantityPurchased" placeholder="Quantity Purchased">
                                        <div class="input-group-btn bs-dropdown-to-select-group">
                                            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                                                <span class="text-upper label-name">qty</span>
                                                <input type="hidden" data-bind="bs-drp-sel-value" value="qty">
                                                <span class="caret"></span>
                                                <span class="sr-only">Toggle Dropdown</span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li data-value="KG"><a href="#">KG</a></li>
                                                <li data-value="Gram"><a href="#">Gram</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group mbxlg">
                                    <input type="number" name="ingredient" placeholder="Purchase Price" required>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-green btn-bigger width100 mbxxlg">Add Ingredient</button>
                    </form>
                </div>
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm-4 col-sm-offset-2">
                            <div class="feature text-center">
                                <div class="feature-img">
                                    <img src="_assets/img/icons/money.svg" alt="">
                                </div>
                                <h3>Total Amount</h3>
                                <h3 class="text-bold mtsm">
                                    SAR 170
                                </h3>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="feature text-center">
                                <div class="feature-img">
                                    <img src="_assets/img/icons/min-amount.svg" alt="">
                                </div>
                                <h3>Min Dish Price</h3>
                                <h3 class="text-bold mtsm">
                                    SAR 5
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 mtxlg">
                    <div class="row">
                        {% for i in range(0, 4) -%}
                        <div class="col-sm-6">
                            <div class="ingredient mbxxlg">
                                <h3 class="text-bold text-center capitalize no-margin mbxlg">ingredient name</h3>
                                <ul class="in-data">
                                    <li class="bb">
                                        <label class="pull-left text-bold">Purchased Qty</label>
                                        <span class="pull-right">225 Gm</span>
                                    </li>
                                    <li class="bb">
                                        <label class="pull-left text-bold">Purchased Price</label>
                                        <span class="pull-right">170 SAR</span>
                                    </li>
                                    <li class="bb">
                                        <label class="pull-left text-bold">Used Qty</label>
                                        <span class="pull-right">225 Gm </span>
                                    </li>
                                    <li>
                                        <label class="pull-left text-bold">Price for Used Qty</label>
                                        <span class="pull-right">170 SAR</span>
                                    </li>
                                </ul>
                                <div class="text-center">
                                    <button type="button" class="btn btn-delete mtxlg d-inline">Delete Ingredient</button>
                                </div>
                            </div>
                        </div>
                        {%- endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock content %}