{% load i18n static %}
<!DOCTYPE html>

<html lang="pt-BR">

<!-- begin::Head -->
<head>
    <meta charset="utf-8"/>
    <title>Login</title>
    <meta name="description" content="User login example">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <!--begin::Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">

    <!--end::Fonts -->

    <!--begin::Page Custom Styles(used by this page) -->
    <link href="{% static 'dist/assets/css/pages/login/login-v2.css' %}" rel="stylesheet" type="text/css"/>

    <!--end::Page Custom Styles -->

    <!--begin::Global Theme Styles(used by all pages) -->
    <link href="{% static 'dist/assets/plugins/global/plugins.bundle.css' %}" rel="stylesheet" type="text/css"/>
    <link href="{% static 'dist/assets/css/style.bundle.css' %}" rel="stylesheet" type="text/css"/>

    <!--end::Global Theme Styles -->

    <!--begin::Layout Skins(used by all pages) -->

    <!--end::Layout Skins -->
    <link rel="shortcut icon" href="{% static 'src/assets/media/logos/favicon.ico' %}"/>
</head>

<!-- end::Head -->

<!-- begin::Body -->
<body class="kt-login-v2--enabled kt-quick-panel--right kt-demo-panel--right kt-offcanvas-panel--right kt-header--fixed kt-header--minimize-menu kt-subheader--enabled kt-subheader--transparent kt-page--loading">

<!-- begin::Page loader -->

<!-- end::Page Loader -->

<!-- begin:: Page -->
<div class="kt-grid kt-grid--ver kt-grid--root">
    <div class="kt-grid__item   kt-grid__item--fluid kt-grid  kt-grid kt-grid--hor kt-login-v2" id="kt_login_v2">

        <!--begin::Item-->
        <div class="kt-grid__item  kt-grid--hor">

            <!--begin::Heade-->
            <div class="kt-login-v2__head">
                <div class="kt-login-v2__logo">
                    <a href="#">
                        <img src="{% static '/src/assets/media/logos/logo-5.png' %}" alt=""/>
                    </a>
                </div>
                <div class="kt-login-v2__signup">
                    <span>Não tem uma conta?</span>
                    <a href="#" class="kt-link kt-font-brand">Registre-se</a>
                </div>
            </div>

            <!--begin::Head-->
        </div>

        <!--end::Item-->

        <!--begin::Item-->
        <div class="kt-grid__item  kt-grid  kt-grid--ver  kt-grid__item--fluid">

            <!--begin::Body-->
            <div class="kt-login-v2__body">

                <!--begin::Wrapper-->
                <div class="kt-login-v2__wrapper">
                    <div class="kt-login-v2__container">
                        <div class="kt-login-v2__title">
                            <h3>Faça Login</h3>
                        </div>

                        {% if form.errors and not form.non_field_errors %}
                            <div class="alert alert-solid-danger alert-bold m-3" role="alert">
                                <div class="alert-text">
                                    {% if form.errors.items|length == 1 %}
                                        {% trans "Please correct the error below." %}
                                    {% else %}
                                        {% trans "Please correct the errors below." %}
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}

                        {% if form.non_field_errors %}
                            <div class="alert alert-solid-danger alert-bold m-3" role="alert">
                                <div class="alert-text">
                            {% for error in form.non_field_errors %}
                                <p class="errornote">
                                    {{ error }}
                                </p>
                            {% endfor %}
                                </div>
                            </div>
                        {% endif %}

                        <!--begin::Form-->
                        <form class="kt-login-v2__form kt-form" action="{{ app_path }}" method="post" id="login-form">
                            {% csrf_token %}
                            <div class="form-group
                                        {% if form.password.errors %}
                                        is-invalid
                                        {% endif %}">
                                <input value="{% if form.username.value %}{{ form.username.value }}{% endif %}"
                                       class="form-control" type="text" placeholder="Usuário"
                                       name="{{ form.username.html_name }}" autocomplete="off">
                                <div class="invalid-feedback">{{ form.username.errors }}</div>
                            </div>
                            <div class="form-group
                                        {% if form.password.errors %}
                                        is-invalid
                                        {% endif %}">
                                <input class="form-control" type="password" placeholder="Password"
                                       name="{{ form.password.html_name }}" autocomplete="off">
                                <input type="hidden" name="next" value="{{ next }}">
                                <div class="invalid-feedback">{{ form.password.errors }}</div>
                            </div>

                    <!--begin::Action-->
                    <div class="kt-login-v2__actions text-center">
                        {% url 'admin_password_reset' as password_reset_url %}
                        {% if password_reset_url %}
                            <a href="{{ password_reset_url }}" class="kt-link kt-link--brand">
                                Esqueceu a senha?
                            </a>
                        {% endif %}
                        <button type="submit" class="btn btn-brand btn-elevate btn-pill">
                            Login
                        </button>
                    </div>

                    <!--end::Action-->
                    </form>
                    <!--end::Form-->
                    <!--end::Options-->
                </div>
            </div>

            <!--end::Wrapper-->

            <!--begin::Image-->
            <div class="kt-login-v2__image">
                <img src="{% static 'src/assets/media/misc/bg_icon.svg' %}" alt="">
            </div>

            <!--begin::Image-->
        </div>
        <!--begin::Body-->
    </div>

    <!--end::Item-->

</div>
</div>

<!-- end:: Page -->

<!-- begin::Global Config(global config for global JS sciprts) -->
<script>
    var KTAppOptions = {
        "colors": {
            "state": {
                "brand": "#385aeb",
                "metal": "#c4c5d6",
                "light": "#ffffff",
                "accent": "#00c5dc",
                "primary": "#5867dd",
                "success": "#34bfa3",
                "info": "#36a3f7",
                "warning": "#ffb822",
                "danger": "#fd3995",
                "focus": "#9816f4"
            },
            "base": {
                "label": [
                    "#c5cbe3",
                    "#a1a8c3",
                    "#3d4465",
                    "#3e4466"
                ],
                "shape": [
                    "#f0f3ff",
                    "#d9dffa",
                    "#afb4d4",
                    "#646c9a"
                ]
            }
        }
    };
</script>

<!-- end::Global Config -->

<!--begin::Global Theme Bundle(used by all pages) -->
<script src="{% static 'dist/assets/plugins/global/plugins.bundle.js' %}" type="text/javascript"></script>
<script src="{% static 'dist/assets/js/scripts.bundle.js' %}" type="text/javascript"></script>

<!--end::Global Theme Bundle -->

<!--begin::Page Scripts(used by this page) -->
<script src="{% static 'dist/assets/js/pages/custom/user/login.js' %}" type="text/javascript"></script>

<!--end::Page Scripts -->
</body>

<!-- end::Body -->
</html>