{% extends 'ui/layout.html' %}
{% load static %}
{% load i18n %}
{% load ui %}

{% block title %}Login{% endblock %}
{% block theme %}data-theme="light"{% endblock %}

{% block body %}
    <section class="hero is-medium is-primary is-bold is-fullheight">
        <div class="hero-head">
            <header class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <p class="title navbar-item">{% block hero_logo %}Accrete{% endblock %}</p>
                        <span class="navbar-burger" data-target="navbarMenuHeroC">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                    </div>
                </div>
            </header>
        </div>

        <div class="hero-body">
            {% block hero_body %}
                <div class="container">
                    <div class="columns">
                        <div class="column box is-8-tablet is-offset-2-tablet is-6-desktop is-offset-3-desktop is-4-fullhd is-offset-4-fullhd p-3" data-theme="light">
                            <form method="POST" action="" hx-boost="false">
                                {% csrf_token %}
                                {{ form.username|wrap_form_field }}
                                {{ form.password|wrap_form_field }}
                                <input type="submit" class="button is-fullwidth is-success is-medium"
                                       value="{% translate 'Login' %}">
                            </form>
                        </div>
                    </div>
                </div>
            {% endblock %}
        </div>

        <div class="hero-foot">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container"></div>
            </nav>
        </div>
    </section>
{% endblock %}
