{% load crispy_forms_tags %}
<div>
    <div class="panel-group" id="accordion-create-session">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-create-session" href="#create-session" aria-expanded="true">Create Session</a>
                </h4>
            </div>
            <div id="create-session" class="panel-collapse collapse in" aria-expanded="true">
                <div class="panel-body">
                    {% if create_session_form %}
                        {% crispy create_session_form %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <div>
        <table id="session-table" class="sort">
            <thead>
                <tr>
                    <th class="sort-header" data-sort-method="date">Date</th>
                    <th class="sort-header">Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for session in sessions %}
                <tr>
                    <td><a href="{% url 'musictherapy:user_session_detail' userinfo.id session.id %}">{{ session.date }}</a></td>
                    <td style="color: red">{% if session.status == 0 %} Missed / Absent {% endif %}</td>
                    <td><a href="{% url 'musictherapy:delete_session' userinfo.id session.id %}" type="button" class="btn btn-danger">Delete</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
    new Tablesort(document.getElementById('session-table'));
</script>