<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <title>Job Competency System</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/album/" />

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
    <!-- Custom styles for this template -->
    <link href="css/custom.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>

<body class="min-vh-100">
    <%- include('common/header'); -%>
            <section class="gradient-custom">
                <div class="container h-100">
                    <div class="row justify-content-sm-center h-100">
                        <div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
                            <%- include ('./partials/messages') %>
                            <div class="card shadow-lg">
                                <div class="card-body p-5">
                                    <h1 class="fs-4 card-title fw-bold mb-4">Register</h1>
                                    <form method="POST" class="needs-validation" novalidate="" autocomplete="off">
                                        <div class="mb-3">
                                            <label class="mb-2 text-muted" for="firstName">First name</label>
                                            <input id="firstName" type="text" class="form-control" name="firstName" value="" required autofocus>
                                            <div class="invalid-feedback">
                                                First name is required	
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="mb-2 text-muted" for="lastName">Last name</label>
                                            <input id="lastName" type="text" class="form-control" name="lastName" value="" required autofocus>
                                            <div class="invalid-feedback">
                                                Last name is required	
                                            </div>
                                        </div>
        
                                        <div class="mb-3">
                                            <label class="mb-2 text-muted" for="email">E-Mail Address</label>
                                            <input id="email" type="email" class="form-control" name="email" value="" required>
                                            <div class="invalid-feedback">
                                                Email is invalid
                                            </div>
                                        </div>
        
                                        <div class="mb-3">
                                            <label class="mb-2 text-muted" for="password">Password</label>
                                            <input id="password" type="password" class="form-control" name="password" required>
                                            <div class="invalid-feedback">
                                                Password is required
                                            </div>
                                        </div>
        
                                        <p class="form-text text-muted mb-3">
                                            By registering you agree with our terms and condition.
                                        </p>
        
                                        <div class="align-items-center d-flex">
                                            <button type="submit" class="btn btn-primary ms-auto">
                                                Register	
                                            </button>
                                        </div>
                                    </form>
                                </div>
                                <div class="card-footer py-3 border-0">
                                    <div class="text-center">
                                        Already have an account? <a href="login" class="text-dark">Login</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        
            <script src="js/login.js"></script>

        <%- include('common/footer') -%>
</body>

</html>