{% extends "oscar/layout.html" %}

{% load i18n %}

{% block title %}
    {% trans 'Register' %} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <ul class="breadcrumb">
        <li>
            <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
        </li>
        <li class="active">{% trans 'Register' %}</li>
    </ul>
{% endblock %}

{% block headertext %}
    {% trans "Register" %}
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-sm-6 register_form">
            <form id="register_form" method="post" class="form-stacked">
                {% csrf_token %}
                {% include "oscar/partials/form_fields.html"  %}
                <div class="message">
                    <b class="message">{% trans "We'll send a comformation code to validate email address." %}</b>
                    <button class="btn btn-danger" type="button" onclick="sendConfirmCode()">{% trans "send confirmation code" %}</button>
                </div>
                    
                <br><br>
                <button name="registration_submit" type="submit" value="Register" class="btn btn-primary btn-lg" data-loading-text="{%trans 'Registering...' %}">{% trans 'Register' %}</button>
                {% if cancel_url %}
                    {% trans "or" %} <a href="{{ cancel_url }}">{% trans "cancel" %}</a>.
                {% endif %}
            </form>
        </div>
    </div>
    
    <script type="text/javascript">
        function sendConfirmCode(){
            var email = id_email.value
            var timeStamp = id_timeStamp.value

            var setStatus = function(message, success) {
                $("#confirmIcon").remove();
                if(success == true) {
                    $('div.message').append(
                        '<i id="confirmIcon" class="fa fa-check-circle" aria-hidden="true" style="color:green"></i>');
                } else {
                    $('div.message').append(
                        '<i id="confirmIcon" class="fa fa-times" aria-hidden="true" style="color:red"></i>');
                }
                
                $('b.message').text(message);
            };

            $.ajax({
                type: "POST",
                url: "{% url 'sendConfirmCode' %}",
                data:{
                    email: email,
                    timeStamp: timeStamp,
                },
                success: function(message) {
                    setStatus(message, true);
                },
                error: function(message){
                    setStatus('Sending confirmation code email error: ' +
                        message.statusText, false);
                },
            })
        }
    </script>
{% endblock content %}