<?php
// UI Header — HTML, Bootstrap, styles, JS, and opening <body>
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>FileCloud</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<style>
    body { padding: 20px; }
    .grid-thumb { width: 160px; height: 160px; object-fit: cover; border-radius: 8px; }
    .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .icon { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; font-size:32px; }
</style>

<script>
function setView(mode) {
    localStorage.setItem("fv_view", mode);

    const list = document.getElementById("listView");
    const grid = document.getElementById("gridView");

    if (mode === "list") {
        list.style.display = "block";
        grid.style.display = "none";
    } else {
        list.style.display = "none";
        grid.style.display = "block";
        void grid.offsetHeight;
    }
}

document.addEventListener("DOMContentLoaded", () => {
    setView(localStorage.getItem("fv_view") || "list");
});
</script>

</head>
<body>
