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

{% block body %}
    <body class="hold-transition register-page">
    <div class="register-box">
        <div class="register-logo">
            <a href="/"><b>Charles</b>LTE</a>
        </div>
        <div class="register-box-body">
            <p class="login-box-msg">账号·注册</p>

            <form method="post" id="register_form">
                <div class="form-group has-feedback">
                    <input type="text" class="form-control" placeholder="中文昵称" id="id_nick_name">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="text" class="form-control" placeholder="账号" id="id_username">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="email" class="form-control" placeholder="QQ邮箱" id="id_email">
                    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" class="form-control" placeholder="密码" id="id_password">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" class="form-control" placeholder="确认·密码" id="id_password2">
                    <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
                </div>
                <div class="row">
                    <div class="col-xs-8">
                        <div class="checkbox icheck">
                            <label>
                                <input type="checkbox" checked> 我已经同意 <a href="#">入坑</a>
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-xs-4">
                        <button type="button" class="btn btn-primary btn-block btn-flat" id="id_submit">注册</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>

            <div class="social-auth-links text-center">
                <p>- OR -</p>
                <a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Sign
                    up using
                    Facebook</a>
                <a href="#" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-google-plus"></i> Sign
                    up using
                    Google+</a>
            </div>

            <a href="/login" class="text-center">我已经有账号</a>
        </div>
        <!-- /.form-box -->
    </div>
    <!-- /.register-box -->
    </body>
{% endblock %}
{% block script %}
    <script>
        function register() {
            $.ajax({
                url: '/api/register/',
                type: 'post',
                headers: {
                    "X-CSRFToken": "{{ csrf_token }}"
                },
                data: {
                    'nick_name': $('#id_nick_name').val(),
                    'username': $('#id_username').val(),
                    'email': $('#id_email').val(),
                    'password': $('#id_password').val(),
                    'password2': $('#id_password2').val(),
                },
                success: function (data) {
                    window.location.href = '/login'
                    xtip.msg('注册成功')
                },
                error: function (data) {
                    xtip.msg(data.responseText);
                }

            })
        }
        let elem = document.getElementById('id_submit');
        elem.addEventListener('click', debouce(register, 1000, true));
    </script>
{% endblock %}