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

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

    {% include "shared/includes/double_heading.html" with heading=group.name subheading="výuka" 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: true, calendar: false, recordings: false}"
            :sync-location="true"
            v-slot="{ isCurrentView, toggleView }"
        >
            <div class="flex justify-center mb-10">
                <div class="switch overflow-x-auto">
                    <a
                        @click="toggleView('current_lectures')"
                        class="switch__item"
                        :class="{'switch__item--active': isCurrentView('current_lectures')}"
                    >Aktuálně</a>
                    <a
                        @click="toggleView('timeline')"
                        class="switch__item"
                        :class="{'switch__item--active': isCurrentView('timeline')}"
                    >Časová osa</a>
                    <a
                        @click="toggleView('recordings')"
                        class="switch__item"
                        :class="{'switch__item--active': isCurrentView('recordings')}"
                    >Záznamy</a>
                </div>
            </div>
            <div>
                <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 bg-gray-200 rounded-sm duration-100 hover:no-underline hover:bg-gray-300"
                                                                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>
                <template v-if="isCurrentView('recordings')">
                    {% if past_lectures %}
                        <ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            {% for lecture in past_lectures %}
                                {% include "lectures/includes/lecture.html" with lecture=lecture group=group %}
                            {% endfor %}
                        </ul>
                    {% else %}
                        <span class="text-gray-600">Žádné dostupné záznamy.</span>
                    {% endif %}
                </template>
            </div>
        </ui-view-provider>
    </div>
{% endblock %}