<div class="container">
  <div class="row">
    <div class="col-md-8 pt-4">
        <div class="container">
            <div class="card">
                <div class="card-header text-left">
                    <h5>Productos</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive-sm">
                    <table class="table">
                        <thead class="thead-dark">
                            <tr>
                            <th scope="col">BarCode</th>
                            <th scope="col">Descripción</th>
                            <th scope="col">Precio</th>
                            <th scope="col">Unidades</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each productos_usuario}}
                            <tr>
                            <th scope="row">{{this.barcode}}</th>
                            <td>{{this.title}}</td>
                            <td>{{this.precio}}</td>
                            <td>{{this.unidades}}</td>
                            </tr>
                            {{else}}
                            <tr>
                            <th scope="row">Ninguno</th>
                            </tr>
                            {{/each}}
                        </tbody>
                    </table>
                    </div>
                    <h5 class="float-right">Total: {{subtotal}}</h5>
                    <br>
                    <form action="/venta/factura" method="POST">
                    <div class="form-group">
                        <a href="/" class="btn-succes btn btn-primary btn-danger float-left">Limpiar</a>
                        <button class="btn-succes btn btn-primary float-right" type="submit">Generar Factura</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 pt-4">
        <div class="container">
            <div class="card">
                <div class="card-header">
                    <h5>Añadir Productos</h5>
                </div>
                <div class="card-body">
                        <form action="/venta/addproducto" method="POST">
                        <div class="form-group">
                            <input list="browsers" class="form-control" name="title_producto" value="">
                            <datalist id="browsers" >
                                {{#each productos_db}}
                                <option value="{{this.title}}"/>
                                {{/each}}
                            </datalist>
                        </div>
                        <div class="from-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Unidades</span>
                                </div>
                                <input type="text" class="form-control" value="1" name="unidades" aria-describedby="basic-addon3">
                            </div>
                        </div>
                        <div class="form-group">
                            <button class="btn-succes btn btn-primary float-right">Agregar</button>
                        </div> 
                        </form>
                </div>
            </div>
        </div>
    </div>
  </div>