{% load url from future %}
<script>
  var json_school_list = "{% url 'json_school_list' %}"
  var json_school_course_list = "{% url 'json_school_course_list' %}"
  var json_school_course_instructor_list = "{% url 'json_school_course_instructor_list' %}"
  var csrf_token = "{{ csrf_token }}";
</script>
<script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
<script src="{{ STATIC_URL }}js/course.js"></script>
<script src="{{ STATIC_URL }}js/add-course.js"></script>

<section id="add-course-form">
  <form method="POST" action="{% url 'home' %}">
  {% csrf_token %}

    {% for error in course_form.non_field_errors %}
    <div class="row">
      <div class="small-12 columns">
        {{ error }}
      </div>
    </div>
    {% endfor %}

    <div class="row">
      <div class="small-12 columns">
        <legend>
          School
          {% for error in course_form.school.errors %}
          <span style="color:red">
            {{ error }}
          </span>
          {% endfor %}
        </legend>
        <div>
          <input id="str_school" class="" type="text" name="str_school" placeholder="Select a school"/>
          <input id="id_school" name="school" type='hidden'/>
        </div>
      </div>
    </div> <!-- .row -->

    <div class="row">
      <div class="small-12 columns">
        <legend>Course Name:
          {% if course_form.name.errors %}
            <span style="color:red">
            {{ course_form.name.errors }}
            </span>
          {% endif %}
        </legend>
        <input id="id_name" class="" type="text" name="name" maxlength="255" />
      </div>
    </div> <!-- .row -->

    <div class="row">
      <div class="small-12 columns">
        <legend>Do not fill in this field:
          {% for error in honeypot_errors %}
            <span style="color:red">
            {{ error }}
            </span>
          {% endfor %}
        </legend>
        <input type="text" name="{{HONEYPOT_FIELD_NAME}}" value="{{HONEYPOT_VALUE}}" />
      </div>
    </div>

    <div class="row">
      <div class="small-12 columns large-6">
        <legend class="">
          Instructor Name:
          {% for error in course_form.instructor_name.errors %}
            <span style="color:red">
            {{ error }}
            </span>
          {% endfor %}
        </legend><!-- -->
        <input id="id_instructor_name" class="" type="text" name="instructor_name" maxlength="75" />
      </div>

      <div class="small-12 columns large-6">
        <legend class="">
          Instructor Email:
          {% for error in course_form.instructor_email.errors %}
            <span style="color:red">
            {{ error }}
            </span>
          {% endfor %}
        </legend>
        <input id="id_instructor_email" class="" type="text" name="instructor_email" maxlength="75" />
      </div><!--  -->
    </div> <!-- .row -->

    <div class="row">
      <div class="small-12 columns">
        <legend>Course url:
          {% for error in course_form.url.errors %}
            <span style="color:red">
            {{ error }}
            </span>
          {% endfor %}
        </legend>
        <input id="id_url" class="" type="text" name="url" maxlength="255" />
      </div>
    </div> <!-- .row -->

    <div class="row">
      <div class="small-4 large-8 columns small-centered text-center">
        <button id="save-btn" class="disabled">
          <i class="fa fa-save"></i> Save
        </button>
        <span id="existing-course-msg" class="hide">
          Looks like this course already exists on KarmaNotes!
          <a id="existing-course-btn" class="button">Go To Existing Course <i class="fa fa-arrow-right"></i></a></span>
      </div>
    </div>

  </form>
</section>
