<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="general-arthur.css">

    <style>
        .form-field{
            max-width: 600px;
            width: 80%;
            margin: auto;
        }
        .form-field input[type=checkbox]{
            width: 25px !important;
        }
        button{
            padding: 10px;
        }
    </style>
</head>
<body>
    <%- include('../components/header.ejs') %> 

    <img src="/neuschwanstein.jpg" alt="Castle background" class="background" style="z-index: -2;">

    <div class="content">
        <div class="frame-body" style="width: 80%; max-width: 920px;">
            <div class="frame-top"></div>
            <div class="frame-content">
                <h3>Create an account</h3>
                <form method="POST" id="register" >
                    <% for(let i=0; i<fields.length; i++){ %>
                        <div class='form-field'<% if(badInputs[i] === true){ %> style="background-color: rgba(255,50,0,0.3);" <% } %>>
                            <p>
                                <%= fields[i].label %>: 
                                <span style='color:red;'>
                                    <%= ((fields[i].required) ? '*': '') %>  
                                </span>
                            </p>
                            <input 
                                type='<%= fields[i].field_type %>' 
                                id='<%= fields[i].id %>' 
                                name='<%= fields[i].id %>' <% if(fieldContents[fields[i].id] != undefined && fieldContents[fields[i].id] != ''){ %> 
                                <% if(fields[i].field_type == 'checkbox'){ %> checked <% }else{ %> 
                                value='<%= fieldContents[fields[i].id] %>'<% }} %> 
                                <%= ((fields[i].required) ? 'required' : '') %> 
                                maxlength='<%= fields[i].max_length %>' 
                                onfocus='this.parentElement.style.backgroundColor = "rgba(0,0,0,0)"'; 
                                style='width:100%'> 
                        </div>
                    <% } %> 
                    <button type="submit">Submit</button>
                    <button type="reset" onclick="return confirm('Do you really want to reset the form?')">Reset</button>
                </form>
            </div>
        </div>
    </div>
    
    <%- include('../components/footer.ejs') %> 
</body>
</html>