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

{% block content %}
    <!-- barra superior titulo de pagina-->
    <div class="div-title bg-color-lista-compra">
        <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>
    <!--contenido-->
    <div class="container mt20 pb40" >
        <div class="row">
            <div class="col-md-6">
                <!--lista de la compra-->
                <div class="border-box border-lista-compra">
                    <div class="title-box-border-box bg-color-lista-compra">
                        MI LISTA DE LA COMPRA SEMANAL
                    </div>

                    <div class="container-box-border-box">
                        <div class="div-scrollable-lista">
                            <form class="ac-custom ac-checkmark" autocomplete="off">
                                  <ul class="text-left ml0">
                                      {% if count(ingredients) == 0 %}
                                        <h4>Sin Ingredientes</h4>
                                      {% endif %}
                                      {% for i in ingredients %}
                                        <li> <input id="check_{{ i.id }}" name="check_{{ i.id }}" type="checkbox" used="{{ i.used }}" rel="{{ i.ingredient_id }}" {% if i.ingredient_id == null %} rel2="{{ i.id }}" {% endif %}/><label for="check_{{ i.id }}">{{ i.desc }}</label></li>
                                      {% endfor %}
                                  </ul>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h3 class="mt40" >Puedes editar tu lista de la compra borrando y añadiendo productos.</h3>
                <!--botones-->
                <div class="row ">

                    <div class="col-xs-6">
                        <button  class="btn btn-custom btn-delete mt20" data-toggle="modal" data-target="#modalDeleteAll" ><i class="fa fa-trash"></i> Todos</button>
                    </div>
                    <div class="col-xs-6">
                        <button  class="btn btn-custom btn-delete mt20"  data-toggle="modal" data-target="#modalDelete"><i class="fa fa-trash"></i> Marcados</button>
                    </div>
                </div>
                <a  class="btn btn-custom btn-other mt20" data-toggle="modal" data-target="#modalProducto"><i class="fa fa-plus"></i> Productos</a>
                <!--logo del super-->
                <div class="text-center mt40" style="margin-top:80px;">
                    <h3>Si quieres, puedes hacer la compra necesaria para la elaboración de tu menú a través de la web DelSuper en el supermercado que prefieras. </h3>
                    <button  class="btn btn-custom btn-lista-compra mt20"> comprar en delsuper <i class="fa fa-angle-double-right"></i> </button>

                    <img src="assets/img/listacompra/logo-del-super.png" class="img-responsive-custom mt40"/>
                </div>
            </div>
        </div>
    </div>
    <!--modal add producto-->
    {% include 'modal_add_product.twig' %}
    <!--modal delete-->
    {% include 'modal_delete_all.twig' %}
    {% include 'modal_delete.twig' %}
{% endblock %}




