{% extends "AKPlan/plan_base.html" %}

{% load fontawesome_5 %}
{% load i18n %}
{% load static %}
{% load tz %}


{% block fullcalendar %}
    {% if not event.plan_hidden or user.is_staff %}
        {% get_current_language as LANGUAGE_CODE %}

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var planEl = document.getElementById('planCalendar');

                var plan = new FullCalendar.Calendar(planEl, {
                    timeZone: '{{ event.timezone }}',
                    headerToolbar: {
                        left: 'today prev,next',
                        center: 'title',
                        right: 'resourceTimelineDay,resourceTimelineEvent'
                    },
                    themeSystem: 'bootstrap',
                    // Adapt to user selected locale
	                locale: '{{ LANGUAGE_CODE }}',
                    initialView: 'resourceTimelineEvent',
                    views: {
                        resourceTimelineDay: {
                            type: 'resourceTimeline',
                            buttonText: '{% trans "Day" %}',
                            slotDuration: '01:00',
                            scrollTime: '08:00',
                        },
                        resourceTimelineEvent: {
                            type: 'resourceTimeline',
                            visibleRange: {
                                start: '{{ event.start | timezone:event.timezone | date:"Y-m-d H:i:s" }}',
                                end: '{{ event.end | timezone:event.timezone  | date:"Y-m-d H:i:s"}}',
                            },
                            buttonText: '{% trans "Event" %}',
                        }
                    },
                    eventDidMount: function(info) {
                        $(info.el).tooltip({title: info.event.extendedProps.description});
                    },
                    editable: false,
                    allDaySlot: false,
                    nowIndicator: true,
                    eventTextColor: '#fff',
                    eventColor: '#127ba3',
                    resourceAreaWidth: '15%',
                    resourceAreaHeaderContent: '{% trans "Room" %}',
                    resources: {% include "AKPlan/encode_rooms.html" %},
                    events: {% with akslots as slots %}{% include "AKPlan/encode_events.html" %}{% endwith %},
                    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                });

                plan.render();

                // Scroll to current time
                if($(".fc-timeline-now-indicator-line").length) {
                    $('.fc-scroller').scrollLeft($('.fc-timeline-now-indicator-line').position().left);
                }
            });
        </script>
    {% endif %}
{% endblock %}


{% block breadcrumbs %}
    {% include "AKPlan/plan_breadcrumbs.html" %}
    <li class="breadcrumb-item">
        {% trans "AK Plan" %}
    </li>
{% endblock %}


{% block content %}
    <div class="float-right">
        <ul class="nav nav-pills">
            {% if event.room_set.count > 0 %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                       aria-haspopup="true"
                       aria-expanded="false">{% trans "Rooms" %}</a>
                    <div class="dropdown-menu" style="">
                        {% for r in event.room_set.all %}
                            <a class="dropdown-item"
                               href="{% url "plan:plan_room" event_slug=event.slug pk=r.pk %}">{{ r }}</a>
                        {% endfor %}
                    </div>
                </li>
            {% endif %}
            {% if event.aktrack_set.count > 0 %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                       aria-haspopup="true"
                       aria-expanded="false">{% trans "Tracks" %}</a>
                    <div class="dropdown-menu">
                        {% for t in event.aktrack_set.all %}
                            <a class="dropdown-item"
                               href="{% url "plan:plan_track" event_slug=event.slug pk=t.pk %}">{{ t }}</a>
                        {% endfor %}
                    </div>
                </li>
            {% endif %}
            {% if event.active %}
                <li class="nav-item">
                    <a class="nav-link active"
                       href="{% url 'plan:plan_wall' event_slug=event.slug %}">{% fa5_icon 'desktop' 'fas' %}&nbsp;&nbsp;{% trans "AK Wall" %}</a>
                </li>
            {% endif %}
        </ul>
    </div>

    <h1>Plan: {{ event }}</h1>

    {% timezone event.timezone %}
        <div class="row" style="margin-top:30px;">
            {% if not event.plan_hidden or user.is_staff %}
                {% if event.active %}
                    <div class="col-md-6">
                        <h2><a name="currentAKs">{% trans "Current AKs" %}:</a></h2>
                        {% with akslots_now as slots %}
                            {% include "AKPlan/slots_table.html" %}
                        {% endwith %}
                    </div>

                    <div class="col-md-6">
                        <h2><a name="currentAKs">{% trans "Next AKs" %}:</a></h2>
                        {% with akslots_next as slots %}
                            {% include "AKPlan/slots_table.html" %}
                        {% endwith %}
                    </div>
                {% else %}
                    <div class="col-md-12">
                        <div class="alert alert-warning">
                            <p class="mb-0">{% trans "This event is not active." %}</p>
                        </div>
                    </div>
                {% endif %}

                <div class="col-md-12">
                    <div style="margin-top:30px;margin-bottom: 70px;">
                        <div id="planCalendar"></div>
                    </div>
                </div>
            {% else %}
                <div class="col-md-12">
                    <div class="alert alert-warning">
                        <p class="mb-0">{% trans "Plan is not visible (yet)." %}</p>
                    </div>
                </div>
            {% endif %}
        </div>
    {% endtimezone %}
{% endblock %}