{% extends "shared/includes/base.html" %}
{% load render_bundle from webpack_loader %}
{% load markdownify static lecture_group_types %}

{% block content %}
    {% render_bundle "view_group_lectures" %}

    {% include "shared/includes/double_heading.html" with heading=group.name subheading="Vzdělávání" icon="ico--user" %}

    {% if group.description %}
        <div class="prose max-w-none mb-10">
            {{ group.description|markdownify|safe }}
        </div>
    {% endif %}

    <script>
        window.currentTimelineYear = {{ current_year }};
    </script>

    <div class="__js-root">
        <ui-view-provider
            :initial="{current_lectures: false, calendar: false, recordings: true}"
            :sync-location="true"
            v-slot="{ isCurrentView, toggleView }"
        >
            <div class="flex justify-center mb-10">
                <div class="switch overflow-x-auto">
                    <a
                        @click="toggleView('recordings')"
                        class="switch__item whitespace-nowrap"
                        :class="{'switch__item--active': isCurrentView('recordings')}"
                    >Záznamy</a>
                    <a
                        @click="toggleView('current_lectures')"
                        class="switch__item whitespace-nowrap"
                        :class="{'switch__item--active': isCurrentView('current_lectures')}"
                    >Aktuálně</a>
                    <a
                        @click="toggleView('timeline')"
                        class="switch__item whitespace-nowrap"
                        :class="{'switch__item--active': isCurrentView('timeline')}"
                    >Časová osa</a>
                </div>
            </div>
            <div>
                <template v-if="isCurrentView('recordings')">
                    {% if past_lectures %}
                        <div class="flex flex-col gap-3">
                            {% regroup past_lectures by category as lecture_categories %}
                            {% for category in lecture_categories %}
                                <div
                                    class="
                                        flex flex-col gap-3 group justify-center

                                        __lecture-category
                                    "
                                    data-is-open="false"
                                >
                                    <div
                                        class="
                                            flex justify-between items-center cursor-pointer p-4

                                            __lecture-category-clickable

                                            hover:bg-gray-100
                                        "
                                    >
                                        <h2 class="text-3xl font-alt">{{ category.grouper }}</h2>

                                        <div>
                                            <i
                                                class="
                                                    __lecture-category-opener
                                                    ico--chevron-down text-2xl
                                                "
                                            ></i>
                                        </div>
                                    </div>

                                    <noscript>
                                        <ul class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                            {% for lecture in category.list %}
                                                {% include "lectures/includes/lecture.html" with lecture=lecture group=group %}
                                            {% endfor %}
                                        </ul>
                                    </noscript>

                                    <ul class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 hidden __lecture-category-content">
                                        {% for lecture in category.list %}
                                            {% include "lectures/includes/lecture.html" with lecture=lecture group=group %}
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <span class="text-gray-600">Žádné dostupné záznamy.</span>
                    {% endif %}
                </template>

                <template v-if="isCurrentView('current_lectures')">
                    {% if current_lectures %}
                        <ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            {% for lecture in current_lectures %}
                                {% include "lectures/includes/lecture.html" with lecture=lecture group=group %}
                            {% endfor %}
                        </ul>
                    {% else %}
                        <span class="text-gray-600">Žádná dostupná aktuální školení.</span>
                    {% endif %}
                </template>

                <template v-if="isCurrentView('timeline')">
                    <div>
                        <div class="head-alt-md mb-4 flex items-center justify-between">
                            <h3 class="flex items-center gap-2">
                                <i class="ico--calendar mr-2"></i>
                                <span id="timeline-current-year">{{ current_year }}</span>
                            </h3>
                            <div class="flex gap-1">
                                <button
                                    class="bg-black p-3 text-2xl text-white hover:bg-grey-800 disabled:opacity-50 disabled:cursor-normal"
                                    id="previous-timeline-item"
                                    onclick="window.previousTimelineYear()"
                                    {% if not has_previous_timeline_years %}disabled{% endif %}
                                ><i class="ico--chevron-left"></i></button>
                                <button
                                    class="bg-black p-3 text-2xl text-white hover:bg-grey-800 disabled:opacity-50 disabled:cursor-normal"
                                    id="next-timeline-item"
                                    onclick="window.nextTimelineYear()"
                                    {% if not has_next_timeline_years %}disabled{% endif %}
                                ><i class="ico--chevron-right"></i></button>
                            </div>
                        </div>
                        {% for year, month_data in per_month_lectures.items %}
                            <ul
                                class="__timeline-year grid grid-cols-1 md:grid-cols-3 gap-3{% if current_year != year %} hidden{% endif %}"
                                id="timeline-year-{{ year }}"
                            >
                                {% for month, lectures in month_data.items %}
                                    <li class="card elevation-3">
                                        <div class="card__body p-5">
                                            <h4 class="head-alt-sm mb-2">{{ month }}</h4>
                                            {% if lectures %}
                                                <ul class="flex flex-col gap-1">
                                                    {% for lecture in lectures %}
                                                        <li>
                                                            <a
                                                                class="
                                                                    inline-block px-2.5 py-1.5 rounded-sm duration-100 hover:no-underline
                                                                    {% get_lecture_type lecture request group as type %}
                                                                    {% if type.type == type.TypeChoices.REQUIRED.value %}
                                                                        bg-red-700 hover:bg-red-800 text-white
                                                                    {% elif type.type == type.TypeChoices.RECOMMENDED.value %}
                                                                        bg-amber-500 hover:bg-amber-600
                                                                    {% else %}
                                                                        bg-gray-200 hover:bg-gray-300
                                                                    {% endif %}
                                                                "
                                                                href="{% url "lectures:view_lecture" lecture.id %}?related_group_id={{ group.id }}"
                                                            >{{ lecture.name }}</a>
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                            {% else %}
                                                <span class="block text-gray-600 pt-2">Žádná školení.</span>
                                            {% endif %}
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endfor %}

                        <script type="application/javascript" defer>
                            window.currentTimelineYear = {{ current_year }};
                        </script>
                    </div>
                </template>
            </div>
        </ui-view-provider>
    </div>
{% endblock %}