<div class="modal fade" id="section-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Add Section</h4>
      </div>
      <form action="{% url 'add_section' %}" method="post" id="section-form">{% csrf_token %}
        <div class="modal-body">
          {% for field in form %}
          <div class="form-group">
            {{ field.errors }}
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
          </div>
          {% endfor %}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Add Section</button>
        </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
$(document).ready(function() {
  $('#section-form').ajaxForm({
    'dataType': 'json',
    'resetForm': true,
    'success': function(data) {
      if(data.success) {
        // Hide Modal
        $('#section-modal').modal('hide');

        // Add row to table
        $('#section-table tbody').append('\
          <tr>\
            <td>' + data.section.name + '</td>\
            {% if perms.quintet.delete_section %}\
            <td class="text-center">\
              <a href="/quintet/sections/' + data.section.pk + '/delete/" class="btn btn-danger btn-sm" onclick="return confirm(\'Are you sure you want to delete ' + data.section.name + '?\');">\
                <span class="glyphicon glyphicon-trash"></span>\
              </a>\
            </td>\
            {% endif %}\
          </tr>\
        ');
      } else {
        alert("Sorry, an error occored: " + data.error);
      }
    }
  });
})
</script>
