{% 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">
                        CARRITO DE LA COMPRA
                    </div>

                    <div class="container-box-border-box">
                        <form class="ac-custom ac-checkbox ac-checkmark" autocomplete="off">
                            {% for i in 0..14 %}
                                <div class="mt10">
                                    <input id="check_{{ i }}" name="check_{{ i }}" type="checkbox"><label>Ingrediente {{ i }}</label>
                                </div>

                            {% endfor %}
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <!--logo del super-->
                <div class="text-center mt40">
                    <h2>Haz la compra necesaria para la elaboración de tu menú en el supermercado DelSuper</h2>
                    <img src="assets/img/listacompra/logo-del-super.png" class="img-responsive-custom"/>
                </div>
                <!--botones-->
                <div class="row mt40">
                    <div class="col-md-6">
                        <button  class="btn btn-custom btn-delete mt20" ><i class="fa fa-trash"></i> Todos</button>
                    </div>
                    <div class="col-md-6">
                        <button  class="btn btn-custom btn-delete mt20" ><i class="fa fa-trash"></i> Marcados</button>
                    </div>
                </div>

                <button  class="btn btn-custom btn-other mt20" ><i class="fa fa-plus"></i> Productos</button>

                <button  class="btn btn-custom btn-lista-compra mt20"> comprar en delsuper <i class="fa fa-angle-double-right"></i> </button>
            </div>

        </div>




    </div>
{% endblock %}




