{% extends 'base_rigs.html' %}

{% block content %}
<div class="row my-3 text-right">
<a type="button" class="btn btn-success" href="{% url 'edit_record' pk=request.user.pk %}">
	<i class="fas fa-plus"></i> Add New Training Record
</a>
</div>
<div class="row mb-3">
    <h2 class="col-12">Training Levels</h2>
    <div class="card-columns">
        {% for level in levels %}
        <div class="card my-3">
            <h3 class="card-header"><a href="{% url 'level_edit' level.pk %}">{{ level }}</a></h3>
            <div class="card-body">
                <div class="progress mb-2">
                  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25% complete</div>
                </div>
                <p>{{ level.description }}</p>
                <button class="btn btn-link p-0" type="button" data-toggle="collapse" data-target=".reqs_{{level.pk}}" aria-expanded="false" aria-controls="reqs">
                   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 }}</li>{% endfor %}</ul></td>
                          <td><ul class="list-unstyled">{% for req in level.complete_requirements %}<li>{{ req.item }}</li>{% endfor %}</ul></td>
                          <td><ul class="list-unstyled">{% for req in level.passed_out_requirements %}<li>{{ req.item }}</li>{% endfor %}</ul></td>
                        </tr>
                      </tbody>
                   </table>
                </div>
            </div>
            <div class="card-footer">
                <button class="btn btn-success text-right" disabled>Incomplete</button>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
<div class="row">
    <h2 class="col-12">Training Items</h2><br>
    <div class="card-columns">
        {% for category in categories %}
        <div class="card mb-3">
            <h3 class="card-header">{{ category.name }}</h3>
            <div class="list-group list-group-flush">
            {% for depth in depths %}
            <li class="list-group-item {% if depth.0 == 0 %}list-group-item-warning{%elif depth.0 == 1%}list-group-item-success{%else%}list-group-item-info{%endif%}">{{depth.1}}</li>
            {% for q in object.qualifications_obtained.all %}
                {% if q.depth == depth.0 and q.item.category == category %}
                <li class="list-group-item">{{q.item}} ({{q.date}})</li>
                {% endif %}
            {% endfor %}
            {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}