<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <title>LARP Event Bookings: Initial Config</title>
</head>
<body>
    <div class="row mt-3">
        <div class="col-md-6 offset-md-3">
            <div class="card shadow py-3 px-3">
                <div class="card-header bg-white">
                    <h4>LARP Event Bookings - Initial Config</h4>
                </div>
                <div class="card-body">
                    <form action="/initialConfig" method="POST" class="validated-form" novalidate>
                        <div class="lead text-center">Welcome to the LARP Event Booking system</div>
                        <div class="div">Please complete the following fields to complete your setup.</div>
                        <div class="mb-3">
                            <label for="siteName">System Name</label>
                            <input type="text" class="form-control" name="config[siteName]" id="siteName" value="" required>
                        </div>
                        <div class="mb-3">
                            <label for="techContactName">Technical Contact Name</label>
                            <input type="text" class="form-control" name="config[techContactName]" id="techContactName" value="" required>
                        </div>
                        <div class="mb-3">
                            <label for="techContactEmail">Technical Contact E-mail</label>
                            <input type="email" name="config[techContactEmail]" class="form-control" id="techContactEmail" value="" required>
                        </div>
                        <div class="mb-3">
                            <label for="siteDescription">System Description</label>
                            <textarea name="config[siteDescription]" class="form-control" id="siteDescription" cols="30" rows="10"></textarea>
                        </div>
                        <hr>
                        <div class="mb-3">
                            <label for="adminUsername">Admin E-mail Address</label>
                            <input type="email" class="form-control" name="user[username]" id="adminEmail" required>
                            <div class="invalid-feedback">Please enter a valid e-mail address</div>
                        </div>
                        <div class="mb-3">
                            <label for="adminPassword">Password</label>
                            <input type="password" name="user[password]" id="adminPassword" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" class="form-control" required>
                            <div class="invalid-feedback">Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters</div>
                        </div>
                        <button type="submit" class="btn btn-success">Create System Config</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src='/js/validateForms.js'></script>
    <script src="/js/tinymce.js"></script>
</body>
</html>