{% extends "base.html" %}

{% load i18n %}
{% load account socialaccount %}
{% load crispy_forms_filters %}
{% load crispy_forms_tags %}

{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}

<main  class="row mx-auto">
  <div class="col-md-6 mx-auto">
    <div class="card main-page">
      <div class="card-body">
        <div class="text-center">
          <img src="" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
        </div>
        <div class="sign-in-form_divider">
          <h5 class="card-title login-or mx-auto font-weight-bold">{% trans "Sign Up" %}</h5>
        </div>
        <form class="signup" id="signup_form" method="POST" action="{% url 'account_signup' %}">
          {% csrf_token %}
    
          <div class="row form-floating"> 
            <div class="form-floating">
              {{ form.username|as_crispy_field }}
            </div>           
            <div class="form-floating">
              {{ form.email|as_crispy_field }}
            </div> 
            <div class="col-md-6">
              <div class="form-floating">
                {{ form.password1|as_crispy_field }}
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-floating">
                {{ form.password2|as_crispy_field }}
              </div>
            </div>
            {% if redirect_field_value %}
              <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
            {% endif %}
          <div class="btn-group login-signup-btn w-100 text-center mt-1">
            <button class="primaryAction btn btn-login-signup" type="submit" aria-label="Go to account signup page" >{% trans "Sign Up" %}</button>
          </div>
        </div>
        </form>
        <div class="sign-in-form_or-divider">
          <span class="mx-auto font-weight-bold">{% trans 'or' %}</span>
        </div>
        {% get_providers as socialaccount_providers %}
    
        {% if socialaccount_providers %}
        <div class="d-grid gap-2 mb-3">
          <a title="Google" class="btn btn-dark socialaccount_provider google border-outline bg-light text-dark" href="{% provider_login_url 'google' %}" aria-label="Go to account signup page" type="button">
            <i class="fa-brands fa-google fa-lg" ></i>
            Sign Up with Google
          </a>
          <a title="Facebook" class="btn btn-primary socialaccount_provider facebook" href="{% provider_login_url 'facebook' %}" aria-label="Go to account signup page" type="button">
            <i class="fa-brands fa-facebook fa-lg" style="color: #fff;"></i>
            Sign Up with Facebook
          </a>
          <a title="GitHub" class="btn btn-dark socialaccount_provider github" href="{% provider_login_url 'github' %}" aria-label="Go to account signup page" type="button">
            <i class="fa-brands fa-github fa-lg" style="color: #fff;"></i>
            Sign Up with GitHub
          </a>
        </div>
        {% endif %}
        <div class="text-center">{% trans "Already have a Chat-or-Quiz account?" %} <a href="{{ login_url }}">Login</a></div>
      </div>
    </div>
  </div>
</main>
{% endblock %}