{% extends "base.html" %}

{% block title %} UI Forms {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <!-- [ Main Content ] start -->
    <div class="pcoded-main-container">
        <div class="pcoded-wrapper">
            <div class="pcoded-content">
                <div class="pcoded-inner-content">
                    <!-- [ breadcrumb ] start -->
                    <div class="page-header">
                        <div class="page-block">
                            <div class="row align-items-center">
                                <div class="col-md-12">
                                    <div class="page-header-title">
                                        <h5 class="m-b-0"></h5>
                                    </div>
                                    <ul class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="/dashboard"><i class="feather icon-home"></i></a></li>
                                        <li class="breadcrumb-item"><a href="/user_display">Users</a></li>
                                        <li class="breadcrumb-item"><a href="">Add User</a></li> 
                                    </ul>
                                    <div class="page-header-title" style="text-align: center;">
                                        <h5 class="m-b-10" >Add User</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- [ breadcrumb ] end -->
                    <div class="main-body">
                        <div class="page-wrapper">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-4">
                                                </div>
                                                <div class="col-md-4">
                                                    <form role="form" method="post" action="/create">
                                                        <label>Username</label>
                                                        <div class="input-group mb-3">
                                                            <input type="text" name="username" placeholder="Username" class="form-control" required pattern=".{6,}" title="Username must be at least 6 characters long" required>
                                                        </div>
                                                        <label>Roll</label>
                                                        <div>
                                                        <select class="form-control" name="role" id="role">
                                                            <option>User</option>
                                                            <option>Checker</option>
                                                        </select>
                                                        </div>
                                                        <label>Email</label>
                                                        <div class="input-group mb-3">
                                                            <input type="email" name="email" placeholder="Email" class="form-control" required>
                                                        </div>
                                                        <label>Password</label>
                                                        <div class="input-group mb-4">
                                                            <input type="password" name="password" placeholder="Password" class="form-control" required pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$" title="Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character.">
                                                        </div>
                                                        <div style="text-align: center;">
                                                        <button type="submit" name="register" class="btn btn-primary shadow-2 mb-4 submit">Submit</button>
                                                        </div>
                                                        <div class="col-md-4">
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}