{% extends "layout.html" %}

{% set title = 'My Dishes' %}

{% 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" class="active">
                     <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">
                    <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">
            <button type="button" class="btn btn-green btn-bigger width100 mbxxlg" data-toggle="modal" data-target="#addDish">Add Dish</button>
            <div class="menu-items mtxlg">
                {% for i in range(0, 4) -%}
                    {% include 'component/dish-item.html' %}
                {%- endfor %}
            </div>
        </div>
    </div>
</div>



<div class="modal fade add-dish" id="addDish" tabindex="-1" role="dialog" aria-labelledby="addDish" aria-hidden="true">
    <div class="modal-dialog main-model" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="content-head text-center mbxlg">
                    <img src="_assets/img/icons/plate-1.svg" alt="">
                    <h3 class="no-margin mtmd mbsm text-semibold capitalize">add new dish</h3>
                </div>
                <form action="">
                    <div class="row centered">
                        <div class="col-sm-3">
                            <div class="upload-container mbxxlg">
                                <div class="custom-input">
                                    <div class="input-file-container text-center">
                                        <input class="input-file" id="my-file" type="file">
                                        <label tabindex="0" for="my-file" class="input-file-trigger">
                                            <img src="_assets/img/icons/photo.svg" alt="">
                                            Upload Photo
                                        </label>
                                    </div>
                                    <p class="file-return"></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="upload-container mbxxlg">
                                <div class="custom-input">
                                    <div class="input-file-container text-center">
                                        <input class="input-file" id="my-file-1" type="file">
                                        <label tabindex="0" for="my-file-1" class="input-file-trigger">
                                            <img src="_assets/img/icons/photo.svg" alt="">
                                            Upload Photo
                                        </label>
                                    </div>
                                    <p class="file-return"></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="upload-container mbxxlg">
                                <div class="custom-input">
                                    <div class="input-file-container text-center">
                                        <input class="input-file" id="my-file-2" type="file">
                                        <label tabindex="0" for="my-file-2" class="input-file-trigger">
                                            <img src="_assets/img/icons/photo.svg" alt="">
                                            Upload Photo
                                        </label>
                                    </div>
                                    <p class="file-return"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" name="Dish-Name" placeholder="Dish Name" required>
                    </div>
                    <div class="form-group">
                        <textarea name="" id="" cols="30" rows="5" placeholder="Description"></textarea>
                    </div>
                    <div class="select-container mbmd">
                        <div class="custom-select">
                            <select id="menu-type" name="menu-type">
                                <option value="">
                                    Menu Type
                                </option>
                                <option value="1">
                                    Option 1
                                </option>
                                <option value="2">
                                    Option 2
                                </option>
                                <option value="3">
                                    Option 3
                                </option>
                                <option value="4">
                                    Option 4
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="select-container mbmd">
                        <div class="custom-select">
                            <select id="preparation-time" name="preparation-time">
                                <option value="">
                                    Preparation Time
                                </option>
                                <option value="1">
                                    Option 1
                                </option>
                                <option value="2">
                                    Option 2
                                </option>
                                <option value="3">
                                    Option 3
                                </option>
                                <option value="4">
                                    Option 4
                                </option>
                            </select>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-green mtxxlg">
                        Save Dish
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock content %}