{% extends "base.html" %}

{% block title %}Forgot Password{% endblock %}

{% block content %}

<style>

body {
    background: #f5f7fb;
}


/* Main wrapper */
.forgot-wrapper {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Card */
.forgot-card {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    background: white;
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
}


/* Header */
.forgot-header {

    background: linear-gradient(135deg, #f6c23e, #ff9f1c);
    color: white;
    padding: 45px 30px;
    text-align: center;

}


.forgot-icon {

    width: 90px;
    height: 90px;
    border-radius: 50%;

    background: rgba(255,255,255,.20);

    display: flex;
    justify-content: center;
    align-items: center;

    margin: auto;

    font-size: 38px;

}


/* Body */
.forgot-body {

    padding: 45px;

}


/* Inputs */
.input-group-text {

    background: white;
    border-right: none;

}


.form-control {

    height: 55px;
    border-left: none;
    border-radius: 0 10px 10px 0;
    font-size: 16px;

}


.form-control:focus {

    box-shadow: 0 0 0 .25rem rgba(246,194,62,.25);
    border-color: #f6c23e;

}


/* Button */

.btn-reset {

    height: 55px;
    border-radius: 10px;

    background: linear-gradient(135deg,#f6c23e,#ff9f1c);

    border:none;

    color:white;

    font-weight:600;

    transition:.3s;

}


.btn-reset:hover {

    transform: translateY(-2px);

    box-shadow:0 12px 25px rgba(255,159,28,.35);

}



/* Back link */

.back-login {

    text-decoration:none;

    color:#0d6efd;

    font-weight:500;

}


.back-login:hover {

    text-decoration:underline;

}



/* Loading overlay */

.loading-overlay {

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.65);

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    color:white;

    z-index:9999;

}


.spinner {

    width:55px;

    height:55px;

    border:5px solid rgba(255,255,255,.25);

    border-top:5px solid white;

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin-bottom:20px;

}


@keyframes spin {

    from {
        transform:rotate(0deg);
    }

    to {
        transform:rotate(360deg);
    }

}



@media(max-width:768px){

    .forgot-body {

        padding:30px;

    }


    .forgot-header {

        padding:35px 20px;

    }

}


</style>



<div class="container forgot-wrapper">


<div class="card forgot-card col-md-6 col-lg-5">


    <!-- Header -->

    <div class="forgot-header">


        <div class="forgot-icon">

            <i class="fas fa-key"></i>

        </div>


        <h3 class="mt-4 fw-bold">

            Forgot Password?

        </h3>


        <p class="mb-0">

            Recover your account securely

        </p>


    </div>



    <!-- Body -->

    <div class="forgot-body">


        <p class="text-muted text-center mb-4">

            Enter your registered email address and we will send you a 
            <strong>6-digit OTP</strong> to reset your password.

        </p>



        <form method="POST"
              action="{{ url_for('send_password_reset_otp') }}"
              id="resetForm">



            <div class="mb-4">


                <label class="form-label fw-semibold">

                    Email Address

                </label>



                <div class="input-group">


                    <span class="input-group-text">

                        <i class="fas fa-envelope"></i>

                    </span>



                    <input 
                        type="email"
                        name="email"
                        class="form-control"
                        placeholder="Enter your email"
                        required>


                </div>


            </div>





            <button type="submit"
                    class="btn btn-reset w-100"
                    id="sendBtn">


                <i class="fas fa-paper-plane me-2"></i>

                Send OTP


            </button>



        </form>



        <hr class="my-4">



        <div class="text-center">


            <a href="{{ url_for('job_seeker_login') }}"
               class="back-login">


                <i class="fas fa-arrow-left me-2"></i>

                Back to Login


            </a>


        </div>



    </div>


</div>


</div>





<!-- Loading Overlay -->

<div id="loadingOverlay"
     class="loading-overlay">


    <div class="spinner"></div>


    <h5>

        Sending OTP...

    </h5>


    <p>

        Please wait while we process your request

    </p>


</div>





<script>


document.getElementById('resetForm')
.addEventListener('submit', function(){


    document.getElementById('loadingOverlay')
    .style.display='flex';



    document.getElementById('sendBtn')
    .disabled=true;


});



</script>



{% endblock %}