{% extends 'popojutrze/modules/_base.html' %}
{% load embed_video_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"></div>
                </div>
            </div>
            <div class="col-8">
                <div class="wrapper">
                    <div class="row">
                        <div class="col-12">
                            <div class="title title--extended">
                                <h2>Ćwiczenia do: {{ selected_exercise_task_position.task.title }}</h2>
                                <a href="{% url 'tasks:task-detail' task_slug=selected_exercise_task_position.task.slug task_id=selected_exercise_task_position.task.id %}">
                                    <div class="title--extended__arrow"></div>
                                </a>
                                <div class="title--extended__description">
                                    {{ selected_exercise_task_position.task.subtitle }}
                                </div>
                                <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 exercises-progress-content">
                                                {{ exercises_progress }}%
                                            </div>
                                        </div>
                                    </div>
                                    <div class="title__status__item">
                                        <div class="title__status__item__head">
                                            Ćwiczenie
                                        </div>
                                        <div class="title__status__item__content">
                                            <div class="title__status__item__content--bolder">{{ selected_exercise_task_position.position }}</div>
                                            / {{ selected_exercise_task_position.task.exercises.active.count }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="static-box">
                                <div class="static-box__image">
                                    <img src="../popojutrze/media/image-wide.png" alt="">
                                    {% video selected_exercise_task_position.exercise.yt_video as exercise_video %}
                                    {% video exercise_video '800x600' %}
                                    {% endvideo %}
                                </div>
                                <div class="static-box__buttons">
                                    {% with selected_exercise_task_position.previous as previous %}
                                        {% if previous %}
                                            <a href="{% url 'exercises:exercise-detail' exercise_slug=previous.exercise.slug exercise_task_position_id=previous.id %}">
                                                <div class="button button__navigation button__navigation--previous">
                                                    Poprzednie
                                                </div>
                                            </a>
                                        {% endif %}
                                    {% endwith %}
                                    <div class="static-box__buttons__text">
                                        Ćwiczenie {{ selected_exercise_task_position.position }}
                                    </div>
                                    {% with selected_exercise_task_position.next as next %}
                                        {% if next %}
                                            <a href="{% url 'exercises:exercise-detail' exercise_slug=next.exercise.slug exercise_task_position_id=next.id %}">
                                                <div class="button button__navigation button--blue button__navigation--right">
                                                    Następne
                                                </div>
                                            </a>
                                        {% endif %}
                                    {% endwith %}
                                </div>
                                <div class="static-box__title">
                                    <p>{{ selected_exercise_task_position.exercise.title }}</p>
                                </div>
                                <div class="static-box__description">
                                    <p>{{ selected_exercise_task_position.exercise.text }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% if not all_done %}
                        {% if not done %}
                            <div class="row todo-notification">
                                {% include 'popojutrze/modules/_notification_button.html' with notification_context=todo_notification_context %}
                            </div>
                        {% endif %}
                        <div class="row done-notification" {% if not done %}style="display: none"{% endif %}>
                            {% include 'popojutrze/modules/_notification_button.html' with notification_context=done_notification_context %}
                        </div>
                    {% endif %}
                    <div class="row all-done-notification" {% if not all_done %}style="display: none"{% endif %}>
                        {% include 'popojutrze/modules/_notification_button.html' with notification_context=done_all_notification_context %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        exerciseHandler();
    </script>
{% endblock %}

