{{ define "main" }}
    <div class="container">
        <div id="markdown" class="title-center">
            <h1>Events</h1>
        </div>
        <div id='calendar'></div>
        <div id="markdown">
            {{ .Content }}
            <div class="text-center">
                <button class="mt-3 btn btn-secondary" data-copy="https://nc.ifsr.de/remote.php/dav/public-calendars/W5Sk7zLD28n6ze44/?export" data-lang="{{ .Site.Language.Lang }}">
                    {{ if eq .Site.Language.Lang "de" }}Kalender-Link kopieren{{ else }}Copy Calendar-Link{{ end }}
                </button>
            </div>
        </div>
        <script>
        document.addEventListener("DOMContentLoaded", function () {
          document.querySelectorAll('[data-copy]').forEach(button => {
            button.addEventListener('click', () => {
              const text = button.getAttribute('data-copy');
              navigator.clipboard.writeText(text).then(() => {
                const original = button.innerText;
                  button.innerText = button.dataset.lang === 'de' ? 'Kopiert!' : 'Copied!';
                setTimeout(() => button.innerText = original, 2000);
              });
            });
          });
        });
        </script>
    </div>
{{ end }}