{% extends "base.html" %}

{% load i18n %}

{% load account socialaccount %}

{% block head_title %}{% trans "Sign Up" %}{% 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 "Sign Up" %}</h1>
          <p class="mt-0 text-center">
            {% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">log in</a>.{% endblocktrans %}
          </p>
        </div>

        <div class="space-y-4 w-full text-center">
          <p class="mt-0 text-center">
              <a :class="tab === '#social' ? 'text-slate dark:text-white' : 'text-orange'"
                 href="#"
                 data-toggle="tab"
                 x-on:click.prevent="tab='#social'"
              >
                Sign Up 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>
          </p>

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

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

          </div>

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

                {% if form.errors %}
                  {% for error in field.errors %}
                    <p class="font-bold text-orange">
                      {{ error|escape }}
                    </p>
                  {% endfor %}
                {% endif %}

                {% for field in form.visible_fields %}
                  <div>
                    {{ 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>
              <div class="my-11">
                <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 "Sign Up" %}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

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

{% endblock %}
