{% extends "base.html" %}

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

<!-- Specific CSS goes HERE -->
{% block stylesheets %}
<style>
    .password-input-container {
        position: relative;
    }

    .password-tooltip {
        position: absolute;
        top: 100%;
        left: 0;
        padding: 5px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        font-size: 12px;
        color: #333;
        display: none;
    }

    .password-input-container:hover .password-tooltip {
        display: block;
    }
</style>
{% 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"  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&nbsp;must&nbsp;be&nbsp;at&nbsp;least&nbsp;8&nbsp;characters&nbsp;long&nbsp;and&nbsp;contain&nbsp;at&nbsp;least&nbsp;one&nbsp;uppercase&nbsp;letter,&nbsp;one&nbsp;lowercase&nbsp;letter,&nbsp;one&nbsp;digit,&nbsp;and&nbsp;one&nbsp;special&nbsp;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 %}