{% extends "cosinnus/base.html" %}
{% load i18n  cosinnus_tags widget_tweaks %}

{% block page_title %}{% trans "Sign up" %}{% endblock %}

{% block jshead %}
    {% comment %} This page deals with authentication data and loads only the most necessary vendor scripts! {% endcomment %}
{% endblock jshead %}

{% block breadcrumb %}
	<li><a href="#">{% trans "Login" %}</a></li>
	<li class="active">{% trans "Create account" %}</li>
{% endblock breadcrumb %}

{% block leftnav %}
    {% include "cosinnus/registration/leftnav.html" with current_page="signup" %}
{% endblock leftnav %}

{% block content %}

<form action="" method="post" enctype="multipart/form-data" class="cosinnus-form form-horizontal" role="form">
    {% csrf_token %}
    <input type="hidden" name="next" value="/">
    
    <!-- a box with semi transparent background -->
    <div class="content-box">
        {{ form.non_field_errors }}
        
        {# Regular Field #}
		{% trans "Email address" as email_label %}
		{% trans "This will be used as your login. Notification emails will be sent to this address (if you want to receive them)." as email_legend %}
		{% trans "Example: mymail@example.com" as email_placeholder %}
		{% include 'cosinnus/fields/default_field.html' with field=form.email legend=email_legend label=email_label placeholder=email_placeholder first=True %}
		        
        
        {# Regular Field #}
        {% trans "Password" as pass1_label %}
        {% trans "Enter a password you don't use anywhere else. The longer the better!" as pass1_legend %}
        {% trans "Password" as pass1_placeholder %}
        {% include 'cosinnus/fields/default_field.html' with field=form.password1 legend=pass1_legend label=pass1_label placeholder=pass1_placeholder %}
        
        {# Regular Field #}
        {% trans "Repeat your password just to make sure" as pass2_label %}
        {% trans "Repeat Password" as pass2_placeholder %}
        {% include 'cosinnus/fields/default_field.html' with field=form.password2 label=pass2_label placeholder=pass2_placeholder first=True %}

        
        {# Regular Field #}
        {% trans "Your name" as firstname_label %}
        {% trans "This name will be displayed to other users on the site" as firstname_legend %}
        {% trans "First name" as firstname_placeholder %}
        {% include 'cosinnus/fields/default_field.html' with field=form.first_name legend=firstname_legend label=firstname_label placeholder=firstname_placeholder %}
                
        {# Regular Field #}
        {% trans "Last name" as lastname_label %}
        {% trans "You can supply your last name to be displayed as well" as lastname_legend %}
        {% trans "Last name" as lastname_placeholder %}
        {% include 'cosinnus/fields/default_field.html' with field=form.last_name label=lastname_label legend=lastname_legend placeholder=lastname_placeholder %}
                
        
        {# Regular Field #}
        {% trans "Captcha" as captcha_label %}
        {% trans "We need to make sure you are a real person (sorry!)" as captcha_legend %}
        {% include 'cosinnus/fields/default_field.html' with field=form.captcha legend=captcha_legend label=captcha_label large_field=True %}
                
        <br>
                            
        <div class="pull-right">
    		{{ form.tos_check.errors }}
        	<span class="pull-left inline-list" style="color: #333;">
                <span class="cursor-pointer-input">
                	{% render_field form.tos_check %}
                </span>
	        	<span onclick="$('#{{ form.tos_check.id_for_label }}').prop('checked', !($('#{{ form.tos_check.id_for_label }}').prop('checked')));">
	                {% trans "I have read and accept the" context "read and accept the [Terms of Services]" %}
	            </span>
            <b><a href="/nutzungsbedingungen/" target="_blank">{% trans "Terms and Services" %} <i class="fa fa-external-link"></i></a></b>
            </span>
        </div>

    </div><!-- content-box -->

    <button type="submit" class="btn btn-emphasized">
        <ul class="media-list">
            <li class="media">
                <span class="pull-left" href="#" tabindex="-1">
                    <i class="fa fa-hand-o-right"></i>
                </span>
                <div class="media-body">
                    {% trans "Register" %}
                </div>
            </li>
        </ul>
    </button>


  </form>
{% endblock content %}