<?php

$correct_password = "GabrielIsDeBeste123";

if (!isset($_SERVER['PHP_AUTH_PW']) ||
    $_SERVER['PHP_AUTH_PW'] !== $correct_password) {

    header('WWW-Authenticate: Basic realm="Foto Viewer"');
    header('HTTP/1.0 401 Unauthorized');
    exit('Wachtwoord vereist');
}
$images = array_values(array_filter(scandir('.'), function($file) {
    return preg_match('/\.(jpg|jpeg|png|gif|webp)$/i', $file);
}));
?>

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foto Viewer</title>

<style>
body {
    margin: 0;
    background: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
}

button {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    padding: 10px 20px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    cursor: pointer;
}

#prev { left: 20px; }
#next { right: 20px; }
</style>
</head>
<body>

<button id="prev">◀</button>
<img id="image">
<button id="next">▶</button>

<script>
const images = <?= json_encode($images) ?>;

let current = 0;
const img = document.getElementById('image');

function showImage() {
    img.src = images[current];
}

document.getElementById('prev').onclick = () => {
    current = (current - 1 + images.length) % images.length;
    showImage();
};

document.getElementById('next').onclick = () => {
    current = (current + 1) % images.length;
    showImage();
};

document.addEventListener('keydown', e => {
    if (e.key === 'ArrowLeft') {
        document.getElementById('prev').click();
    } else if (e.key === 'ArrowRight') {
        document.getElementById('next').click();
    }
});

showImage();
</script>

</body>
</html>