{% extends 'base.html' %}
{% load staticfiles %}

{% block body_class %}signup{% endblock %}

{% block title %}Sign Up{% endblock %}

{% block content %}

  <div class="sign-in-btn-mobile">
    <p>Already part of our family? Sign in below</p>
    <a href="{% url 'sign_in' %}" class="btn btn-primary btn-lg">Sign in</a>
  </div>

  <div class="main-content">
    <div class="container">
      <h1 class="form-title">Register for an account</h1>
      <section class="form-main-wrapper">
        <div class="logo-block"></div>
        <div class="social-sign-in">
          <p>Sign in using your social account.</p>
          <ul>
            <li class="facebook">
              <a href="{% url 'oauth' provider='facebook' %}">
                <img
                  src="{% static 'core/images/icons/form/facebook_icon.png' %}"
                  alt="Facebook">
              </a>
            </li>
            <li class="google-plus">
              <a href="{% url 'oauth' provider='google' %}">
                <img
                  src="{% static 'core/images/icons/form/google_plus_icon.png' %}"
                  alt="Google Plus">
              </a>
            </li>
         </ul>
        </div>
        <form
          action="{% url 'sign_up' %}?next={{ next }}"
          method="post"
          class="sign-up-form form-generic">
          {% for field in form %}
          {{ field.errors }}
            <label for="{{ field.id_for_label }}">
            {{ field.label }}
              {% if field.field.required %}
                <span class="required"></span>
              {% endif %}
            </label>
            {{ field }}
          {% endfor %}
          <input
            type="submit"
            value="Create my account"
            class="btn-primary-lg" />
        </form>
      </section>
    </div>
  </div>

{% endblock %}
