<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{admin/view}">
    <head>
        <link href="/webjars/fullcalendar/main.css" rel="stylesheet" />
        <script src="/webjars/fullcalendar/main.js"></script>
        <script src="/webjars/fullcalendar/locales/nl.js"></script>
    </head>

    <body>
        <section layout:fragment="subcontent">
            <div class="container">
                <div id="calendar"></div>
                <script th:inline="javascript">
                    document.addEventListener('DOMContentLoaded', function () {
                        let calendarEl = document.getElementById('calendar');
                        let calendar = new FullCalendar.Calendar(calendarEl, {
                            // plugins: [listPlugin],
                            headerToolbar: {
                                left: 'timeGridWeek,timeGridDay,listDay',
                                center: 'title',
                                right: 'today prev,next'
                            },
                            initialView: 'timeGridWeek',
                            nowIndicator: true,
                            businessHours: {
                                daysOfWeek: [1, 2, 3, 4, 5],
                                startTime: '08:45',
                                endTime: '17:45'
                            },
                            eventDisplay: 'block'
                        });
                        let sessions = /*[[${sessions}]]*/;
                        sessions.forEach(dto => {
                            let event = {
                                title: dto.session.name,
                                start: dto.session.start,
                                end: dto.session.end,
                                description: dto.session.description,
                                url: "/lab/" + dto.id
                            }
                            switch (dto.type) {
                                case "SLOTTED":
                                    event['backgroundColor'] = "yellow"
                                    event['textColor'] = "black"
                                    calendar.addEvent({
                                        title: dto.session.name + " slot selection",
                                        start: dto.selectionOpensAt,
                                        backgroundColor: "yellow",
                                        textColor: "black"
                                    })
                                    break;
                                case "EXAM":
                                    event['backgroundColor'] = "red"
                                    calendar.addEvent({
                                        title: dto.session.name + " slot selection",
                                        start: dto.selectionOpensAt,
                                        backgroundColor: "red",
                                    })
                                    break;
                            }
                            calendar.addEvent(event)
                        })
                        calendar.render();
                    })
                </script>
            </div>
        </section>
    </body>
</html>
