{% extends 'layout/auth_base.html' %}
{% from 'auth/_login_form.html' import login_form %}
{% from 'message_box.html' import message_box %}

{% block content %}
    <div class="centered-column">
        {% if active_provider %}
            <div class="login-container clearfix">
                <img class="header-logo" src="{{ indico_config.IMAGES_BASE_URL }}/logo_indico_bw.png">
                <br>
                <img class="header-logo" src="{{ indico_config.IMAGES_BASE_URL }}/logo_indico.png">
		
                {% if login_reason %}
                    <div class="login-reason-box">
                        {{ login_reason }}
                    </div>
                {% endif %}
                {% include 'flashed_messages.html' %}
                {% if retry_in %}
                    {% call message_box('error') %}
                        {% trans delay=retry_in|format_human_timedelta(granularity='minutes') %}
                            Too many failed login attempts. Please wait {{ delay }}.
                        {% endtrans %}
                    {% endcall %}
                {% endif %}
                <div id="form-wrapper">
                    {{ login_form(active_provider, form) }}
                </div>
                <button class="i-button login-form-button" data-provider="{{ active_provider.title }}"
                        data-href="{{ url_for('auth.login_form', provider=active_provider.name) }}">
                    {%- trans name=active_provider.title %}Login with {{ name }}{% endtrans -%}
                </button>
            </div>
            {% set other_local_providers = providers|rejectattr('is_external')|reject('equalto', active_provider)|list %}
            {% if other_local_providers %}
                <div class="titled-rule">
                    {% trans %}or change authentication provider{% endtrans %}
                </div>
                <div class="login-providers providers-with-form">
                    {% for provider in other_local_providers %}
                        <button class="i-button provider-with-form" data-provider="{{ provider.title }}"
                                data-href="{{ url_for('auth.login_form', provider=provider.name) }}">
                            {{- provider.title -}}
                        </button>
                    {% endfor %}
                </div>
            {% endif %}
        {% else %}
            <div class="login-container clearfix">
                <img class="header-logo" src="{{ indico_config.IMAGES_BASE_URL }}/logo_indico.png">
                {% include 'flashed_messages.html' %}
            </div>
        {% endif %}
        {% set external_providers = providers|selectattr('is_external')|sort(attribute='title') %}
        {% if external_providers %}
            {% if active_provider %}
                <div class="titled-rule">
                    {% trans %}or connect with{% endtrans %}
                </div>
            {% endif %}
            <div class="login-providers external">
                {% for provider in external_providers %}
                    <a href="{{ url_for('.login', provider=provider.name, _method='GET') }}"
                       class="i-button external-provider-{{ provider.name }}">
                       {{- provider.title -}}
                    </a>
                {% endfor %}
            </div>
        {% endif %}
        {% if indico_config.LOCAL_IDENTITIES and indico_config.LOCAL_REGISTRATION %}
            <p class="register">
                {% trans url=url_for('.register', next=request.args.get('next')) -%}
                    If you do not have an Indico account yet, you can <a href="{{ url }}">create one here</a>.
                {%- endtrans %}
            </p>
        {% elif indico_config.EXTERNAL_REGISTRATION_URL %}
            <p class="register">
                {% trans url=indico_config.EXTERNAL_REGISTRATION_URL -%}
                    If you do not have an account yet, you can <a href="{{ url }}" target="_blank" rel="noopener noreferrer">create one here</a>.
                {%- endtrans %}
            </p>
        {% endif %}
        <div class="link">
            <a class="icon-prev" href="/">{% trans %}Back{% endtrans %}</a>
        </div>

        {% include 'footer.html' %}
    </div>

    <script>
        (function() {
            'use strict';

            function loadLoginForm(url) {
                $.ajax({
                    url: url,
                    error: handleAjaxError,
                    success: function(data) {
                        $('#form-wrapper').html(data.html);
                    }
                });
            }

            function focusForm() {
                $('#form-wrapper input:not(:hidden):not(:submit)').eq(0).focus();
            }

            $('.login-page').on('click', '.i-button.login-form-button', function() {
                $('#hidden-submit').click();
            }).on('click', '.i-button.provider-with-form', function() {
                var newLoginButton = $(this);
                var oldLoginButton = $('.login-form-button');
                var diff = oldLoginButton.offset().top - newLoginButton.offset().top;
                var buttons = newLoginButton.add(oldLoginButton);
                buttons.prop('disabled', true);
                newLoginButton.animate({top: '+=' + diff}, function() {
                    buttons.prop('disabled', false);
                    focusForm();
                });
                newLoginButton.addClass('login-form-button');
                newLoginButton.removeClass('provider-with-form');
                oldLoginButton.animate({top: '-=' + diff});
                oldLoginButton.addClass('provider-with-form');
                oldLoginButton.removeClass('login-form-button');

                newLoginButton.text($T('Login with {0}').format(newLoginButton.data('provider')));
                oldLoginButton.text(oldLoginButton.data('provider'));

                loadLoginForm(newLoginButton.data('href'));
            });

            focusForm();
        })();
    </script>
{% endblock %}