{% extends 'cPanel/base.html' %}

{% block content %}
<!-- https://play.tailwindcss.com/MIwj5Sp9pw -->
<div class="py-16">
    <div class="container mx-auto">


        <h1 class="text-4xl text-center capitalize">change Password </h1>




<div class="flex w-full justify-center">

    <form method="post" class="shadow-xl p-4 max-w-md">
    
        {% csrf_token %}
    
        <div class="flex flex-wrap w-full">
            <label for="id_old_password" class="pl-2">Old Password<span class="text-red-500">*</span></label>
            <input type="password" name="old_password" autocomplete="current-password" autofocus="" required
                id="id_old_password" class="w-full rounded ">
        </div>
    
        <div class="flex flex-wrap w-full mt-2">
            <label for="id_new_password1" class="pl-2">New Password<span class="text-red-500">*</span></label>
            <input type="password" name="new_password1" autocomplete="new-password" required=""
                aria-describedby="id_new_password1_helptext" id="id_new_password1" class="w-full rounded " minlength="8" maxlength="30">
        </div>
        <div class="flex flex-wrap w-full mt-2">
            <label for="id_new_password2" class="pl-2">Re-Type Password
                <span class="text-red-500">*</span></label> <input type="password" name="new_password2" autocomplete="new-password"
                required="" id="id_new_password2" class="w-full rounded " minlength="8" maxlength="30">
        </div>
        <div>
            {% if messages %}
            <ul class="messages text-red-700">
                {% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}</li>
                    {% endfor %}
            </ul>
            {% endif %}
        </div>
        <div class="hidden " id="id_new_password1_helptext">
            <ul>
                <li>Your password can’t be too similar to your other personal
                    information.</li>
                <li>Your password must contain at least 8 characters.</li>
                <li>Your password can’t be a commonly used password.</li>
                <li>Your password can’t be entirely numeric.</li>
            </ul>
        </div>
    
        <div class="flex gap-4 w-full justify-center mt-2">
            <input type="submit" value="Submit"
                class="bg-blue-900 text-xl text-white px-6 py-2 rounded">
            <button onclick="history.back()"
                class="bg-red-600 text-white text-xl rounded px-6 py-2">Cancel</button>
        </div>
    
    </form>
</div>


       
    </div>
</div>

{% endblock content %}