{% extends "base.html" %}

{% load i18n %}
{% load account socialaccount %}
{% load static %}

{% block head_title %}{% trans "Log In" %}{% endblock %}

{% block body_id %}id="authpages"{% endblock %}

{% block content %}

  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
    <div class="mt-1 md:flex md:space-x-6">

      <div class="md:pt-11 md:mt-11 md:w-1/2" x-data="{ tab: '#social' }">
        <div class="md:w-full">
          <h1 class="text-4xl text-center">{% trans "Log In" %}</h1>
        </div>

        <div class="space-y-4 w-full text-center">
          {% get_providers as socialaccount_providers %}

          {% if socialaccount_providers %}
          <p class="mt-0 text-center">
            {% blocktrans with site.name as site_name %}
              <a :class="tab === '#social' ? 'text-slate dark:text-white' : 'text-orange'"
                 href="#"
                 data-toggle="tab"
                 x-on:click.prevent="tab='#social'"
              >
                Log in with one of your existing third party accounts<br />
              </a> or you can
              <a :class="tab === '#email' ? 'text-slate dark:text-white' : 'text-orange'"
                 href="#"
                 data-toggle="tab"
                 x-on:click.prevent="tab='#email'"
              >
                use your email
              </a>
            {% endblocktrans %}
          </p>

          <div class="socialaccount_ballot" x-show="tab == '#social'" x-cloak>

            <div class="space-y-4 w-full">
              {% include "socialaccount/snippets/provider_list.html" with process="login" %}
            </div>
            {% include "socialaccount/snippets/login_extra.html" %}

          </div>

          {% else %}
            <p class="mt-0 text-center">{% blocktrans %}If you have not created an account yet, then please
            <a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
          {% endif %}

          <div x-show="tab == '#email'" x-cloak>
            <form class="login" method="POST" action="{% url 'account_login' %}">
              <div class="mx-auto space-y-4 w-2/3" id="signup_form">
                {% csrf_token %}

                {% for field in form.visible_fields %}
                  <div>
                    {% if field.label == "E-mail" or field.label == "Password" %}
                      {% else %}
                    <label class="text-xs uppercase text-slate dark:text-white/70">{{ field.label }}</label>
                    {% endif %}
                    {{ field }}
                    {% if field.help_text %}
                      <small>{{ field.help_text }}</small>
                    {% endif %}
                  </div>
                {% endfor %}

                {% if redirect_field_value %}
                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
                {% endif %}

                <div class="flex justify-between mb-4">
                  <a class="text-orange" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
                  <button type="submit" class="py-3 px-8 text-sm text-base font-medium text-white uppercase rounded-md border md:py-1 md:px-4 md:text-lg bg-orange border-orange dark:bg-charcoal dark:text-orange">{% trans "Login" %}</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

      <div class="text-center md:w-1/2">
        <div id="scene01"></div>
      </div>
    </div>
  </div>

{% endblock %}
