{{ define "title" }}
  {{ .Title }} · {{ .Site.Title }}
{{ end }}
{{ define "content" }}
<section class="container post">
    <article>
        <header>
            <div class="post-title">
                <h1 class="title">
                    <a class="title-link" href="{{ .Permalink | safeURL }}">
                        {{ .Title }}
                    </a>
                </h1>
            </div>
            <div class="post-meta">
                <div id="calendar"></div>

                <hr>
                <label for="link" style="width:10%;">Link pubblico:</label>
                <input type="text" id="link" style="width:60%;" value="{{ .Params.ics_ical }}" readonly>
                <button onclick="copyToClipboard()" style="width:20%;">Copia link</button>
                <hr>
            </div>
        </header>
    </article>
</section>

<script src='{{.Site.BaseURL}}/js/fullcalendar.min.js'></script>
<script src='{{.Site.BaseURL}}/js/it.global.min.js'></script>
<script>
    async function start_calendar() {
        await fetch('{{ .Params.ics_json }}')
            .then( function(data){
                console.log(data.text());
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'timeGridWeek',
                    locale: 'it',
                    nowIndicator: true,
                    stickyHeaderDates: true,
                    expandRows: true,
                    slotMinTime: '07:00:00',
                    slotMaxTime: '23:59:00',
                    headerToolbar: {
                        left: "prev,next today",
                        center: "title",
                        right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
                    },
                    eventDisplay: "block",
                    events: data,
                    allDaySlot: false
                });

                calendar.render();
            });
    }

    function copyToClipboard() {
        var link = document.getElementById("link");
        link.select();
        document.execCommand("copy");
        alert("Link copiato!");
    }

    document.addEventListener('DOMContentLoaded', function() {
        start_calendar();
    });
</script>

<style>
.fc-event-main{
    line-height: 1.2em;
}
</style>
{{ end }}