@extends('app')
@section('content')
    <div class="login-container px-lg-5 py-4">
        <div class="justify-content-between d-md-flex d-block align-items-center text-center text-md-start">
            <a class="logo-img" href="{{ '/' }}"></a>
            <h4 class="text-brown fw-bold text-md-end py-3 py-lg-0">Future of Fundraising</h4>
        </div>
        <div class="d-flex justify-content-evenly align-items-center card-div p-0 m-0">
            <div class="p-lg-3 form-container">
                <div class="signin-form shadow p-3 p-lg-4 m-2 m-lg-4 rounded-5 mb-5">
                    <div class="text-blue text-center">
                        <h4 class="fw-bold pb-1 pt-3">Fundraiser Sign In</h4>
                        <p class="sign-in text-brown fw-bold mb-0"><span id="login-role-name"></span></p>
                    </div>
                    <div class="p-2 p-lg-4 px-3 px-xl-5">
                        <form action="">
                            <div class="mb-1">
                                <label for="username-or-email" class="email col-form-label">Username or Email<span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control username-or-email"
                                    placeholder="Username or Email">
                            </div>
                            <div class="password-container m-0">
                                <label for="password" class="password col-form-label">Password<span
                                        class="text-danger">*</span></label>
                                <div class="position-relative">
                                    <input type="password" placeholder="Password" class="form-control signin-password"
                                        id="password" autocomplete="off">
                                    <span id="eye-icon" class="eye eyeIcon position-absolute"><i
                                            class="fa-regular fa-eye-slash closed-eye-icon3 eye-icon"></i></span>
                                </div>
                            </div>
                            <p class="text-end mt-3">
                                <a href="/forgot-password" class="forgot-password">
                                    Forgot Password?</a>
                            </p>
                            <button class="bg-blue border p-2 rounded-3 w-100 text-white fw-bold" id="signInButton">
                                Sign In
                                <span id="login-spinner" class="spinner-border spinner-border-sm d-none" role="status"
                                    aria-hidden="true"></span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @vite(['resources/js/login.js'])
@endsection