<!-- Root element for center items -->
{% extends 'auth/base.html' %}

{% block content %}
<div class="flex flex-col h-screen bg-gray-100">
    <!-- Auth Card Container -->
    <div class="grid place-items-center mx-2 my-20 sm:my-auto">
        <!-- Auth Card -->
        <div class="w-11/12 p-12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 
            px-6 py-10 sm:px-10 sm:py-6 
            bg-white rounded-lg shadow-md lg:shadow-lg">

            <!-- Card Title -->
            <h2 class="text-center font-semibold text-3xl lg:text-4xl text-gray-800">
                Password Reset Request
            </h2>

            <form class="mt-10" method="POST" action="{{ route('change_password.store') }}">
                <input type="hidden" value="{{ request().input('token', '') }}" name="token">
                <!-- Email Input -->
                <label for="email" class="block text-xs font-semibold text-gray-600 uppercase">New Password</label>
                <input id="password" type="password" name="password" placeholder="*******" autocomplete="password"
                    class="block w-full py-3 px-1 mt-2 
                    text-gray-800 appearance-none 
                    border-b-2 border-gray-100
                    focus:text-gray-500 focus:outline-none focus:border-gray-200"
                    required />

                <label for="confirm_password" class="block text-xs font-semibold text-gray-600 uppercase">Confirm New Password</label>
                <input id="confirm_password" type="password" name="confirm_password" placeholder="*******" autocomplete="confirm_password"
                    class="block w-full py-3 px-1 mt-2 
                    text-gray-800 appearance-none 
                    border-b-2 border-gray-100
                    focus:text-gray-500 focus:outline-none focus:border-gray-200"
                    required />

                <!-- Auth Button -->
                <button type="submit"
                    class="w-full py-3 mt-10 bg-gray-800 rounded-sm
                    font-medium text-white uppercase
                    focus:outline-none hover:bg-gray-700 hover:shadow-none">
                    Send Request
                </button>
            </form>
        </div>
    </div>
</div>

{% endblock %}