{% extends "frontend/base.html" %}
{% load static i18n %}
{% load allauth account socialaccount %}
{% block html_title %}
    {% block page_title %}
        {% translate "Sign In" %}
    {% endblock page_title %}
{% endblock html_title %}
{% block card_content %}
    {% if SOCIALACCOUNT_ENABLED %}
        {% get_providers as socialaccount_providers %}
        {% if socialaccount_providers %}
            {% for provider in socialaccount_providers %}
                {% provider_login_url provider process=process scope=scope auth_params=auth_params as href %}
                <form method="post" action="{{ href }}">
                    {% csrf_token %}
                    <button href="{{ href }}"
                            class="btn btn-warning btn-lg icon icon-left"
                            title="{{ provider.name }}">
                        <img src="{% static 'img/keycloak.svg' %}" style="height: 30px">
                        <span class="mx-1">{% translate "Sign in with your" %} {{ provider.name }}</span>
                    </button>
                </form>
            {% endfor %}
        {% endif %}
    {% endif %}
    <div class="mt-2">
        <a data-bs-toggle="collapse"
           href="#login-form"
           role="button"
           aria-controls="login-form"
           class="d-flex align-items-center">
            <i class="bi bi-chevron-right me-2 ms-1 mb-2 collapse-icon"></i>
            {% translate "Log in with email and password instead" %}
        </a>
        <div class="collapse mt-3 ms-3"
             id="login-form"
             class="form form-vertical"
             style="max-width: 400px">
            {% url 'account_login' as form_action %}
            {% translate "Sign In" as form_submit_label %}
            {% include "includes/form.html" %}
        </div>
    </div>
{% endblock card_content %}