{% extends 'base_training.html' %}

{% block content %}
<div id="accordion">
  {% for category in categories %}
  <div class="card">
    <div class="card-header" id="heading{{forloop.counter}}">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse{{forloop.counter}}" aria-expanded="true" aria-controls="collapse{{forloop.counter}}">
          {{ category }}
        </button>
    </div>
    <div id="collapse{{forloop.counter}}" class="collapse" aria-labelledby="heading{{forloop.counter}}" data-parent="#accordion">
      <div class="card-body">
        <div class="list-group list-group-flush">
            {% for item in category.items.all %}
                <li class="list-group-item {% if not item.active%}text-warning{%endif%}">{{ item }}
                {% if item.prerequisites.exists %}
                    <div class="ml-3 font-italic">
                    <p class="text-info mb-0">Passed Out Prerequisites:</p>
                    <ul>
                    {% for p in item.prerequisites.all %}
                    <li>{{p}}</li>
                    {% endfor %}
                    </ul>
                    </div>
                {% endif %}
                <a href="{% url 'item_qualification' item.pk %}" class="btn btn-info"><span class="fas fa-user"></span> Qualified Users</a>
                </li>
            {% endfor %}
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}