{% extends "preresults_layout.html" %}

{% block body %}
        <link rel="stylesheet" href="{{ url_for('static', filename='css/search.css') }}">
    {% if settings.theme == "dark_blur" %}
        <link rel="stylesheet" href="./css/dark_blur_beta.css">
    {% endif %}
    <div class="settings-search-div settings-search-div-search">
        <button class="material-icons-round clickable settings-icon-link settings-icon-link-search">menu</button>
    </div>
    <div class="search-menu settings-menu-hidden">
        <h2>{{ lang_data.settings.settings_header }}</h2>
    <div class="settings-content">
        <button id="settingsButton">{{ lang_data.settings.all_settings }}</button>
    <div class="theme-settings">
        <p><span class="highlight">{{ lang_data.settings.theme }}: </span> <span id="theme_name">{{ lang_data.settings.user_theme }}</span></p>
        <div class="themes-settings-menu">
            <div><img class="view-image-search clickable" id="dark_blur" alt="Dark (Default)" src="/themepreview/preview1.webp"></div>
            <div><img class="view-image-search clickable" id="dark_default" alt="Dark (no background)" src="/themepreview/preview2.webp"></div>
            <div><img class="view-image-search clickable" id="light" alt="Light" src="/themepreview/preview3.webp"></div>
        </div>
    </div>
    <select class="lang" name="lang">
        <option value="" {% if settings.lang == '' %}selected{% endif %}>{{ lang_data.settings.any_language }}</option>
        <option value="lang_en" {% if settings.lang == 'lang_en' %}selected{% endif %}>English</option>
        <option value="lang_af" {% if settings.lang == 'lang_af' %}selected{% endif %}>Afrikaans</option>
        <option value="lang_ar" {% if settings.lang == 'lang_ar' %}selected{% endif %}>العربية (Arabic)</option>
        <option value="lang_hy" {% if settings.lang == 'lang_hy' %}selected{% endif %}>Հայերեն (Armenian)</option>
        <option value="lang_be" {% if settings.lang == 'lang_be' %}selected{% endif %}>Беларуская (Belarusian)</option>
        <option value="lang_bg" {% if settings.lang == 'lang_bg' %}selected{% endif %}>български (Bulgarian)</option>
        <option value="lang_ca" {% if settings.lang == 'lang_ca' %}selected{% endif %}>Català (Catalan)</option>
        <option value="lang_zh-CN" {% if settings.lang == 'lang_zh-CN' %}selected{% endif %}>中文 (简体) (Chinese Simplified)</option>
        <option value="lang_zh-TW" {% if settings.lang == 'lang_zh-TW' %}selected{% endif %}>中文 (繁體) (Chinese Traditional)</option>
        <option value="lang_hr" {% if settings.lang == 'lang_hr' %}selected{% endif %}>Hrvatski (Croatian)</option>
        <option value="lang_cs" {% if settings.lang == 'lang_cs' %}selected{% endif %}>Čeština (Czech)</option>
        <option value="lang_da" {% if settings.lang == 'lang_da' %}selected{% endif %}>Dansk (Danish)</option>
        <option value="lang_nl" {% if settings.lang == 'lang_nl' %}selected{% endif %}>Nederlands (Dutch)</option>
        <option value="lang_eo" {% if settings.lang == 'lang_eo' %}selected{% endif %}>Esperanto</option>
        <option value="lang_et" {% if settings.lang == 'lang_et' %}selected{% endif %}>Eesti (Estonian)</option>
        <option value="lang_tl" {% if settings.lang == 'lang_tl' %}selected{% endif %}>Filipino (Tagalog)</option>
        <option value="lang_fi" {% if settings.lang == 'lang_fi' %}selected{% endif %}>Suomi (Finnish)</option>
        <option value="lang_fr" {% if settings.lang == 'lang_fr' %}selected{% endif %}>Français (French)</option>
        <option value="lang_de" {% if settings.lang == 'lang_de' %}selected{% endif %}>Deutsch (German)</option>
        <option value="lang_el" {% if settings.lang == 'lang_el' %}selected{% endif %}>Ελληνικά (Greek)</option>
        <option value="lang_iw" {% if settings.lang == 'lang_iw' %}selected{% endif %}>עברית (Hebrew)</option>
        <option value="lang_hi" {% if settings.lang == 'lang_hi' %}selected{% endif %}>हिन्दी (Hindi)</option>
        <option value="lang_hu" {% if settings.lang == 'lang_hu' %}selected{% endif %}>magyar (Hungarian)</option>
        <option value="lang_is" {% if settings.lang == 'lang_is' %}selected{% endif %}>íslenska (Icelandic)</option>
        <option value="lang_id" {% if settings.lang == 'lang_id' %}selected{% endif %}>Bahasa Indonesia (Indonesian)</option>
        <option value="lang_it" {% if settings.lang == 'lang_it' %}selected{% endif %}>italiano (Italian)</option>
        <option value="lang_ja" {% if settings.lang == 'lang_ja' %}selected{% endif %}>日本語 (Japanese)</option>
        <option value="lang_ko" {% if settings.lang == 'lang_ko' %}selected{% endif %}>한국어 (Korean)</option>
        <option value="lang_lv" {% if settings.lang == 'lang_lv' %}selected{% endif %}>latviešu (Latvian)</option>
        <option value="lang_lt" {% if settings.lang == 'lang_lt' %}selected{% endif %}>lietuvių (Lithuanian)</option>
        <option value="lang_no" {% if settings.lang == 'lang_no' %}selected{% endif %}>norsk (Norwegian)</option>
        <option value="lang_fa" {% if settings.lang == 'lang_fa' %}selected{% endif %}>فارسی (Persian)</option>
        <option value="lang_pl" {% if settings.lang == 'lang_pl' %}selected{% endif %}>polski (Polish)</option>
        <option value="lang_pt" {% if settings.lang == 'lang_pt' %}selected{% endif %}>português (Portuguese)</option>
        <option value="lang_ro" {% if settings.lang == 'lang_ro' %}selected{% endif %}>română (Romanian)</option>
        <option value="lang_ru" {% if settings.lang == 'lang_ru' %}selected{% endif %}>русский (Russian)</option>
        <option value="lang_sr" {% if settings.lang == 'lang_sr' %}selected{% endif %}>српски (Serbian)</option>
        <option value="lang_sk" {% if settings.lang == 'lang_sk' %}selected{% endif %}>slovenčina (Slovak)</option>
        <option value="lang_sl" {% if settings.lang == 'lang_sl' %}selected{% endif %}>slovenščina (Slovenian)</option>
        <option value="lang_es" {% if settings.lang == 'lang_es' %}selected{% endif %}>español (Spanish)</option>
        <option value="lang_sw" {% if settings.lang == 'lang_sw' %}selected{% endif %}>Kiswahili (Swahili)</option>
        <option value="lang_sv" {% if settings.lang == 'lang_sv' %}selected{% endif %}>svenska (Swedish)</option>
        <option value="lang_th" {% if settings.lang == 'lang_th' %}selected{% endif %}>ไทย (Thai)</option>
        <option value="lang_tr" {% if settings.lang == 'lang_tr' %}selected{% endif %}>Türkçe (Turkish)</option>
        <option value="lang_uk" {% if settings.lang == 'lang_uk' %}selected{% endif %}>українська (Ukrainian)</option>
        <option value="lang_vi" {% if settings.lang == 'lang_vi' %}selected{% endif %}>Tiếng Việt (Vietnamese)</option>
  </select>
    </div>
    </div>
    <form action="/search" class="search-container" method="{{ settings.method }}" autocomplete="off">
        <h1>{{ araa_name }}</h1>
        <div class="wrapper">
            <input type="text" name="q" autofocus id="search-input" />
            <button id="search-wrapper-ico" class="material-icons-round" name="t" value="text" type="submit">search</button>
            <a id="clearSearch" class="material-icons-round">close</a>
            <input type="submit" class="hide"/>
            <div class="autocomplete">
                <ul>
                </ul>
            </div>
        </div>
        <div class="search-button-wrapper">
            <button name="t" value="text" type="submit">{{ lang_data.search_buttons.search_text }}</button>
            <button name="t" value="image" type="submit">{{ lang_data.search_buttons.search_images }}</button>
        </div>
        {% if settings.javascript == "enabled" %}
        <script defer src="/script.js"></script>
        <script defer src="/menu.js"></script>
        <script defer src="/cookies.js"></script>
        <script defer src="/uxlang.js"></script>
        {% endif %}
    </form>
{% endblock %}