{% extends "layouts/base_auth.html" %}
{% load i18n %}
{% load settings %}
{% load crispy_forms_tags %}
{% load socialaccount %}

{% block title %}Login{% endblock %}

{% block content %}
  <div>
    <div class="container">
      <div class="row tw:h-dvh d-flex justify-content-center align-items-center">
        <div class="col-md-6 col-xl-4 col-12">
          {% settings "DEMO" as demo_mode %}
          {% if demo_mode %}
            <div class="card shadow mb-3">
              <div class="card-body">
                <h1 class="h5 card-title text-center mb-4">{% trans "Welcome to WYGIWYH's demo!" %}</h1>
                <p>{% trans 'Use the credentials below to login' %}:</p>
                <p>{% trans 'E-mail' %}: <span class="badge text-bg-secondary user-select-all">demo@demo.com</span></p>
                <p>{% trans 'Password' %}: <span class="badge text-bg-secondary user-select-all">wygiwyhdemo</span></p>
              </div>
            </div>
          {% endif %}
          <div class="card shadow-lg">
            <div class="card-body">
              <h1 class="h2 card-title text-center mb-4">Login</h1>
              {% crispy form %}

              {% get_providers as socialaccount_providers %}
              {% if socialaccount_providers %}
                <div class="mt-3">
                  <hr>
                  <ul class="socialaccount_providers list-unstyled">
                    {% for provider in socialaccount_providers %}
                      <li class="mt-2">
                        <a title="{{ provider.name }}"
                           class="btn btn-outline-primary w-100 socialaccount_provider {{ provider.id }}"
                           href="{% provider_login_url provider %}">
                          {% translate 'Login with' %} {{ provider.name }}
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}