{{ define "main" }}
{{ if .Site.Data.args.archive_landing }}
    <main class="primary notoc">
        <div id="sidebar-container" class="sidebar-container sidebar-offcanvas">
        </div>
        <div class="article-container">
            <h1>istio.io Archives</h1>
            <p>Snapshots of the <a href="https://istio.io">istio.io</a> website for each release.</p>

            <ul>
                {{ range $archive := .Site.Data.archives }}
                    <li><a href="./{{ $archive.name }}">{{ $archive.name }}</a></li>
                {{ end }}
            </ul>
        </div>
    </main>
{{ else }}
    <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@v0.162.0/build/three.module.js"
        }
    }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@latest/dist/js/splide-extension-auto-scroll.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            new Splide('.case-studies', {
                type: 'loop',
                perPage: 3,
                start: 2,
                arrows: false,
                autoScroll: {
                    speed: 1,
                },
                breakpoints: {
                    768: {
                        perPage: 2,
                    },
                    534: {
                        perPage: 1,
                    },
                },
                pagination: false,
            }).mount( window.splide.Extensions );
        });
    </script>

    {{ .Content }}
    
    <script type="module" src="/js/headerAnimation.min.js"></script>
{{ end }}
{{ end }}