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

<% if (privilegios.indexOf('registrarColor') >= 0) { %>

<!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>
    <style>
        form, h3{
            padding-left: 20px;
            padding-top: 20px;
        }
        #color, #descripcion, #imagen{
            max-width: 900px;
        }
        #imagen{
            margin-top: 10px;
        }
    </style>
    <body>
        <h3>Registrar nuevo color</h3>
        <form action="/register" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>" >
            <div class="mb-3">
                <label for="color" class="form-label"><strong>Color</strong></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"><strong>Descripcion</strong></label>
                <textarea required type="text" name="descripcion" class="form-control" id="descripcion" placeholder="Ingresa la descripciÃ³n de este color" rows="5"></textarea>
            </div>
            <label for="imagen"><strong>Imagen</strong></label><br>
            <div class="input-group mb-3">
                <input required type="file" name="imagen" class="form-control" id="imagen">
            </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>

<% } else{%>

<html>
    <style>
        p{
            margin: 20px
        }
    </style>
    <p><strong>Lo sentimos, no cuentas con los privilegios para registrar colores.</strong></p>
</html>

<% } %>