{% extends 'base_training.html' %}

{% block css %}
<style>
.level-1::after {
    content: "";
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 50px;
    margin-top: -15px;
    margin-bottom: -15px;
    background: black;
}
</style>
{% endblock %}

{% block content %}
<div class="alert alert-info" role="alert">
<p>Please Note:</p>
<ul>
<li>Technical Assistant status is automatically valid when the item requirements are met.</li>
<li>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.</li>
<li>Supervisor status is <em>not automatically valid</em> and until signed off at a general meeting, does not count.</li>
</ul>
<sup>Correct as of 3rd September 2021, check the Training Policy.</sup>
</div>
<div class="chart">
  {% for level in levels %}
    {% if forloop.counter == 3 %}
    <div class="row">
    <div class="col-6">
    {% endif %}
    {% if level.level == 2 and level.department is None %}
    </div>
    <div class="col-6">
    {% endif %}
    <div class="{% if forloop.first %}level-1 row{% elif forloop.counter == 2 %}level-2 row{%endif%}">
        <div class="card my-3 border-{{level.department_colour}}">
            <h3 class="card-header"><a href="{% url 'level_detail' level.pk %}">{{ level }}</a></h3>
            <div class="card-body">
                <p>{{ level.description }}</p>
            </div>
        </div>
    </div>
    {% if forloop.last %}
    </div>
    </div>
    {% endif %}
  {% endfor %}
</div>
{% endblock %}