{% extends "base_generic.html" %}

{% block content %}

    {% if form.errors %}
        <p>Your phone number and otp didn't match. Please try again.</p>
    {% endif %}

    {% if next %}
        {% if user.is_authenticated %}
            <p>Your account doesn't have access to this page. To proceed,
                please login with an account that has access.</p>
        {% else %}
            <p>Please login to see this page.</p>
        {% endif %}
    {% endif %}

    <form method="post" action="{% url 'login' %}">
        {% csrf_token %}
        <table>

            <tr>
                <td>{{ form.phone_number.label_tag }}</td>
                <td>{{ form.phone_number }}</td>
                <td id="request-otp"><a class="btn btn-default">requet otp</a></td>
                <td id="otp-result"></td>
            </tr>

            <tr>
                <td>{{ form.otp.label_tag }}</td>
                <td>{{ form.otp }}</td>
            </tr>
        </table>

        <input type="submit" value="login"/>
        <input type="hidden" name="next" value="{{ next }}"/>
    </form>

    <script>
        $("#request-otp").click(
             function () {
                 var phoneNumber = $('#id_phone_number')[0].value;

                 $.post("/request_otp/",{'phone_number': phoneNumber},function (result) {
                        console.log(result);
                        $("#otp-result")[0].innerHTML = 'otp expire: ' + result['otp_expire'] ;
                });
             }
        );

    </script>

{% endblock %}