<%- 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;
        }
    </style>
<body>
    <h3>Estos son todos los colores registrados</h3>
    <% 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="..." 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>
    <% } %>   
</body>
