{% extends "base.html" %}

{% block title %}Welcome to {{ program_name }}{% endblock %}

{% block content %}

    <main role="main" class="content">
	<div class="container">

    <form method="post" action="">
    {% csrf_token %}

    <div class="form-group">
    <div class="card impact-card">
        <div class="card-header impact-card-header">
            <h4>School Code</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12">
                     <p>Enter your school code below:</p>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-4">
                    {{ school_code_form.school_code_field }}
                </div>
                <div class="col-sm-8 align-self-center">
                    <div class id="school-class-found">
                    <p><span>&#8203;</span></p>
                    </div>
                </div>

            </div>

        </div>
    </div>
    </div>

    <div class="form-group">
        <div class id="start-button">
            <button type="submit" class="btn btn-success disabled">
                Next <i class="material-icons">chevron_right</i>
            </button>
        </div>
    </div>


    </form>

    </div>

    </main>
{% endblock %}

{% block javascript %}

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <script type="text/javascript">
         $(document).ready(function() {

              $('#id_school_code_field').keyup(function() {
                var typed_code = $(this).val();
                $.ajax({
                    url: '/core_nav/check-school-code/',
                    data: {
                         'typed_code': typed_code,
                         csrfmiddlewaretoken: '{{ csrf_token }}'
                     },
                     dataType: 'json',
                     type: 'POST',

                    success: function(data) {
                        $('#school-class-found').html(data.new_html);
                        $('#start-button').html(data.new_button_html);
                    }
                  });

              });
            });


     </script>
{% endblock %}
