{% load i18n %}
<div class="modal" id="register-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{% trans 'Register account' %}</h5>
          <button type="button" class="btn btn-light fa fa-times" data-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form id="register-form">
                {% csrf_token %}
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input name="email" type="email" name="register-email" class="form-control" id="id-register-email" aria-describedby="register-email-errors" placeholder="Enter email">
                    <small id="register-email-errors" class="form-text text-danger"></small>
                </div>
                <div class="form-group">
                    <label for="id-register-password">Password</label>
                    <input name="password" type="password" class="form-control" id="id-register-password" aria-describedby="register-password-errors" placeholder="Enter password">
                    <small id="register-password-errors" class="form-text text-danger"></small>
                </div>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-success" onclick="register()">{% trans 'Register' %}</button>
        </div>
      </div>
    </div>
</div>

<script>
function register() {

    {% if not user.is_authenticated %}
    let url = "{% url 'api-users-list' %}";
    {% else %}
    let url = "{% url 'api-users-create-from-demo-user' %}";
    {% endif %}

    let redirect_url = "{% url 'index' %}";
    let data = $("#register-form").serialize()
    $.post(url, data)
    .fail(function(data) {
        $("#register-email-errors").html((data.responseJSON.email || []).join("<br>"));
        $("#register-password-errors").html((data.responseJSON.password || []).join("<br>"));
    })
    .done(function() {
        window.location.replace(redirect_url);
    })
}


</script>