{% extends 'layout/template.twig' %}

{% block content %}
    <!-- barra superior titulo de pagina-->
    <div class="div-title bg-color-menu-personalizado">
        <div class="container">
            <div class="row">
                <div class="col-xs-10 col-sm-11">
                    {{ title }}
                </div>
                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip-info" data-placement="bottom" title="¿Como funciona?">
                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt20" >

        <div id="exTab2" class="container">
            <ul class="nav nav-tabs nav-tabs-menu-personalizado">
                <li class="active">
                    <a  href="#1" data-toggle="tab">LU</a>
                </li>
                <li>
                    <a href="#2" data-toggle="tab">MA</a>
                </li>
                <li>
                    <a href="#3" data-toggle="tab">MIE</a>
                </li>
                <li>
                    <a href="#4" data-toggle="tab">JUE</a>
                </li>
                <li>
                    <a href="#5" data-toggle="tab">VIE</a>
                </li>
                <li>
                    <a href="#6" data-toggle="tab">SAB</a>
                </li>
                <li>
                    <a href="#7" data-toggle="tab">DOM</a>
                </li>
            </ul>

            <div class="tab-content tab-content-menu-persoanlizado">
                {% for i in 1..6 %}
                <div class="tab-pane {% if i == 1 %}active {% endif %}" id="{{ i }}">
                    <div class="row">
                        {#comida#}
                        <div class="col-md-6">
                            <h2 class="color-menu-personalizado">COMIDA {{ i }}</h2>

                            <div class="border-box border-menu-personalizado-light">
                                <div class="title-box-border-box bg-color-menu-personalizado-light">
                                    PRIMER PLATO
                                </div>

                                <div class="container-box-border-box">
                                    <form class="ac-custom ac-radio ac-fill" autocomplete="off">
                                        <a href="receta-detalle">
                                            <div class="row">
                                                <div class="col-xs-11 plr0">
                                                    <input id="comida_primer_1_{{ i }}" name="comida_primer{{ i }}" value="1" type="radio"><label for="comida_primer_1_{{ i }}">sopa de verduras</label>
                                                </div>
                                                <div class="col-xs-1 plr0">
                                                    <i class="fa fa-search pointer a-black"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="receta-detalle">
                                            <div class="row mt20">
                                                <div class="col-xs-11 plr0">
                                                    <input id="comida_primer_2_{{ i }}" name="comida_primer{{ i }}" value="0" type="radio"><label for="comida_primer_2_{{ i }}">crema de calabaza </label>
                                                </div>
                                                <div class="col-xs-1 plr0">
                                                    <i class="fa fa-search pointer a-black"></i>
                                                </div>
                                            </div>
                                        </a>
                                    </form>
                                </div>
                            </div>

                            <div class="border-box border-menu-personalizado-light">
                                <div class="title-box-border-box bg-color-menu-personalizado-light">
                                    SEGUNDO PLATO
                                </div>

                                <div class="container-box-border-box">
                                    <form class="ac-custom ac-radio ac-fill" autocomplete="off">
                                        <a href="receta-detalle">
                                            <div class="row">
                                                <div class="col-xs-11 plr0">
                                                    <input id="comida_segun_1_{{ i }}" name="comida_segun{{ i }}" value="1" type="radio"><label for="comida_segun_1_{{ i }}">pollo con verduras al vapor </label>
                                                </div>
                                                <div class="col-xs-1 plr0">
                                                    <i class="fa fa-search pointer a-black"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="receta-detalle">
                                            <div class="row mt20">
                                                <div class="col-xs-11 plr0">
                                                  <input id="comida_segun_2_{{ i }}" name="comida_segun{{ i }}" value="0" type="radio"><label for="comida_segun_2_{{ i }}">merluza al vapor </label>
                                                </div>
                                                <div class="col-xs-1 plr0">
                                                    <i class="fa fa-search pointer a-black"></i>
                                                </div>
                                            </div>
                                        </a>
                                    </form>
                                </div>
                            </div>
                        </div>
                        {#cena#}
                        <div class="col-md-6">
                            <h2 class="color-menu-personalizado">CENA {{ i }}</h2>

                            <div class="border-box border-menu-personalizado-light">
                                <div class="title-box-border-box bg-color-menu-personalizado-light">
                                    PRIMER PLATO
                                </div>

                                <div class="container-box-border-box">
                                    <form class="ac-custom ac-radio ac-fill" autocomplete="off">
                                        <a href="receta-detalle">
                                            <div class="row">
                                                <div class="col-xs-11 plr0">
                                                   <input id="cena_primer_1_{{ i }}" name="cena_primer{{ i }}" value="1" type="radio"><label for="cena_primer_1_{{ i }}">ensalada </label>
                                                </div>
                                                <div class="col-xs-1 plr0">
                                                    <i class="fa fa-search pointer a-black"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="receta-detalle">
                                            <div class="row mt20">
                                                <div class="col-xs-11 plr0">
                                                    <input id="cena_primer_2_{{ i }}" name="cena_primer{{ i }}" value="0" type="radio"><label for="cena_primer_2_{{ i }}">sopa</label>
                                                </div>
                                                <div class="col-xs-1 plr0">
                                                    <i class="fa fa-search pointer a-black"></i>
                                                </div>
                                            </div>
                                        </a>
                                    </form>
                                </div>
                            </div>

                            <div class="border-box border-menu-personalizado-light">
                                <div class="title-box-border-box bg-color-menu-personalizado-light">
                                    SEGUNDO PLATO
                                </div>

                                <div class="container-box-border-box">
                                    <form class="ac-custom ac-radio ac-fill" autocomplete="off">
                                        <a href="receta-detalle">
                                            <div class="row">
                                                <div class="col-xs-11 plr0">
                                                    <input id="cena_segun_1_{{ i }}" name="cena_segun{{ i }}" value="1" type="radio"><label for="cena_segun_1_{{ i }}">coliflor </label>
                                                </div>
                                                <div class="col-xs-1 plr0">
                                                    <i class="fa fa-search pointer a-black"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="receta-detalle">
                                            <div class="row mt20">
                                                <div class="col-xs-11 plr0">
                                                    <input id="cena_segun_2_{{ i }}" name="cena_segun{{ i }}" type="radio"><label for="cena_segun_2_{{ i }}">tortilla francesa </label>
                                                </div>
                                                <div class="col-xs-1 plr0">
                                                    <i class="fa fa-search pointer a-black"></i>
                                                </div>
                                            </div>
                                        </a>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                {% endfor %}

                <div class="row">
                    <div class="col-md-6 col-md-offset-6">
                        <button  class="btn btn-custom btn-menu-personalizado-light mt20" data-toggle="modal" data-target="#modalRecomendaciones"> Recomendaciones resto del día <i class="fa fa-angle-double-right"></i> </button>
                    </div>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button  class="btn btn-custom btn-menu-personalizado mt20" ><i class="fa fa-save"></i> Guardar Selección</button>
            </div>
        </div>

    </div>

    <!--modal recomendaciones resto del día-->
    {% include 'modal_resto_dia.twig' %}


{% endblock %}




