<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings - Ocásek</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/{{.Theme}}.css">
    <link rel="stylesheet" href="/static/css/style-settings.css">
    <link rel="search" type="application/opensearchdescription+xml" title="Ocásek" href="/opensearch.xml">
</head>
<body>
    <div class="settings-nav">
        <h1 class="logomobile"><a class="no-decoration" href="./">Settings</a></h1>
    </div>

    <div class="settings-container">
        <form action="/save-settings" method="post">
            <div class="settings">
                <div class="settings-row">
                    <span class="highlight"><p>Theme</p></span>
                </div>

                <div class="theme-settings">
                    <div class="themes-settings-menu">
                        <a href="/search?theme=dark" class="theme-link">
                            <div class="view-image-search clickable" id="dark">
                                <img src="/static/images/dark.webp" alt="Dark (Default)">
                                <div class="theme-tooltip">Dark (Default)</div>
                            </div>
                        </a>
                        <a href="/search?theme=light" class="theme-link">
                            <div class="view-image-search clickable" id="light">
                                <img src="/static/images/light.webp" alt="Light">
                                <div class="theme-tooltip">Light</div>
                            </div>
                        </a>
                        <a href="/search?theme=night" class="theme-link">
                            <div class="view-image-search clickable" id="night">
                                <img src="/static/images/night.webp" alt="night">
                                <div class="theme-tooltip">Night</div>
                            </div>
                        </a>
                        <a href="/search?theme=black" class="theme-link">
                            <div class="view-image-search clickable" id="black">
                                <img src="/static/images/black.webp" alt="Black">
                                <div class="theme-tooltip">Black</div>
                            </div>
                        </a>
                        <a href="/search?theme=mocha" class="theme-link">
                            <div class="view-image-search clickable" id="mocha">
                                <img src="/static/images/mocha.webp" alt="🌿 Mocha">
                                <div class="theme-tooltip">Mocha</div>
                            </div>
                        </a>
                        <a href="/search?theme=latte" class="theme-link">
                            <div class="view-image-search clickable" id="latte">
                                <img src="/static/images/latte.webp" alt="🌻 Latte">
                                <div class="theme-tooltip">Latte</div>
                            </div>
                        </a>
                    </div>
                </div>
                
                <div class="settings-row">
                    <p>Safe Search</p>
                    <select class="results-settings" name="safe" id="safeSearchSelect">
                        <option value="disabled" {{if eq .Safe "disabled"}}selected{{end}}>Safe Search Off</option>
                        <option value="active" {{if eq .Safe "active"}}selected{{end}}>Safe Search On</option>
                    </select>
                </div>

                <div class="settings-row">
                    <p>Preferred Language</p>
                    <select class="results-settings" name="lang" id="languageSelect">
                        {{range .LanguageOptions}}
                        <option value="{{.Code}}" {{if eq .Code $.CurrentLang}}selected{{end}}>{{.Name}}</option>
                        {{end}}
                    </select>
                </div>

                <div class="settings-row settings-row2">
                    <p class="font-hide">|</p>
                    <button class="save save-settings-page" type="submit">Save Settings</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>