{% extends "base.html" %}
{% block title %}Job Seeker Login{% endblock %}

{% block content %}

<style>
body{
    background:#f5f7fb;
}

.login-wrapper{
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-card{
    border:none;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.login-left{
    background:linear-gradient(135deg,#0d6efd,#2f80ed);
    color:white;
    padding:60px 40px;
}

.login-left h2{
    font-weight:700;
}

.login-left p{
    opacity:.9;
}

.login-right{
    padding:50px;
    background:white;
}

.input-group-text{
    background:white;
    border-right:none;
}

.form-control{
    border-left:none;
    height:55px;
    font-size:16px;
}

.form-control:focus{
    box-shadow:none;
    border-color:#86b7fe;
}

.input-group:focus-within{
    box-shadow:0 0 0 .25rem rgba(13,110,253,.15);
    border-radius:10px;
}

.btn-login{
    height:55px;
    border-radius:10px;
    background:linear-gradient(135deg,#0d6efd,#2f80ed);
    border:none;
    font-weight:600;
    transition:.3s;
}

.btn-login:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(13,110,253,.35);
}

.password-toggle{
    cursor:pointer;
    background:white;
    border-left:none;
}

.login-links a{
    text-decoration:none;
}

.login-links a:hover{
    text-decoration:underline;
}

.loading-overlay{
    position:fixed;
    inset:0;
    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{
to{transform:rotate(360deg);}
}

@media(max-width:991px){

.login-left{
display:none;
}

.login-right{
padding:35px;
}

}
</style>

<div class="container login-wrapper">

<div class="card login-card col-lg-10">

<div class="row g-0">

<div class="col-lg-5 login-left d-flex flex-column justify-content-center">

<h2>Welcome Back!</h2>

<p class="mt-3">

Login to access your profile, apply for jobs, track applications and receive job alerts.

</p>

<div class="mt-5">

<i class="fas fa-briefcase fa-4x opacity-75"></i>

</div>

</div>

<div class="col-lg-7 login-right">

<h3 class="fw-bold mb-2">Job Seeker Login</h3>

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

Sign in to continue.

</p>

<form method="POST" id="loginForm">

<input type="hidden" name="next" value="{{ next }}">

<div class="mb-4">

<label class="form-label">Email Address</label>

<div class="input-group">

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

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

</span>

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

</div>

</div>

<div class="mb-4">

<label class="form-label">Password</label>

<div class="input-group">

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

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

</span>

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

<span class="input-group-text password-toggle" onclick="togglePassword()">

<i class="fas fa-eye" id="eyeIcon"></i>

</span>

</div>

</div>

<button class="btn btn-primary btn-login w-100" id="loginBtn">

<i class="fas fa-sign-in-alt me-2"></i>

Login

</button>

</form>

<hr class="my-4">

<div class="text-center login-links">

<p>

New job seeker?

<a href="{{ url_for('register') }}">Create Account</a>

</p>

<p>

<a href="{{ url_for('forgot_password') }}">

Forgot Password?

</a>

</p>

</div>

</div>

</div>

</div>

</div>

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

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

<h5>Signing you in...</h5>

<p>Please wait</p>

</div>

<script>

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

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

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

});

function togglePassword(){

const password=document.getElementById('password');

const icon=document.getElementById('eyeIcon');

if(password.type==="password"){

password.type="text";

icon.classList.replace("fa-eye","fa-eye-slash");

}else{

password.type="password";

icon.classList.replace("fa-eye-slash","fa-eye");

}

}

</script>

{% endblock %}