{% extends "base.html" %}

{% block title %}Register{% endblock %}

{% block content %}

<style>

body{
    background:#f5f7fb;
}


.register-wrapper{

    min-height:80vh;

    display:flex;

    align-items:center;

    justify-content:center;

}



.register-card{

    border:none;

    border-radius:22px;

    overflow:hidden;

    background:white;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

}



.register-header{

    background:linear-gradient(135deg,#0d6efd,#2f80ed);

    color:white;

    padding:45px 30px;

    text-align:center;

}



.register-icon{

    width:90px;

    height:90px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    font-size:38px;

}



.register-body{

    padding:45px;

}



.input-group-text{

    background:white;

    border-right:none;

}



.form-control{

    height:55px;

    border-left:none;

    font-size:16px;

}



.form-control:focus{

    box-shadow:0 0 0 .25rem rgba(13,110,253,.20);

    border-color:#0d6efd;

}



.btn-register{

    height:55px;

    border-radius:10px;

    background:linear-gradient(135deg,#0d6efd,#2f80ed);

    border:none;

    color:white;

    font-weight:600;

    transition:.3s;

}



.btn-register:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(13,110,253,.35);

}



.login-link{

    text-decoration:none;

    font-weight:500;

}



.login-link:hover{

    text-decoration:underline;

}



@media(max-width:768px){

    .register-body{

        padding:30px;

    }

}


</style>



<div class="container register-wrapper">


<div class="card register-card col-md-7 col-lg-5">



    <!-- Header -->

    <div class="register-header">


        <div class="register-icon">

            <i class="fas fa-user-plus"></i>

        </div>



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

            Create Your Account

        </h3>


        <p class="mb-0">

            Start your journey to finding your dream job

        </p>



    </div>





    <!-- Form -->


    <div class="register-body">


        <form method="POST">



            <div class="mb-4">


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

                    Full Name

                </label>


                <div class="input-group">


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

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

                    </span>



                    <input

                        type="text"

                        class="form-control"

                        id="full_name"

                        name="full_name"

                        placeholder="Enter your full name"

                        required>


                </div>


            </div>





            <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"

                        class="form-control"

                        id="email"

                        name="email"

                        placeholder="Enter your email"

                        required>


                </div>


            </div>





            <div class="mb-4">


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

                    Password

                </label>



                <div class="input-group">


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

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

                    </span>



                    <input

                        type="password"

                        class="form-control"

                        id="password"

                        name="password"

                        placeholder="Create a password"

                        required>


                </div>


            </div>





            <button type="submit"

                    class="btn btn-register w-100">


                <i class="fas fa-user-check me-2"></i>


                Create Account


            </button>




        </form>




        <hr class="my-4">



        <p class="text-center mb-0">


            Already have an account?


            <a href="/login"

               class="login-link">


                Login


            </a>


        </p>




    </div>


</div>


</div>


{% endblock %}