<%- include('includes/head.ejs') %>

<!DOCTYPE html>
<html>
    <head><meta charset="utf-8"></head>
    <style>
        .card {
            margin-top: 40px;
            margin-right: 10px;
            margin-left: 20px;
        }
        h3{
            padding-top: 20px;
            padding-left: 20px;
        }
        #search{
            display: flex;
            position: sticky;
            top: 0;
            left: 7%;
            margin-top: 10px;
        }
    </style>
<body>

    <div id="search">
        <form class="d-flex" role="search" id="search">
            <input class="form-control me-2" type="text" placeholder="Search" aria-label="Search" id="buscar">
        </form>
    </div>

    <h3>Estos son todos los colores registrados</h3>
    
    <div id="resultados">
        <% if (colores.length > 0) { %>

            <div class="row row-cols-1 row-cols-md-3 g-4">
                <% let columns = 0; %>
                <% for (let color of colores) { %>
                    <% if (columns % 100 == 0) { %>
            </div>
    
            <div class="row row-cols-1 row-cols-md-3 g-4">
                    <% } %>
                    <% columns++; %>
                    <div class="col">
                        <div class="card">
                            <img src="/uploads/<%= color.imagen %>" class="card-img-top" alt="...">
                            <div class="card-body">
                              <h5 class="card-title"><%=color.nombre%></h5>
                              <p class="card-text"><%=color.descripcion%></p>
                            </div>
                        </div>
                    <% } %>
                    </div>
            </div>
            <br><br>
        <% } else { %>
            <h1>No hay más colores registrados</h1>
        <% } %>
    </div>
    
    <script>

        document.getElementById("buscar").onkeyup = () => {
        //función que manda la petición asíncrona
        const valorBusqueda = document.getElementById("buscar").value;

        fetch('/list/' + valorBusqueda, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            }
        }).then(result => {
            return result.json(); //Regresa otra promesa
        }).then(data => {
            //Modificamos el DOM de nuestra página de acuerdo a los datos de la segunda promesa
            console.log(data.colores);
            let respuesta = "";

            if(data.colores.length > 0){
                respuesta += '<div class="row row-cols-1 row-cols-md-3 g-4">';
                let columns = 0;
                for (let color of data.colores){
                    if (columns % 100 == 0){
                        respuesta += '</div>';
                        respuesta += '<div class="row row-cols-1 row-cols-md-3 g-4">';
                    }
                    columns++;
                    respuesta += '<div class="col">';
                        respuesta += '<div class="card">';
                            respuesta += '<img src="/uploads/' + color.imagen + '" class="card-img-top" alt="...">';
                            respuesta += '<div class="card-body">';
                                respuesta += '<h5 class="card-title">' + color.nombre + '</h5>';
                                respuesta += '<p class="card-text">' + color.descripcion + '</p>';
                            respuesta += '</div>';
                        respuesta += '</div>';
                }
                    respuesta += '</div>';
                    respuesta += '</div>';
                    respuesta += '<br><br>';

            } else{
                respuesta += '<br>';
                respuesta += '<h4>&nbsp&nbsp&nbspLo sentimos, no tenemos información sobre ese color.</h4>';
            }

        document.getElementById("resultados").innerHTML = respuesta;

        }).catch(err => {
            console.log(err);
        });
        }
    </script>

</body>