<!--

    Queue - A Queueing system that can be used to handle labs in higher education
    Copyright (C) 2016-2024  Delft University of Technology

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <dialog layout:fragment="overlay" id="theme-overlay" class="dialog" data-closable>
        <div class="flex vertical p-7">
            <h2 class="font-500 underlined">Appearance (beta)</h2>

            <div class="grid col-2 align-center" style="--col-1: minmax(0, 8rem)">
                <label for="theme">Theme</label>
                <select id="theme" class="textfield">
                    <option value="tu" selected>TU Delft</option>
                    <option value="light">☀️ Light</option>
                    <option value="dark">🌙 Dark</option>
                </select>
                <script>
                    document.addEventListener("DOMContentLoaded", function () {
                        const themeSelect = document.getElementById("theme");
                        themeSelect.addEventListener("change", function (event) {
                            setTheme(event.target.value);
                        });
                        if (theme !== null) {
                            themeSelect.value = theme;
                        }
                    });
                </script>
            </div>

            <div>
                <button class="button p-less" data-style="outlined" data-cancel>Close</button>
            </div>
        </div>
    </dialog>
</html>
