<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML Form</title>
    <link rel="stylesheet" href="/styles/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous" />
</head>
<body>
    <div class="container">
        <% if (error) { %>
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <%= error %>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        <% } %>
        <form id="userForm" class="needs-validation" action="/userform" method="POST">
            <fieldset class="row g-3">
                <legend class="text-primary"><h2>Personal Details:</h2></legend>
                <div class="col-md-4">
                    <label for="fname">First Name: </label>
                    <input type="text" id="fname" name="fname" placeholder="Give your first name here" autofocus>
                </div>
                <br>
                <div class="col-md-4">
                    <label for="lname">Last Name: </label>
                    <input type="text" id="lname" name="lname" placeholder="Give your last name here">
                </div>
                <br>
                <div class="col-md-4">
                    <label for="email">Email: </label>
                    <input type="email" name="email" id="email" placeholder="abc@anymail.com" required>
                </div>
                <br>
                <div class="col-md-6">
                    <label for="pass">Password: </label>
                    <input type="password" name="pass" id="pass" placeholder="Set a password" minlength="8" required>
                </div>
                <br>
                <div class="col-md-6">
                    <label for="confpass">Confirm Password: </label>
                    <input type="password" name="confpass" id="confpass" placeholder="Re-enter your password" minlength="8" required>
                </div>
                <br>
                <div class="col-md-4">
                    <label for="date">Date of Birth: </label>
                    <input type="date" name="date" id="date" placeholder="dd/mm/yyyy" min="1900-01-01" max="2006-12-30">
                </div>
                <br>
                <div class="col-md-4">
                    <label for="phone">Mobile Number: </label>
                    <input type="tel" name="phone" id="phone" placeholder="0123456789" maxlength="10" size="10">
                </div>
                <br>
                <div class="col-md-4">
                    <label for="gender">Please specify your gender: </label>
                    <select name="gender" id="gender">
                        <option selected disabled value="">Choose...</option>
                        <option>Male</option>
                        <option>Female</option>
                        <option>Others</option>
                    </select>
                </div>
                <br>
                <div class="col">
                    <label for="address">Address: </label>
                    <br>
                    <textarea name="address"></textarea>
                </div>
                <br>    
            </fieldset>
            <br>
            <div>
                <button type="submit">NEXT</button>
            </div>
            
        </form>
    
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" ></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
    <script src="/js/validation.js"></script>

</body>
</html>