{#
.. screenshot:: |canaille|/login
   :align: right
   :width: 275px

   The login page.

The login page.

This page displays a form to get the user identifier.

:param form: The login form.
:type form: :class:`~canaille.core.endpoints.forms.LoginForm`
#}
{% extends g.auth.template or 'core/auth/base.html' %}
{% import 'macro/flask.html' as flask %}
{% import 'macro/form.html' as fui %}
{% import 'core/partial/login_field.html' as login_field %}


{% block auth_content %}
    {% if login_history %}
        {% block login_history %}
            <div class="ui basic segment" data-login-history-section>
                <h3 class="ui header">{{ _("Choose an account") }}</h3>
                <div class="ui stackable three column grid">
                    {% for user in login_history %}
                        {% set is_connected = namespace(value=false) %}
                        {% for session in active_sessions %}
                            {% if session.user.id == user.id %}
                                {% set is_connected.value = true %}
                            {% endif %}
                        {% endfor %}
                        <div class="column">
                            <div class="ui fluid card">
                                <div class="content">
                                    {% if is_connected.value %}
                                        <div class="ui left floated green ribbon label">
                                            <i class="check icon"></i>
                                            {% trans %}Connected{% endtrans %}
                                        </div>
                                    {% endif %}

                                    <div class="right floated">
                                        {% if is_connected.value %}
                                            <a href="{{ url_for('core.auth.logout', username=user.user_name) }}"
                                               class="ui mini circular icon button"
                                               title="{{ _('Log out') }}">
                                                <i class="light grey times icon"></i>
                                            </a>
                                        {% else %}
                                            <a href="{{ url_for('core.auth.forget', username=user.user_name) }}"
                                               class="ui mini circular icon button"
                                               title="{{ _('Remove from account list') }}">
                                                <i class="light grey times icon"></i>
                                            </a>
                                        {% endif %}
                                    </div>

                                    <div class="ui center aligned basic segment">
                                        <a href="{{ url_for('core.auth.login', username=user.user_name) }}" class="ui link">
                                            {% if user.photo %}
                                                <div class="ui small circular image">
                                                    <img class="login-avatar" src="{{ url_for('core.account.photo', user=user, field='photo') }}" alt="{{ user.name }}">
                                                </div>
                                            {% else %}
                                                <i class="login-avatar circular user icon"></i>
                                            {% endif %}
                                            <div class="header">{{ user.name }}</div>
                                            <div class="meta">{{ user.user_name }}</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="ui horizontal divider">{{ _("Or") }}</div>
        {% endblock %}
    {% endif %}

    <div class="ui basic segment">
        {% if login_history %}
            <h3 class="ui header">{{ _("Use another account") }}</h3>
        {% endif %}

        {% call fui.render_form(form) %}
            {% block fields %}
                {% block login_field scoped %}{{ login_field.render_field(form.login, class="autofocus") }}{% endblock %}
            {% endblock %}

            {% block buttons %}
                <div class="ui stackable grid">
                    <div class="left aligned three wide column">
                        {% if features.has_registration %}
                            <a type="button" class="ui button" href="{{ url_for('core.account.join') }}">{{ _("Create an account") }}</a>
                        {% endif %}
                    </div>
                    <div class="middle aligned right aligned ten wide column">
                        {{ fui.render_field(form.remember, class_="right aligned") }}
                    </div>
                    <div class="right aligned three wide column">
                        <button type="submit" name="answer" class="ui primary button" hx-boost="false">{{ _("Continue") }}</button>
                    </div>
                </div>
            {% endblock %}
        {% endcall %}
    </div>
{% endblock %}