{% extends "results_layout.html" %}

{% block body %}
    <form class="results_settings" action="/save-settings" method="post" autocomplete="off">
      <input type="hidden" name="past" value="{{ current_url }}"></input>
      <select class="results-settings" name="image_engine" id="imageEngineSelect">
          {% for eng in available_image_engines %}
            <option value="{{ eng.name }}" {% if settings.image_engine == eng.name %}selected{% endif %}>{{ eng.display }}</option>
          {% endfor %}
      </select>
      <select class="results-settings" name="safe" id="safeSearchSelect">
          <option value="active" {% if settings.safe == 'active' %}selected{% endif %}>{{ lang_data.settings.safe_search }} {{ lang_data.settings.on }}</option>
          <option value="" {% if settings.safe == '' %}selected{% endif %}>{{ lang_data.settings.safe_search }} {{ lang_data.settings.off }}</option>
      </select>
      <select class="results-settings" name="lang" id="languageSelect">
          <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>
      {% if settings.date_filter != "hidden" %}
      <details class="date_range_inline" {% if settings.date_filter == "expanded" %}open{% endif %}>
        <summary class="results-settings date_range_summary">Date range</summary>
      </details>
      <div class="date_range_panel_row">
        <div class="date_range">
          <input class="date-select" type="date" name="after" value="{{ after }}" form="date_range_form">
          <input class="date-select" type="date" name="before" value="{{ before }}" form="date_range_form">
          <button type="submit" class="results-settings" form="date_range_form">Submit</button>
        </div>
      </div>
      {% endif %}
      <button class="results-save" type="submit">Apply settings</button>
    </form>
    <form action="/search" id="date_range_form">
      <input type="hidden" name="q" value="{{ q }}">
      <input type="hidden" name="t" value="{{ type }}">
    </form>
    <p class="fetched fetched_img">{{ lang_data.results.results }} {{ fetched }} {{ lang_data.results.seconds }}</p>
    {% if results %}
    <div class="images images_viewer_hidden">
        <div class="image_view image_hide">
            <div class="image-view-close">
                <button class="btn-nostyle"><div class="material-icons-round icon_visibility clickable image-before">navigate_before</div></button>
                <button class="btn-nostyle"><div class="material-icons-round icon_visibility clickable image-next">navigate_next</div></button>
                <button class="btn-nostyle"><div class="material-icons-round icon_visibility clickable image-close">close</div></button>
            </div>
            <a class="image-viewer-link clickable" href="">
            <div class="view-image">
                <img class="view-image-img" src=""/>
            </div>
            </a>
            <p class="image-alt"></p>
            <p>View source: <a class="image-source" href=""></a></p>
            <p>View image via
                <a class="full-size" href="">source - (full res)</a>
                <a class="proxy-size" href="">proxy - (low res)</a>
            </p>
            <p>Engine: {{ image_engine_display }} (local searxng)</p>
            <hr>
            <p>Full-resolution image size: <span class="full-image-size"></span></p>
        </div>
        {% for result in results %}
        <div class="image" width="{{ result.thumb_height }}">
          <a class="clickable" {% if settings.new_tab == "active" %} target="_blank" {% endif %} href="{{ result.url }}">
              <img 
                class="open-image-viewer"
                src="{{ result.thumb_proxy }}"
                alt="{{ result.title }}"
                data="{{ result.media }}"
              />
              <div class="resolution">{{ result.width }} × {{ result.height }}</div>
              <div class="details">
                <div class="img_title">{{ result.title }}</div>
                <div class="img_source">{{ result.source }}</div>
              </div>
          </a>
        </div>
        {% endfor %}
    </div>
    <div class="prev-next prev-img">
        <form method="{{ settings.method }}">
          <input type="hidden" name="q" value="{{ q }}">
          <input type="hidden" name="t" value="{{ type }}">
          <input type="hidden" name="after" value="{{ after }}">
          <input type="hidden" name="before" value="{{ before }}">
          {% set p = request.args.get('p', 1)|int %}
          {% if p >= 2 %}
              <button name="p" value="{{ p - 1 }}">Previous</button>
          {% endif %}
          <button name="p" value="{{ p + 1 }}">Next</button>
        </form>
    </div>
    {% else %}
        <div class="no-results-found">
            Your search '{{ q }}' came back with no results.<br>
            Try rephrasing your search term and/or recorrect any spelling mistakes.
        </div>
    {% endif %}
{% endblock %}