{% extends 'base.html.twig' %}

{% block h2 %}Upcoming Episodes{% endblock %}

{% block action_buttons %}
    <a href="{{ path('app.monitor.upcoming-episodes') }}" data-turbo="false"
       class="h-6 bg-orange-500/80 hover:bg-orange-600/80 px-2 text-white rounded-ms text-sm font-semibold">
        Upcoming Episodes
    </a>
    <twig:ActionButton action="monitorDispatch" text="Run Monitors" />
{% endblock %}

{% block body %}
    {{ turbo_page_requires_reload() }}
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>

    <div class="p-4">
        <div class="mb-4 text-white">
            <a href="{{ path('app.monitors') }}" class="btn btn-primary inline-flex items-center gap-2">
                <twig:ux:icon name="fluent-mdl2:back" width="14" /> Back to Monitors
            </a>
        </div>
        
        <twig:Card title="Upcoming episodes of shows your monitoring">
            <a href="{{ path('app.monitors.ical', {email: app.user.email}) }}" title="Subscribe to the 'Upcoming Episodes' calendar via iCal. Click to export the events to a .ics file or copy the link and use it to subscribe in a calendar app that supports iCal/ics calendars." class="mb-2 self-end dark:text-white decoration-underline">
                <twig:ux:icon name="lets-icons:calendar-add-light" width="24" class="text-orange-500" />
            </a>
            <div id="upcoming_episodes_calendar" class="text-white">
            </div>
        </twig:Card>
    </div>

    <script>
        function getView() {
            if (window.innerWidth < 768) {
                return 'listWeek';
            } else {
                return 'dayGridMonth';
            }
        }
        document.addEventListener('DOMContentLoaded', async function() {
            const modal = document.getElementById('previewModal');
            modal.setAttribute('mdWidth', '25rem');
            let data = await fetch('/api/monitor/upcoming-episodes');
            data = (await data.json())['data'];

            const calendarEl = document.getElementById('upcoming_episodes_calendar');
            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: getView(),
                events: data['episodes'],
                windowResize: function(arg) {
                    this.changeView(getView());
                },
                eventClick: function (data) {
                    modal.display({
                        heading: data.event.title,
                        content: `
<div class="flex flex-col gap-4 justify-center items-center">
    <img src="${data.event.extendedProps.attachment}" class="w-[90%] rounded-md" />
    <p>${data.event.startStr}</p>
</div>
`
                    })
                }
            });
            calendar.render();
        });
    </script>
{% endblock %}