<!--Placeholder

Notes:
- Costome themes

-->
<!DOCTYPE html>
<html lang="en" active-theme="{{ settings['settings'][0]['theme'] }}">

<head>
    <title>Surfer</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/static/images/icon.png" type="image/x-icon" />
    <link rel="stylesheet" href="/static/styles/style.css" />
</head>

<body>
    <div class="menu-bar" style="margin-top: 20px;">
        <a href="/" class="button text-button">
            <div class="button-icon"></div><i data-feather="home"></i>
        </a>
        <a href="/bookmarks?typ=site" class="button text-button">
            <div class="button-icon"></div><i data-feather="bookmark"></i></i>
        </a>
        <a href="/history" class="button text-button">
            <div class="button-icon"></div><i data-feather="clock"></i>
        </a>
    </div>
    <div class="settings">
        <div class="content-card settings">
            <div class="card-details">
                <div class="card-header">
                    <h2 id="ctitle" class="card-title" style="margin-bottom: 10px;">Settings</h2>
                    <div class="settings-head">
                        <a id="history-mode-toggle" class="button text-button">
                            <div class="button-icon"></div><i data-feather="clock"
                                style="margin-right: 4px; height: 20px; width: 20px;"></i> {{
                            settings["settings"][0]["history"] }}
                        </a>
                        <a id="clear-history-button" class="button text-button">
                            <div class="button-icon"></div><i data-feather="trash-2"
                                style="margin-right: 4px; height: 20px; width: 20px;"></i> History
                        </a>
                        <a id="clear-bookmarks-button" class="button text-button">
                            <div class="button-icon"></div><i data-feather="trash-2"
                                style="margin-right: 4px; height: 20px; width: 20px;"></i> Bookmarks
                        </a>
                    </div>
                </div>
                <div class="card-middle" style="margin-top: 10px;">
                    <p class="card-summary">Themes</p>
                    <select name="themes" id="themes" class="card-select">
                        <optgroup label="Current">
                            <option value="{{ settings['settings'][0]['theme'] }}" selected>{{
                                settings["settings"][0]["theme"] }}</option>
                        </optgroup>
                        <optgroup label="Standard">
                            <option value="light">Light</option>
                            <option value="dark">Dark</option>
                        </optgroup>
                        <optgroup label="Dark">
                            <option value="forest">Forest</option>
                            <option value="hackermode">Hackermode</option>
                            <option value="material-dark">Material Dark</option>
                            <option value="the-silver-rivers">The Silver Rivers</option>
                        </optgroup>
                        <optgroup label="Light">
                            <option value="copia">Copia</option>
                            <option value="waves">Waves</option>
                            <option value="garden">Garden</option>
                            <option value="blueberry">Blueberry</option>
                            <option value="ocean-blue">Ocean Blue</option>
                            <option value="mustafa-solar-light">Mustafa Solar Light</option>
                        </optgroup>
                    </select>
                    <p class="card-summary">Deprecated</p>
                    <select name="safesearch" id="safesearch" class="card-select">
                        <optgroup label="Current">
                            <option value="{{ settings['settings'][0]['search'] }}" selected>{{
                                settings["settings"][0]["search"] }}</option>
                        </optgroup>
                        <optgroup label="Standard">
                            <option value="Moderate">Default</option>
                            <option value="On">On</option>
                            <option value="Off">Off</option>
                        </optgroup>
                    </select>
                </div>
                <div class="card-middle" style="margin-top: 10px;">
                    <h2 id="ctitle" class="card-title" style="margin-bottom: 5px;">Integrations</h2>
                    <p class="card-summary">{{ blackhole['data'][0]['integration'] }}</p>
                    <input id="ibar" class="card-inteput" type="text" placeholder="Integration url"
                        value="{{ blackhole['data'][0]['url'] }}" autocomplete="off" style="margin-bottom: 10px;">
                </div>
                <div class="card-bottom" style="margin-top: 10px;">
                    <a id="ssave" class="button">
                        <div class="button-icon"></div><i data-feather="save" style="height: 20px; width: 20px;"></i>
                    </a>
                    <a id="sreset" class="button">
                        <div class="button-icon"></div><i data-feather="delete" style="height: 20px; width: 20px;"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="/static/scripts/settings.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
    feather.replace()
</script>

</html>