{% extends 'base_rigs.html' %}

{% load user_has_qualification from tags %}
{% load percentage_complete from tags %}
{% load user_level_if_present from tags %}

{% block content %}
<div class="col-sm-12 text-right">
<a type="button" class="btn btn-success" href="{% url 'edit_record' pk=request.user.pk %}">
	<span class="fas fa-plus"></span> Add New Training Record
</a>
</div>
<div class="row mb-3">
    <h2 class="col-12">Training Levels</h2>
    <div class="alert alert-info" role="alert">Technical Assistant is conferred automatically when the item requirements are met. Technician status is also automatic, but notification of status should be made at the next general meeting, at which point 'approval' should be granted on the system. Supervisor status is <em>not automatic</em> and until signed off at a general meeting, does not count.<sup>Correct as of 7th July 2021, check the Training Policy.</sup></div>
    <div class="card-columns">
        {% for level in levels %}
        <div class="card my-3">
            <h3 class="card-header"><a href="{% url 'level_detail' level.pk %}">{{ level }}</a></h3>
            <div class="card-body">
                <p>{{ level.description|truncatewords:30 }}</p>
                <div class="progress mb-2">
                  {% percentage_complete level object as completion %}

                  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: {{completion}}%" aria-valuenow="{{completion}}" aria-valuemin="0" aria-valuemax="100">{{completion}}% complete</div>
                </div>

                <button class="btn btn-link p-0" type="button" data-toggle="collapse" data-target=".reqs_{{level.pk}}" aria-expanded="false" aria-controls="reqs_{{level.pk}}">
                   Requirements <span class="fas fa-caret-right reqs_{{level.pk}} collapse show"></span><span class="fas fa-caret-down collapse reqs_{{level.pk}}"></span>
                </button>
                <div class="collapse reqs_{{level.pk}}">
                  <table class="table table-sm">
                      <thead>
                        <tr>
                          <th scope="col" class="table-warning">Training Started</th>
                          <th scope="col" class="table-success">Training Complete</th>
                          <th scope="col" class="table-info">Passed Out</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><ul class="list-unstyled">{% for req in level.started_requirements %}<li>{{ req.item }} {% user_has_qualification object req.item 0 %}</li>{% endfor %}</ul></td>
                          <td><ul class="list-unstyled">{% for req in level.complete_requirements %}<li>{{ req.item }} {% user_has_qualification object req.item 1 %}</li>{% endfor %}</ul></td>
                          <td><ul class="list-unstyled">{% for req in level.passed_out_requirements %}<li>{{ req.item }} {% user_has_qualification object req.item 2 %}</li>{% endfor %}</ul></td>
                        </tr>
                      </tbody>
                   </table>
                </div>
            </div>
            <div class="card-footer">
                {% user_level_if_present object level as level_qualification %}
                {% if level_qualification %}
                    {% if level_qualification.confirmed_by is None %}
                        {% if request.user.is_supervisor or request.user.is_superuser %}
                        <a class="btn btn-info" href="{% url 'confirm_level' object.pk level.pk %}">Confirm</a>
                        {% else %}
                        <button class="btn btn-warning text-right" disabled>Awaiting Confirmation</button>
                        {% endif %}
                    {% else %}
                    <button class="btn btn-success active">Confirmed <small>by {{ level_qualification.confirmed_by }}</small></button>
                    {% endif %}
                {% else %}
                <button class="btn btn-danger text-right" disabled>Incomplete</button>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
<div class="row">
    <h2 class="col-12">Training Items</h2><br>
    <h3 class="col-12">Key: <span class="badge badge-warning">Training Started</span> <span class="badge badge-success">Training Complete</span> <span class="badge badge-info">Passed Out</span></h3>
    <div class="card-columns">
        {% for category in categories %}
        <div class="card mb-3">
            <h3 class="card-header">{{ category }}</h3>
            <div class="list-group list-group-flush">
            {% for q in object.qualifications_obtained.all %}
                {% if q.item.category == category %}
                <li class="list-group-item {% if q.depth == 0 %}list-group-item-warning{%elif q.depth == 1%}list-group-item-success{%else%}list-group-item-info{%endif%}">{{q.item}} ({{q.date}})</li>
                {% endif %}
            {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}