{% load i18n static jazzmin admin_urls %}
{% get_current_language as LANGUAGE_CODE %}
{% get_current_language_bidi as LANGUAGE_BIDI %}
{% get_jazzmin_settings request as jazzmin_settings %}
{% get_jazzmin_ui_tweaks as jazzmin_ui %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:'en-us' }}" {% if LANGUAGE_BIDI %}dir="rtl" {% endif %}>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>{% block title %}{{ title }} | {% trans 'Log in again' %}{% endblock %}</title>

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="{% static 'vendor/fontawesome-free/css/all.min.css' %}">

    <!-- Bootstrap and adminLTE -->
    <link rel="stylesheet" href="{% static 'vendor/adminlte/css/adminlte.min.css' %}">

    <!-- Bootswatch theme -->
    {% if jazzmin_ui.theme.name != 'default' %}
    <link rel="stylesheet" href="{{ jazzmin_ui.theme.src }}" id="jazzmin-theme" />
    {% endif %}

    {% if jazzmin_ui.dark_mode_theme %}
    <link rel="stylesheet" href="{{ jazzmin_ui.dark_mode_theme.src }}" id="jazzmin-dark-mode-theme"
        media="(prefers-color-scheme: dark)" />
    {% endif %}

    <!-- Custom fixes for django -->
    <link rel="stylesheet" href="{% static 'jazzmin/css/main.css' %}">

    {% if jazzmin_settings.custom_css %}
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% static jazzmin_settings.custom_css %}">
    {% endif %}

    <!-- favicons -->
    <link rel="shortcut icon" href="{% static jazzmin_settings.site_icon %}" type="image/png">
    <link rel="icon" href="{% static jazzmin_settings.site_icon %}" sizes="32x32" type="image/png">

    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

    {% block extrastyle %}
    <style>
        .alert {
            padding: 20px;
            background-color: #f44336;
            color: white;
            opacity: 1;
            transition: opacity 0.6s;
            margin-bottom: 15px;
        }

        .alert.success {
            background-color: #04AA6D;
        }

        .alert.info {
            background-color: #2196F3;
        }

        .alert.warning {
            background-color: #ff9800;
        }

        .closebtn {
            margin-left: 15px;
            color: white;
            font-weight: bold;
            float: right;
            font-size: 22px;
            line-height: 20px;
            cursor: pointer;
            transition: 0.3s;
        }

        .closebtn:hover {
            color: black;
        }

        .alert {
            opacity: 1;
            transition: opacity 0.6s;
            /* 600ms to fade out */
        }
    </style>
    {% endblock %}
    {% block extrahead %} {% endblock %}
</head>

<body class="hold-transition jazzmin-login-page">
    {% if messages %}
    <div class="alert success w-100" style="position: absolute; top: 0px;">
        <span class="closebtn">&times;</span>
        <strong>Success!</strong>
        {% for message in messages %}
        {{ message }}
        {% endfor %}
    </div>
    {% endif %}
    {%if EmailSend%}
    <div class="alert success w-100" style="position: absolute; top: 0px;">
        <span class="closebtn">&times;</span>
        <strong>Success!</strong> {{EmailSend}}
    </div>
    {% endif %}
    <div class="login-box">
        <div class="login-logo">
            <h1><img src="#" alt="{{ jazzmin_settings.site_header }}"></h1>  <!-- For Logo -->
        </div>

        <div class="card">
            <div class="card-body">
                <p class="login-box-msg">{{ jazzmin_settings.welcome_sign }}</p>
                <form action="{{ app_path }}" method="post">
                    {% csrf_token %}
                    {% if user.is_authenticated %}
                    <p class="errornote">
                    <div class="callout callout-danger">
                        <p>
                            {% blocktrans trimmed %}
                            You are authenticated as {{ username }}, but are not authorized to
                            access this page. Would you like to login to a different account?
                            {% endblocktrans %}
                        </p>
                    </div>
                    </p>
                    {% endif %}
                    {% if form.errors %}

                    {% if form.username.errors %}
                    <div class="callout callout-danger">
                        <p>{{ form.username.label }}: {{ form.username.errors|join:', ' }}</p>
                    </div>
                    {% endif %}

                    {% if form.password.errors %}
                    <div class="callout callout-danger">
                        <p>{{ form.password.label }}: {{ form.password.errors|join:', ' }}</p>
                    </div>
                    {% endif %}

                    {% if form.non_field_errors %}
                    <div class="callout callout-danger">
                        {% for error in form.non_field_errors %}
                        <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                    {% endif %}

                    {% endif %}
                    <div class="input-group mb-3">
                        <input type="text" name="username" class="form-control" placeholder="{{ form.username.label }}"
                            required>
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fas fa-user"></span>
                            </div>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        <input type="password" name="password" class="form-control"
                            placeholder="{{ form.password.label }}" required>
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fas fa-lock"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <button type="submit" class="btn {{ jazzmin_ui.button_classes.primary }} btn-block">{% trans "Log in" %}</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            {% url 'admin_password_reset' as password_reset_url %}
                            {% if password_reset_url %}
                            <div class="password-reset-link">
                                <a href="{{ password_reset_url }}">{% translate 'Forgotten your password or username?'%}</a>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <script>
        var close = document.getElementsByClassName("closebtn");

        close[0].onclick = function () {
            var div = this.parentElement;
            div.style.opacity = "0";
            setTimeout(function () { div.style.display = "none"; }, 600);
        }
    </script>
    <!-- jQuery -->
    <script src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
    <!-- Bootstrap 4 -->
    <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
    <!-- AdminLTE App -->
    <script src="{% static 'vendor/adminlte/js/adminlte.min.js' %}"></script>

    {% if jazzmin_settings.custom_js %}
    <script src="{% static jazzmin_settings.custom_js %}"></script>
    {% endif %}

</body>

</html>