{% extends "base/base.html" %}


{% block master_body %}
<div class="auth-main">
    <div class="auth-wrapper v2">
        <div class="auth-form">
            <div class="logo"><img src="/dist/assets/images/logo-dark.svg" alt="image" class="img-fluid brand-logo">
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="d-flex justify-content-center">
                            <div class="auth-header">
                                <h2 class="text-secondary"><b>Hi, Welcome Back</b></h2>
                                <p class="f-16 mt-2">Enter your credentials to continue</p>
                            </div>
                        </div>
                    </div>
                    <a href="/google-oauth" class="btn mt-2 bg-light text-muted hover" style="width: 100%">
                        <img src="/dist/assets/images/google-icon.svg" alt="image"> Sign In With
                        Google
                    </a>
                    <div class="saprator">
                        <span>or</span>
                    </div>
                    <h5 class="my-4 d-flex justify-content-center">Sign in with Email address</h5>
                    <form>
                        <div class="form-floating mb-3">
                            <input name="email" type="email" class="form-control" id="floatingInput"
                                placeholder="Email address">
                            <label for="floatingInput">Email address </label>
                        </div>
                        <div class="form-floating mb-3">
                            <input name="password" type="password" class="form-control" id="floatingInput1"
                                placeholder="Password">
                            <label for="floatingInput1">Password</label>
                        </div>
                        <div class="d-flex mt-1 justify-content-between">
                            <h5 class="text-secondary">Forgot Password?</h5>
                        </div>
                        <div class="d-grid mt-4">
                            <button type="submit" class="btn btn-secondary p-2">
                                Sign In
                            </button>
                        </div>
                        <hr>
                        <div class="d-grid mt-4">
                            <button type="submit" class="btn btn-secondary p-2">
                                Create account
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="auth-sidecontent">
            <div class="p-3 px-lg-5 text-center">
                <div id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item">
                            <h1><b>Multiple dashboard and widgets</b></h1>
                            <p class="f-12 mt-4">100+ widgets and customize controls</p>
                        </div>
                        <div class="carousel-item active">
                            <h1><b>Components Based Design System</b></h1>
                            <p class="f-12 mt-4">Powerful and easy to use multipurpose theme</p>
                        </div>
                        <div class="carousel-item">
                            <h1><b>Ready to use components</b></h1>
                            <p class="f-12 mt-4">Ready made component to apply directly</p>
                        </div>
                    </div>
                    <div class="carousel-indicators position-relative">
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class=""
                            aria-label="Slide 1">
                        </button>
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                            aria-label="Slide 2" class="active" aria-current="true">
                        </button>
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                            aria-label="Slide 3" class="">
                        </button>
                    </div>
                </div>
                <img src="/dist/assets/images/login2.svg" alt="images" class="img-fluid mt-3 w-75">
            </div>
        </div>
    </div>
</div>
{% call super() %}
{% endblock %}