{% extends "base.html" %}
{% block content %}
<div class="container-fluid vh-100" style="margin-top:200px">
    <div class="" style="margin-top:200px">
        <div class="rounded d-flex justify-content-center">
            <div class="col-md-4 col-sm-12 shadow-lg p-5 bg-light">
                <div class="text-center">
                    <h3 class="text-primary">Sign In</h3>
                </div>
                <form action="">
                    <div class="p-4">
                        <!--                         <div class="input-group mb-3">
                            <span class="input-group-text bg-primary"><i
                                    class="bi bi-person-plus-fill text-white"></i></span>
                            <input type="text" class="form-control" placeholder="Username">
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text bg-primary"><i class="bi bi-key-fill text-white"></i></span>
                            <input type="password" class="form-control" placeholder="password">
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                            <label class="form-check-label" for="flexCheckDefault">
                                Remember Me
                            </label>
                        </div>
                        <button class="btn btn-primary text-center mt-2" type="submit">
                            Login
                        </button>
                        <p class="text-center mt-5">Don't have an account?
                            <span class="text-primary">Sign Up</span>
                        </p>
                        <p class="text-center text-primary">Forgot your password?</p> -->
                        <div class="position-relative border-bottom my-3 line">
                            <span class="connect">or connect with</span>
                        </div>
                        <a href="/google_auth" class="px-2" title="Login with Google"> <img
                            src="/assets/icons/numix-circle/web-google.svg" 
                            width="100" alt="Login with Google">
                        </a>
<!--                        <a href="/facebook_auth" class="px-2" title="Login with Facebook"> <img
                            src="/assets/icons/numix-circle/web-facebook.svg" 
                            width="100" alt="Login with Facebook">
                        </a>
                        <a href="/discord_auth" class="px-2" title="Login with Discord">
                            <img src="/assets/icons/numix-circle/discord.svg" width="100" alt="Login with Discord" />
                        </a>
                    -->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--<div class="container">
    <div class="row">
        <div class="offset-md-2 col-lg-5 col-md-7 offset-lg-4 offset-md-3">
            <div class="panel border bg-white">
                <div class="panel-heading">
                    <h3 class="pt-3 font-weight-bold">Login</h3>
                </div>
                                   <div class="panel-body p-3">
                        <form action="login_script.php" method="POST">
                            <div class="form-group py-2">
                                <div class="input-field"> <span class="far fa-user p-2"></span> <input type="text"
                                        placeholder="Username or Email" required> </div>
                            </div>
                            <div class="form-group py-1 pb-2">
                                <div class="input-field"> <span class="fas fa-lock px-2"></span> <input type="password"
                                        placeholder="Enter your Password" required> <button
                                        class="btn bg-white text-muted"> <span class="far fa-eye-slash"></span>
                                    </button> </div>
                            </div>
                            <div class="form-inline"> <input type="checkbox" name="remember" id="remember"> <label
                                    for="remember" class="text-muted">Remember me</label> <a href="#" id="forgot"
                                    class="font-weight-bold">Forgot password?</a> </div>
                            <div class="btn btn-primary btn-block mt-3">Login</div>
                            <div class="text-center pt-4 text-muted">Don't have an account? <a href="#">Sign up</a>
                            </div>
                        </form>
                    </div> 
                <div class="mx-3 my-2 py-2 bordert">
                    <div class="text-center py-3">
                                                    <a href="https://wwww.facebook.com" target="_blank" class="px-2"> <img
                                    src="https://www.dpreview.com/files/p/articles/4698742202/facebook.jpeg" alt="">
                            </a>
                            <a href="https://www.google.com" target="_blank" class="px-2"> <img
                                    src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png"
                                    alt=""> </a>
                            <a href="https://www.github.com" target="_blank" class="px-2"> <img
                                    src="https://www.freepnglogos.com/uploads/512x512-logo-png/512x512-logo-github-icon-35.png"
                                    alt=""> </a> 
                        <a href="/discord_auth" title="Image from freepnglogos.com"><img
                                src="https://www.freepnglogos.com/uploads/discord-logo-png/discord-logo-logodownload-download-logotipos-1.png"
                                width="200" alt="discord logo logodownload download logotipos" /></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript'></script> -->
{% endblock content %}