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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    </head>
    <title>Laboratorio 13 MVC</title>
    <style>
        form, h3{
            padding-left: 20px;
            padding-top: 20px;
        }
    </style>
    <body>
        <h3>Registrar nuevo color</h3>
        <form action="/register" method="POST"> 
            <div class="mb-3">
                <label for="color" class="form-label">Color</label>
                <input required type="text" name="color" class="form-control" id="color" placeholder="Ingresa el color a registrar">
            </div>
            <div class="mb-3">
                <label for="descripcion" class="form-label">Descripción</label>
                <input type="text" class="form-control" id="descripcion" placeholder="Ingresa la descripción de este color">
            </div><br>
            <input class="btn btn-success" type="submit" value="Confirmar" $input-padding-x: 55px>
        </form>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>