<!DOCTYPE html>
    <%- include("header.ejs") %>
    <body>
        <title>Stock Management | Costos</title>
        <div class ="table-container">


	<h1  class="title">Tabla de productos</h1>

            <table>
                
            </table>
            <table class = "table table-striped table-bordered" id = "sortTable">
                <thead>
                    <tr>
                        <th scope ="col">codigo</th>
                        <th scope ="col">nombre</th>
                        <th scope ="col">precio</th> 
                        <th scope ="col">costo</th>
                    </tr>
                </thead>
                <tbody>
                <% for(var i=0; i < prods.length; i++) { %>
                    <tr>
                        <td><%= prods[i].codigo %></td>
                        <td>
                            <p><%= prods[i].nombre %></p>
                            <a href="/delete/<%=prods[i].codigo %>" class="btn btn-outline-danger">ELIMINAR</a>
                        </td>
                        <td><%= prods[i].precio %></td>
                        <td><%= prods[i].costo  %></td>
                    </tr>
                <% } %>
                </tbody>
            </table>
        </div>

	<h2 class="title">Agregar Producto</h2>

     <form method="post"  class= "form-container" > 
	
        <div class="form-group row ">    
            <div class="col-xs-2">
                <label for="ex1">Nombre Producto</label>
                <input class="form-control" name="nombre" id="ex1" type="text">
            </div>
    
            <div class="col-xs-2">
                <label for="ex1">Precio</label>
                <input class="form-control" name="precio" id="ex1" type="text">
            </div>	
    
            <div class="col-xs-2">
                <label for="ex1">Costo</label>
                <input class="form-control" name="costo" id="ex1" type="text">
            </div>
            
            <div class="col-xs-2">
                <label for="ex1">Stock</label>
                <input class="form-control" name="stock" id="ex1" type="text">
            </div>

        </div>

	<div class="button-pad">
	<button class="btn btn-dark mt-3" type="submit">Submit</button>
	</div>
	    <script> 
            $('#sortTable').DataTable();
        </script>

    </body>
</html>
