{% extends 'base_training.html' %}

{% load paginator from filters %}
{% load colour_from_depth from tags %}

{% load static %}

{% block js %}
    <script src="{% static "js/tooltip.js" %}"></script>
    <script>
        $(function () {
          $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
{% endblock %}

{% block content %}
<div class="row pt-2">
    <div class="col">
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th>Level</th>
                        <th>Date</th>
                        <th>Notes</th>
                    </tr>
                </thead>
                <tbody>
                {% for object in object_list %}
                    <tr id="row_item">
                        <th scope="row" class="align-middle" id="cell_name"><a href="{% url 'trainee_detail' object.trainee.pk %}">{{ object.trainee }} {% if request.user.pk == object.trainee.pk %}<span class="fas fa-user text-success"></span>{%endif%}</a></th>
                        <td class="table-{% colour_from_depth object.depth %}">{{ object.get_depth_display }}</td>
                        <td>{{ object.date }}</td>
                        <td>{{ object.notes }}</td>
                    </tr>
                {% empty %}
                <tr class="table-warning">
                    <td colspan="6" class="text-center">Nothing found</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% paginator %}
{% endblock %}