{% extends 'base_training.html' %}

{% load static %}
{% load button from filters %}
{% load colour_from_depth from tags %}

{% block css %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'css/selects.css' %}"/>
{% endblock %}

{% block preload_js %}
    {{ block.super }}
    <script src="{% static 'js/selects.js' %}"></script>
{% endblock %}

{% block js %}
    {{ block.super }}
    <script src="{% static 'js/interaction.js' %}"></script>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col">
        <form class="form" method="POST" id="session_form" action="{% url 'session_log' %}">
            {% include 'form_errors.html' %}
            {% csrf_token %}
            <h3>People</h3>
            <div class="mb-3 row" id="supervisor_group">
              {% include 'partials/supervisor_field.html' %}
            </div>
            <div class="mb-3 row" id="trainees_group">
              <label for="trainees_id" class="col-sm-2">Select Attendees</label>
              <select multiple name="trainees" id="trainees_id" class="ts-select col-sm-10" data-live-search="true" data-sourceurl="{% url 'api_secure' model='profile' %}?fields=first_name,last_name,initials" data-noclear="true">
              </select>
            </div>
            <h3>Training Items</h3>
            {% for depth in depths %}
            <div class="mb-3 row" id="{{depth.0}}">
              <label for="ts-select" class="col-sm-2 text-{% colour_from_depth depth.0 %} py-1">{{ depth.1 }} Items</label>
              <select multiple name="items_{{depth.0}}" id="items_{{depth.0}}_id" class="ts-select col-sm-10 px-0" data-live-search="true" data-sourceurl="{% url 'api_secure' model='training_item' %}?fields=display_id,description&filters=active" data-noclear="true">
              </select>
            </div>
            {% endfor %}
            <h3>Session Information</h3>
            <div class="mb-3 row">
                {% include 'partials/form_field.html' with field=form.date col='col-sm-6' %}
                {% button 'today' id='id_date' %}
            </div>
            <div class="mb-3">
              {% include 'partials/form_field.html' with field=form.notes %}
            </div>
            <div class="col-sm-12 text-end my-3">
            {% button 'submit' %}
            </div>
        </form>
        {% if request.user.can_log_training and not request.user.is_supervisor %}
        <div class="mb-3">
            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#deliverable_items" aria-expanded="false" aria-controls="deliverable_items">
                <span class="fas fa-question-circle"></span> What training items can I deliver training in?
            </button>
            <div class="collapse mt-3" id="deliverable_items">
                <div class="card card-body">
                    <p class="text-muted">You may deliver training in these items. Passing people out is only possible where marked.</p>
                    {% for category, items in deliverable_items %}
                    <h5>{{ category }}</h5>
                    <ul>
                        {% for item in items %}<li>{{ item.display_name }}{% if item.can_pass_out %} <span class="text-muted">(including passing out)</span>{% endif %}</li>{% endfor %}
                    </ul>
                    {% empty %}
                    <p class="mb-0">You can't currently deliver training in any items. An item must be marked as technician-trainable, you must be passed out in it, and you must hold any technician level its category requires.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}