{% 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 content %}
    <section class="section">
        <div class="card">
            <div class="card-content">
                <div class="card-body">
                    {% 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 %}
                    <details class="mt-2">
                        <summary>{% translate "Log in with email and password instead" %}</summary>
                        <form method="post" action="{% url 'account_login' %}">
                            {% csrf_token %}
                            {{ form }}
                            <button class="btn btn-primary" type="submit">{% translate "Sign In" %}</button>
                        </form>
                    </details>
                </div>
            </div>
        </div>
    </section>
{% endblock content %}