{% extends "Support/base.html" %}
{% load static %}

{% block title %}
تشخیص غذا
{% endblock %}

{% block header.css %}

{% endblock %}

{% block body.content %}
    <!-- Form Element area Start-->
    <div class="form-element-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-element-list mg-t-30">
                    <div class="cmp-tb-hd">
                        <h2>Chosen</h2>
                        <p>Select the food that is recognized from the photo.</p>
                    </div>
                    <div class="row">
                        <img class="col-lg-4 col-md-4 col-sm-12 col-xs-12" src="{% static '' %}{{ food_image.path }}">
                        <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
                            <form method="post" action="{{ food_image.id }}/">{% csrf_token %}
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="nk-int-mk sl-dp-mn sm-res-mg-t-10">
                                        <h5 dir="rtl" class="text-center">جست و جو در لیست غذا ها</h5>
                                    </div>
                                    <div class="bootstrap-select fm-cmp-mg">
                                    <select class="selectpicker" id="food" name="food" data-live-search="true">
                                        {% for food in foods %}
                                            <option value="{{ food.Data_Base_Number }}">{{ food.FA_Name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                </div>
                                <br><br><br><br><br>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                        <div class="nk-int-mk sl-dp-mn sm-res-mg-t-10">
                                            <h5 dir="rtl" class="text-right">وعده غذایی:</h5>
                                        </div>
                                        <div class="bootstrap-select fm-cmp-mg">
                                            <select class="selectpicker" id="meal" name="meal" data-live-search="true">
                                                <option value="0">صبحانه</option>
                                                <option value="1">میان وعده صبح</option>
                                                <option value="2">ناهار</option>
                                                <option value="3">میان وعده ناهار</option>
                                                <option value="4">شام</option>
                                                <option value="5">میان وعده شام</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                        <div class="nk-int-mk sl-dp-mn sm-res-mg-t-10">
                                            <h5 dir="rtl" class="text-right">مقدار غذا:</h5>
                                        </div>
                                        <div class="bootstrap-select fm-cmp-mg">
                                            <select class="selectpicker" id="amount" name="amount" data-live-search="true">
                                                {% for a in amounts_range %}
                                                    <option value="{{ a }}">{{ a }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <br><br><br>
                                <div class="row">
                                    <div class="row col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                        <h4 class="text-center row col-lg-8 col-md-8 col-sm-6 col-xs-12">{{ time }}</h4>
                                        <h5 class="text-center row col-lg-4 col-md-4 col-sm-6 col-xs-12" dir="rtl">
                                            زمان:
                                        </h5>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 text-center">
                                        <button type="submit" class="btn btn-success mb-2 text-center">ذخیره</button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
    <!-- Form Element area End-->
{% endblock %}

{% block scripts.other %}

{% endblock %}