{% extends 'quintet/dashboard.html' %}

{% block title %}Sections{% endblock %}

{% block active_nav %}Sections{% endblock %}

{% block content %}
<div class="toolbar">
  {% if perms.quintet.add_section %}
  <button type="button" class="btn btn-primary pull-right" style="margin-bottom: 20px;" data-toggle="modal" data-target="#section-modal">
    <span class="glyphicon glyphicon-plus"></span> Add Section
  </button>
  {% endif %}
</div>

<table class="table table-hover" id="section-table">
  <tr>
    <th>Section</th>
    {% if perms.quintet.delete_section %}
    <th class="text-center">Delete</th>
    {% endif %}
  </tr>

  {% for section in sections %}
  <tr>
    <td>{{ section }}</td>
    {% if perms.quintet.delete_section %}
    <td class="text-center">
      <a href="{% url 'delete_section' pk=section.pk %}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete {{ section }}?');">
        <span class="glyphicon glyphicon-trash"></span>
      </a>
    </td>
    {% endif %}
  </tr>
  {% empty %}
  <tr>
    <td colspan="2" class="text-muted text-center"><em>No Sections to display.</em></td>
  </tr>
  {% endfor %}
</table>

{% if perms.quintet.add_section %}
{% include 'quintet/modals/add_section.html' with form=section_form %}
{% endif %}
{% endblock %}

{% block js %}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.49/jquery.form.min.js"></script>
{% endblock %}
