{% extends "layout.html" %}

{% set title = 'Meals' %}

{% block content %}

<section class="meal sec-pad">
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                <div class="meal-hero cover" style="background-image: url('_assets/img/meal.jpg')"></div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="product-info text-center mtxxlg">
                            <div class="rate-con mtmd">
                                <select name="rating" class="rate-product">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                            <h3 class="no-margin mtmd mbsm">
                                <a href="#">
                                    Meal name
                                </a>
                            </h3>
                            <div class="price mbsm">149.99</div>
                            <div class="meal-data mtmd mbmd">
                                <span class="mrlg"><img class="mrsm" src="_assets/img/icons/time.svg" alt="">In 50 min</span>
                                <span><img class="mrsm" src="_assets/img/icons/person.svg" alt="">1 Person</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="mtxxlg">
                            <p>Grilled chicken breast with a corn with potatoes and carrots with salad greens with fruit Grilled chicken breast with a corn with potatoes and carrots with salad greens with fruit</p>
                            <div class="action-btn mtxxlg">
                                <button type="button" class="btn btn-secondary d-inline">Add to favourite</button>
                                <button type="button" class="btn btn-green d-inline">Order now</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="share-social mtxlg ptlg pblg plmd bt bb">
                    <span class="mrxs">Share this meal:</span>
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
                <div class="comment-section mtxxlg">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="avatar-img text-center">
                                <div class="a-img cover" style="background-image: url('_assets/img/kitchen.jpg')"></div>
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <textarea name="" id="" cols="30" rows="10"></textarea>
                            <a href="#" class="btn btn-green mtxlg d-inline pull-right">Send</a>
                        </div>
                    </div>
                </div>
                <div class="menu mtxxlg">
                    <div class="section-title mbxxlg">
                        <h2 class="text-capitalize text-center no-margin">Menu</h2>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">{% include 'component/product.html' %}</div>
                        <div class="col-sm-4">{% include 'component/product.html' %}</div>
                        <div class="col-sm-4">{% include 'component/product.html' %}</div>
                    </div>
                </div>

            </div>
            <div class="col-sm-3">
                <div class="faq-card mblg">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/fast.svg" alt="">
                        </div>
                        <h3>Fast Delivery</h3>
                        <p>
                            Choose a transfer price from a wide selection of offers.
                        </p>
                    </div>
                </div>
                <div class="faq-card mblg">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/plate.svg" alt="">
                        </div>
                        <h3>Various Cusines</h3>
                        <p>
                            Choose a transfer price from a wide selection of offers.
                        </p>
                    </div>
                </div>
                <div class="faq-card mblg">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/quality.svg" alt="">
                        </div>
                        <h3>Quality</h3>
                        <p>
                            Choose a transfer price from a wide selection of offers.
                        </p>
                    </div>
                </div>
                <div class="faq-card mblg">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/message.svg" alt="">
                        </div>
                        <h3 class="text-semibold">Subscribe</h3>
                        <p>
                            Receive deals from our restaurants via e-mail
                        </p>
                        <form class="hero-form hero-subscribe mtxlg" action="">
                            <div class="input-group mtxlg">
                                <input type="email" class="form-control">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="button"><i class="fa fa-paper-plane"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="faq-card mblg">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/chat.svg" alt="">
                        </div>
                        <h3 class="text-semibold">Get our app</h3>
                        <p>
                            it's the fastest way to
                            order food on the go.
                        </p>
                        <div class="download">
                            <a href="#" class="mbmd">
                                <img src="_assets/img/icons/play_store.svg" alt="">
                            </a>
                            <a href="#">
                                <img src="_assets/img/icons/app_store.svg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% include 'component/product-model.html' %}

{% endblock content %}