{% extends 'yaccounts/base.html' %}

{% load i18n %}

{% load staticfiles %}

{% block title %}{% trans 'Create Account' %}{% endblock %}

{% block body %}

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-4">
      <h1 class="text-center login-title">{% trans 'Create Account' %}</h1>
      
      <!-- Frame -->
      <div class="account-wall">

        <img class="profile-img" src="{% static 'yaccounts/images/avatar_default.png' %}" alt="Avatar">

        <!-- Social Auth -->
        <div class="social-box">
          <div class="row mg-btm">
            <div class="col-md-12">
              <a href="{% url 'yaccounts:facebook_login' %}{% if next %}?next={{ next }}{% endif %}" class="btn btn-primary btn-block">
                <i class="fa fa-facebook-square"></i></i>
                &nbsp;&nbsp;{% trans 'Sign Up with Facebook' %}
              </a>
            </div>
          </div>
          <br>
          <div class="row">
            <div class="col-md-12">
              <a href="{% url 'yaccounts:twitter_login' %}{% if next %}?next={{ next }}{% endif %}" class="btn btn-info btn-block" >
                <i class="fa fa-twitter-square"></i>
                &nbsp;&nbsp;{% trans 'Sign Up with Twitter' %}
              </a>
            </div>
          </div>
        </div>
        
        <!-- Divider -->
        <div class="login-or">
          <hr class="hr-or">
          <span class="span-or">or</span>
        </div>
        
        <!-- Django Messages -->
        {% include 'yaccounts/django_messages.html' %}

        <!-- Create Account Form -->
        <form class="form-signup" method="POST" action="{% url 'yaccounts:create' %}">
          {% csrf_token %}

          <!-- Full Name -->
          <input type="text" class="form-control" placeholder="{% trans 'Full Name' %}" name="name" value="{{ name }}" required autofocus>
          <br>

          <!-- Email -->
          <input type="text" class="form-control" placeholder="{% trans 'Email' %}" name="email" value="{{ email }}" required>
          <br>

          <!-- Password -->
          <input type="password" class="form-control" placeholder="{% trans 'Password' %}" name="password" required>
          <br>
          
          <!-- Page to redirect after login -->
          {% if next %}
            <input type="hidden" name="next" value="{{ next }}">
          {% endif %}
          
          <!-- Submit -->
          <button class="btn btn-lg btn-default btn-primary btn-block" type="submit">{% trans 'Sign up' %}</button>

          <span class="clearfix"></span>
        </form>
      
      </div>

      <a href="{% url 'yaccounts:login' %}" class="text-center new-account">{% trans 'Already have an account?' %}</a>

    </div>
  </div>
</div>

{% endblock %}

{% block javascript %}
  <script>
      $(document).ready(function() {
          $('.form-signup button[type="submit"]').on('click', function() { $('.form-signup button[type="submit"]').attr('disabled', true); $('.form-signup').submit(); } );
      });    
  </script>
{% endblock %}