{% extends "base.html" %}

{% load compress static %}

{% block extra_head %}
    {% compress css %}
        <link type="text/css" href='{% static "css/login.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "css/lib/horizontal_spinner.css" %}' rel="stylesheet">
    {% endcompress %}
{% endblock %}

{% block content %}

<div class="content-login">
    <div id="login_form" class="centered-box">
        <h1>{{ form.title }}</h1>
        {% if show_change_pwd_message %}
        <div class="hint-info">
            Welcome to the initial login after your InfiniMetrics installation or update.<br><br>
            Please enter the default IMX_ADMIN password.<br><br>
            For more information, refer to the InfiniMetrics User Guide's 'Accessing InfiniMetrics' section.
        </div>
        {% endif %}
        <div id="login-form-container">
            <form method="post" action="{{ request.get_full_path }}" autocomplete="off">
                {% if messages %}
                    {# SSO login error - probably misconfigured #}
                    <ul class="errorlist nonfield">
                        {% for message in messages %}
                        <li>{{ message }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
                {% include "render_form.html" %}
                {% if show_change_pwd_message %}
                    <div id="change-pwd-footer">
                        For security reasons, you will be asked to change the IMX_ADMIN password in the next window.
                    </div>
                {% endif %}
                <div class="form-buttons">
                    <span id="spinner" class="lds-ellipsis"><span></span><span></span><span></span><span></span></span>
                    <button id="submit" type="submit" class="button-green">LOG IN</button>
                    {% if sso_login_enabled %}
                        <div class="separator">
                            <span>or</span>
                        </div>
                    {% endif %}
                </div>
            </form>
        </div>
        <div id="sso-container">
            {% if sso_login_enabled %}
                <div>
                    <a href="{% url 'sso_login' %}?next={{ request.GET.next }}" {% if show_change_pwd_message %}disabled{% endif %}>
                        <button id="sso-login-btn" class="button-green" {% if show_change_pwd_message %} disabled{% endif %}>SSO LOGIN</button>
                    </a>
                </div>
                <div id="toggle-login-link-container">
                    <a href="#" id="toggle-login-link">Username-password login</a>
                </div>
            {% endif %}
        </div>
    </div> 
    <script>
        // Show spinner on submit
        $(document).on('submit', 'form', function() {
            $('#submit').css('display', 'none');
            $('#spinner').css('display', 'inline-block');
        });

        $(document).ready(function() {
            // Initial focus
            $('#id_username').focus().select();

            const ssoEnabled = {{ sso_login_enabled|yesno:"true,false" }};
            const formHasErrors = $(".errorlist").length > 0;

            const toggleLink = $('#toggle-login-link');
            const loginFormContainer = $('#login-form-container');

            const forceChangePwd = {{ show_change_pwd_message|yesno:"true,false" }};

            if (ssoEnabled && !formHasErrors && !forceChangePwd) {
                // SSO is enabled and there are no form errors from prev submission and not forcing pwd change.
                // hide form and show form toggle.
                loginFormContainer.hide();

                toggleLink.on('click', function(event) {
                    $('#sso-login-btn').removeClass('button-green');
                    $('#sso-login-btn').addClass('button-secondary');
                    event.preventDefault();
                    loginFormContainer.slideDown(300);
                    toggleLink.hide();
                });
            } else if (formHasErrors || forceChangePwd) {
                // Hide form toggle as we don't hide form.
                toggleLink.hide();
            }
        });
    </script>
</div>

{% endblock %}