{% extends 'popojutrze/modules/_base.html' %}
{% load task_tags %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-4">
                <div class="row">
                    <div class="col-9">
                        {% include 'popojutrze/modules/_navigation.html' with navigation_item='learn' %}
                    </div>
                    <div class="col-3">
                        {% include 'tasks/modules/_navigation_timeline.html' with tasks=tasks %}
                    </div>
                </div>
            </div>
            <div class="col-8">
                <div class="wrapper">
                    <div class="row">
                        <div class="col-12">
                            <div class="title">
                                <h2>{{ selected_path.name }}</h2>
                                <div class="title__status">

                                    <div class="title__status__item">
                                        <div class="title__status__item__head">
                                            Postęp
                                        </div>
                                        <div class="title__status__item__content">
                                            <div class="title__status__item__content--bolder">
                                                {{ path_progress }}%
                                            </div>
                                        </div>
                                    </div>
                                    <div class="title__status__item">
                                        <div class="title__status__item__head">
                                            Zadania
                                        </div>
                                        <div class="title__status__item__content">
                                            <div class="title__status__item__content--bolder">
                                                {{ completed_tasks }}</div>
                                            / {{ available_tasks }}
                                        </div>
                                    </div>
                                    <div class="title__status__item">
                                        <div class="title__status__item__head">
                                            Ćwiczenia
                                        </div>
                                        <div class="title__status__item__content">
                                            <div class="title__status__item__content--bolder">
                                                {{ done_exercises_count }}</div>
                                            / {{ all_exercises_count }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% for task in tasks %}
                        {% with task.exercise_task_positions_by_apprentice as sorted_exercises %}
                            {% icon_class_name task.answers.first.get_status as task_icon_class_name %}
                            <div class="{% if task_icon_class_name == '' and forloop.counter0 != completed_tasks and selected_path.is_path_blocking %}disabled-content{% endif %}">
                                <div class="row">
                                    {% include 'tasks/modules/_task_box.html' with task=task %}
                                </div>
                                {% if not selected_path.is_path_blocking %}
                                    <div class="row">
                                        {% include 'tasks/modules/_task_instances_boxes.html' with answers=task.answers %}
                                    </div>
                                {% endif %}
                                <div class="row">
                                    <div class="col-12">
                                        <div class="col3-left-picture-main-title">
                                            Ćwiczenia: {{ task.done_count }} / {{ sorted_exercises|length }}
                                        </div>
                                    </div>
                                    {% include 'tasks/modules/_task_exercise_boxes.html' with sorted_exercises=sorted_exercises %}
                                </div>
                            </div>
                            <hr>
                        {% endwith %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
