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

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

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

    <div class="p-4">
        <twig:Card title="Upcoming episodes of shows your monitoring">
            <div id="calendar" class="text-white">
            </div>
        </twig:Card>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', async function() {
            let data = await fetch('/api/upcoming-episodes');
            data = (await data.json())['data'];

            const calendarEl = document.getElementById('calendar');
            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                events: data['episodes'],
            });
            calendar.render();
        });
    </script>
{% endblock %}