<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Title}}</title>
    <script src="/assets/alpine.min.js" defer></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: black; height: 100vh; overflow: hidden; }
        .page {
            width: 100vw;
            height: 100vh;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
        .page.landscape {
            width: 100vh;
            height: 100vw;
            transform: rotate(90deg) translateY(-100%);
            transform-origin: top left;
        }
    </style>
</head>
<body>
    <div
        x-data="{
            current: 0,
            landscape: false,
            width: 1080,
            height: 1920,
            imaginary: '{{.ImaginaryURL}}',
            pages: [{{range $i, $p := .Pages}}{{if $i}},{{end}}'{{$p}}'{{end}}],
            urls: [],
            prefetched: new Set(),
            imageExts: ['.png', '.jpg', '.jpeg', '.webp', '.bmp', '.avif'],
            isImage(path) {
                const ext = path.substring(path.lastIndexOf('.')).toLowerCase();
                return this.imageExts.includes(ext);
            },
            buildUrls() {
                this.urls = this.pages.map(p => {
                    if (this.isImage(p)) {
                        return this.imaginary + '/fit?width=' + this.width + '&height=' + this.height + '&file=' + encodeURIComponent(p);
                    }
                    return '/static/' + p;
                });
                this.prefetched.clear();
            },
            prefetch() {
                const img = new Image();
                img.onload = () => {
                    for (let i = 1; i <= 10 && this.current + i < this.urls.length; i++) {
                        const url = this.urls[this.current + i];
                        if (!this.prefetched.has(url)) {
                            this.prefetched.add(url);
                            new Image().src = url;
                        }
                    }
                };
                img.src = this.urls[this.current];
            },
            swap() {
                this.landscape = !this.landscape;
                [this.width, this.height] = [this.height, this.width];
                this.buildUrls();
            },
            init() {
                this.buildUrls();
                this.prefetch();
                this.$watch('current', () => this.prefetch());
            }
        }"
        @keydown.window.left.prevent="current = Math.max(0, current - 1)"
        @keydown.window.right.prevent="current = Math.min(urls.length - 1, current + 1)"
        @keydown.window.up.prevent="current = Math.max(0, current - 5)"
        @keydown.window.down.prevent="current = Math.min(urls.length - 1, current + 5)"
        @keydown.window.k.prevent="swap()"
        @keydown.window.backspace.prevent="history.back()"
        autofocus
    >
        <div class="page" :class="landscape ? 'landscape' : ''" :style="'background-image: url(\'' + urls[current] + '\');'"></div>
    </div>
</body>
</html>
