{% extends 'base-site.html' %}
{% import 'macros/flash.html' as flash %}

{% block body %}

    <section class="h-100">

        <div class="px-4 py-5 px-md-5 text-center text-lg-start h-100">
            <div class="container">

                {{ flash.flash() }}

                <div class="row gx-lg-5 align-items-center">
                    <div class="col-lg-6 mb-5 mb-lg-0">
                        <h1 class="my-5 display-3 fw-bold ls-tight">
                            Labbase2<br>
                            <span class="text-primary">Easier. Better. Prettier.</span>
                        </h1>
                        <p>
                            Labbase2 is a great way for storing and organizing your laboratory ressources including
                            stocks, plasmids, oligonucleotides, and antibodies. Get started by signing in.
                        </p>
                        <p>
                            Don't have an account yet? Ask an admin to create you one!
                        </p>
                    </div>

                    <div class="col-lg-6 mb-5 mb-lg-0">
                        <div class="card">
                            <div class="card-body py-5 px-md-5">

                                <h4>Sign in</h4>

                                <form action="" method="post">

                                    {{ login_form.hidden_tag() }}

                                    <!-- Email input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        {{ login_form.email(id='login-form-email') }}
                                        <label class="form-label" for="login-form-username">Email address</label>
                                    </div>

                                    <!-- Password input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        {{ login_form.password(id='login-form-password') }}
                                        <label class="form-label" for="login-form-password">Password</label>
                                    </div>

                                    <!-- Checkbox -->
                                    <div class="form-check d-flex mb-4">
                                        <input class="form-check-input me-2" type="checkbox" value="" id="form2Example33" checked />
                                        <label class="form-check-label" for="form2Example33">
                                            Remember me
                                        </label>
                                    </div>

                                    <!-- Submit button -->
                                    {{ login_form.submit(class_='btn btn-primary btn-block mb-4') }}

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

{% endblock %}