<ons-page id="pageListaCompra">
    <ons-toolbar>
        <div class="left">
            <ons-toolbar-button id="btnMenuIzquierda" onclick="fn.open()">
                <ons-icon icon="md-menu"></ons-icon>
            </ons-toolbar-button>
        </div>
        <div class="center">
            Lista de la Compra
        </div>
        <div class="right">
            <ons-toolbar-button onclick="document.querySelector('#menu_filter_lista_compra').open()">
                <ons-icon icon="fa-filter"></ons-icon>
            </ons-toolbar-button>
        </div>
    </ons-toolbar>

    <ons-pull-hook id="pull-hook" threshold-height="120px">
        <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
    </ons-pull-hook>

    <ons-gesture-detector>
        <ons-list id="listadolistacompra"></ons-list>
    </ons-gesture-detector>



    <ons-bottom-toolbar style="background-color:  var(--colorTextos); color: #fff;">
        <ons-row vertical-align="center" style="text-align: center; height:100%;">
            <ons-col>

            </ons-col>
            <ons-col>
                &nbsp;
            </ons-col>

            <ons-col>
                <ons-toolbar-button onclick="myNavigator.pushPage('nuevoproducto.html')" style="color: #fff;">
                    <ons-icon icon="fa-plus"></ons-icon>
                </ons-toolbar-button>
            </ons-col>

            <ons-col>
                &nbsp;
            </ons-col>

            <ons-col>

            </ons-col>
        </ons-row>
    </ons-bottom-toolbar>
</ons-page>























<!--             <header>
        <form id="formulario">
            <input type="text" id="producto" placeholder="Nuevo Producto...">
            <select id="categoria">
                <?php
                foreach ($categorias as $key => $value) {
                    echo '<option value=' . $key . '>' . $value . '</option>';
                }
                ?>
            </select>
            <button type="button" id="botonguardar" onclick="nuevo();"><i class="fas fa-save"></i> Guardar</button>
            <button type="button" id="botonfiltrar" onclick="filtrar();"><i class="fas fa-filter"></i> Filtrar</button>
        </form>
    </header> -->