@layout AuthLayout
@page "/login"
<style>
    .gradient-custom-2 {
        /* fallback for old browsers */
        background: #fccb90;
        /* Chrome 10-25, Safari 5.1-6 */
        background: -webkit-linear-gradient(to right, rgb(20 158 132 / 76%), rgb(10 10 56/100%));
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background: linear-gradient(to right, rgb(20 158 132 / 76%), rgb(10 10 56/100%));
    }

    .login-buttons {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .button-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    .facebook-button, .twitter-button, .google-button, .apple-button, .microsoft-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
        text-decoration: none;
        color: #fff;
    }

    .facebook-button {
        background-color: #3B5998;
    }

    .twitter-button {
        background-color: #1DA1F2;
    }

    .google-button {
        background-color: #DB4437;
    }

    .apple-button {
        background-color: #000;
    }

    .microsoft-button {
        background-color: #00A4EF;
    }

</style>
<section class="h-100 gradient-form" style="background-color: #eee;">
    <div class="container py-5 h-100">
        <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="icon-512.png"
                                         style="width: 185px;" alt="logo">
                                    <h4 class="mt-1 mb-5 pb-1">Biskilog Accounting</h4>
                                </div>

                                <form>
                                    <p>Please login to your account</p>

                                    <div class="form-outline mb-4">
                                        <input type="email" id="form2Example11" class="form-control"
                                               placeholder="Phone number or email address" />
                                        <label class="form-label" for="form2Example11">Username</label>
                                    </div>

                                    <div class="form-outline mb-4">
                                        <input type="password" id="form2Example22" class="form-control" />
                                        <label class="form-label" for="form2Example22">Password</label>
                                    </div>

                                    <div class="text-center pt-1 mb-5 pb-1">
                                        <button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="button">
                                            Log
                                            in
                                        </button>
                                        <a class="text-muted" href="#!">Forgot password?</a>
                                    </div>

                                    <div class="d-flex align-items-center justify-content-center pb-4">
                                        <div class="login-buttons">
                                            <div class="button-row">
                                                <a href="#" class="facebook-button"><i class="fab fa-facebook-f"></i></a>
                                                <a href="#" class="twitter-button"><i class="fab fa-twitter"></i></a>
                                                <a href="#" class="google-button"><i class="fab fa-google"></i></a>
                                            </div>
                                            <div class="button-row">
                                                <a href="#" class="apple-button"><i class="fab fa-apple"></i></a>
                                                <a href="#" class="microsoft-button"><i class="fab fa-windows"></i></a>
                                            </div>
                                        </div>

                                    </div>

                                </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">Simplify Your Business Management with Biskilog's Suite of Tools</h4>
                                <p class="small mb-0">
                                    Stay on top of your business operations from anywhere with Biskilog - now a user-friendly web application 
                                    that not only provides a comprehensive operational summary of all records from the BISKILOG POS software 
                                    but also allows you to make sales and access new features. Monitor operations, make informed decisions and simplify 
                                    your business management with Biskilog's powerful and convenient web app. Say goodbye to manual record-keeping 
                                    and hello to streamlined efficiency with Biskilog.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>