{% extends 'base.html' %}
{% load staticfiles %}
{%  load i18n %}
{% block main %}
    <script>
        $(document).ready(function () {
            {% if post %}
                {# checking form from the beginning of typing #}
                $('form input').live('keyup', function () {
                    var form = $("#registration_form");
                    form.valid();
                });

            {% endif %}

            {# change icon in the field #}
            $('form input').live('keyup', function () {
                if ($(this).hasClass('valid') && $(this).next('label.error').length > 0) {
                    $(this).next('label.error').remove();
                }
            });




     if ($('#registration_form').length) {
         $('#registration_form').validate({
                    rules: {
                        username: {
                            {% if form.username.errors %}
                                is_not_equal: ['{{ form.username.value|default_if_none:"" }}'],
                            {% endif %}
                            required: true,
                            email: true

                        },

                        password: {
                            required: true,
                            minlength: 6,
                            maxlength: 64
                        },
                        password2: {
                            required: true,
                            equalTo: '#password'
                        }
                    },
                    messages: {
                        username: {
                            {% if form.username.errors %}
                                is_not_equal: 'Email {{ form.username.value|default_if_none:"" }} {% trans " уже зарегистрирован." %}',
                            {% endif %}
                            required: '{% trans "Введите email" %}',
                            email: '{% trans "Некорректный email" %}'
                        },

                        password: {
                            minlength: '{% trans "Минимум 6 символов" %}',
                            maxlength: '{% trans "Максимум 64 символа" %}',
                            required: '{% trans "Введите пароль" %}'
                        },
                        password2: {
                            required: '{% trans "Повторите ввод пароля" %}',
                            equalTo: "{% trans "Пароли не совпадают" %}"
                        }

                    }
                })
            }

 });


      {#    FACEBOOK #}
        window.fbAsyncInit = function () {
            FB.init({
                appId: '1721263248140476',
                cookie: true,  // enable cookies to allow the server to access
                               // the session
                xfbml: true,  // parse social plugins on this page
                version: 'v2.7' // use graph api version 2.5
            });
        };

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        function checkLoginState() {
            FB.login(function (response) {
                if (response.authResponse) {
                    $('input[name=signed_request]').val(response.authResponse.signedRequest);
                    FB.api('/me', {fields: 'email,first_name,last_name', access_token: ''}, function (response) {
                        console.log(JSON.stringify(response));
                        $('input[name=fbusername]').val(response.email);
                        $('input[name=fbid]').val(response.id);
                        $('input[name=fbfirstname]').val(response.first_name);
                        $('input[name=fblastname]').val(response.last_name);
                        $("#registration_form").validate().cancelSubmit = true;
                        $('#registration_form').submit();
                    });
                } else {
                    console.log('User cancelled login or did not fully authorize.');
                }
            }, {scope: 'email'});
        }
        {#    FACEBOOK #}

    function vk_login_make_url(){
        window.location.href = "https://oauth.vk.com/authorize?client_id=5604935&scope=email&redirect_uri=http://ifolica.ru/login/&response_type=code";
    }



    </script>



 <!-- page6-block -->
<div id="page1-block">
  <div class="wrapper">
    <div class="left-block">
      <div class="btn-block">
        <ul>
            <li><a href="/login/">Вход</a></li>
            <li class="active"><a href="/signup/">Регистрация</a></li>
        </ul>
      </div>
    </div>
    <div class="right-block">
      <div class="form-block">
        <form action method="post" id="registration_form">
        {% csrf_token %}
          <p style="margin-top:0">

              <label for="name">Имя</label><input type="text" name="first_name" class="input" id="first_name" placeholder=""></p>
          <p><label for="surname">Фамилия</label><input type="text" name="last_name" class="input" id="last_name" placeholder=""></p>
        <p style="padding-top: 20px;"><label for="email">E-mail *</label>

            <input type="text" id="username"  class="input"
                   class="form-control {% if post %}{% if form.username.errors %}error{% else %}valid{% endif %}{% endif %}"
                   value="{{ form.username.value|default_if_none:"" }}"
                   name="username">
            {% if form.username.errors %}
                <label for="username" generated="true" class="error"
                       style="display: inline;">{{ form.username.errors }}</label>
            {% endif %}


          <p style="padding-top: 20px;"><label for="password">Пароль *</label>
        <input type="password" id="password"  class="input"
                                   class="form-control {% if post %}{% if form.password.errors %}error{% else %}valid{% endif %}{% endif %}"
{#                                   value="{{ form.password.value|default_if_none:"" }}"#}
                                   name="password">
                                {% if form.password.errors %}
                                    <label for="username" generated="true" class="error" style="display: inline;">{{ form.password.errors }}</label>
                                {% endif %}
       <p> <label for="password2">Еще раз *</label>
                                <input  class="input" type="password" id="password2" name="password2"></p>
          <div class="clear"></div>
          <button type="submit" class="btn btn-red" style="width:200px">Зарегистрироваться</button>
        <input type="hidden" name="fbusername" value="">
        <input type="hidden" name="signed_request" value="">
        <input type="hidden" name="fbid" value="">
        <input type="hidden" name="fbfirstname" value="">
        <input type="hidden" name="fblastname" value="">
            <div class="btn-block">
                <h1 style="padding:0; margin: 15px 0 0 0;">Или войдите через:</h1>
                <a href="javascript:void(0);" onclick="vk_login_make_url();" class="btn btn-blue scbtn"><span class="span_s">В</span>вконтакте</a>
                <a href="javascript:void(0);" onclick="checkLoginState();" class="btn btn-blue scbtn"><span class="span_s">f</span>facebook</a>
            </div>
        </form>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</div>
<div class="pfooter"></div>
  <!-- page6-block END -->
{% endblock main %}