<section class="h-100 gradient-form">
    <div class="container pb-5 h-100 context-main-bg pt-5">
        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col-xl-10">
                <div class="card rounded-3 text-black">
                    <div class="row g-0">
                        <div class="col-lg-6">
                            <div class="card-body p-md-5 mx-md-4">
                                <div class="text-center">
                                    <img src="{ROOT_URL}{LOGO}" style="width: 185px;" alt="logo">
                                    <h4 class="mt-1 mb-5 pb-1">{SITENAME}</h4>
                                </div>
                                <form action="{ROOT_URL}home/login" method="post">
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input name="username" type="text" id="username" class="form-control" placeholder="Username">
                                    </div>
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input name="password" type="password" id="password" class="form-control" placeholder="password">
                                    </div>
                                    <div class="mb-4 row">
                                        <div class="col-lg-6 offset-2">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch" name="remember" id="remember" value="true">
                                                <label class="form-check-label" for="remember">Stay Logged In</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center pt-1 mb-5 pb-1">
                                        <button name="submit" value="submit" type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-3">
                                                Sign in
                                        </button>
                                        <a class="text-muted" href="{ROOT_URL}register/recover">Forgot password?</a>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-center pb-4">
                                        <p class="mb-0 me-2">Don't have an account?</p>
                                        <a href="{ROOT_URL}register" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark">
                                            Create new
                                        </a>
                                    </div>
                                    <input type="hidden" name="token" value="{TOKEN}">
                                </form>
                            </div>
                        </div>
                        <div class="col-lg-6 d-flex align-items-center gradient-custom-2">
                            <div class="text-white px-3 py-4 p-md-5 mx-md-4">
                                <h4 class="mb-4">I appreciate you.</h4>
                                <p class="small mb-0">As a solo developer, i appreciate each and every person who uses my products. There aren't many of you, so thank you</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>