<html>
    <head>
        <link rel="shortcut icon" href="static/img/favicon.ico" type="image/x-icon">
        <link rel="icon" href="static/img/favicon.ico" type="image/x-icon">
        <link rel="search" href="opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="referrer" content="no-referrer">
        <link rel="stylesheet" href="{{ cb_url('input.css') }}">
        <link rel="stylesheet" href="{{ cb_url('search.css') }}">
        <link rel="stylesheet" href="{{ cb_url('variables.css') }}">
        <link rel="stylesheet" href="{{ cb_url('header.css') }}">
        {% if config.theme  %}
            {% if config.theme == 'system' %}
            <style>
                @import "{{ cb_url('light-theme.css') }}" screen;
                @import "{{ cb_url('dark-theme.css') }}" screen and (prefers-color-scheme: dark);
            </style>
            {% else %}
            <link rel="stylesheet" href="{{ cb_url(config.theme + '-theme.css') }}"/>
            {% endif %}
        {% else %}
		<link rel="stylesheet" href="{{ cb_url(('dark' if config.dark else 'light') + '-theme.css') }}"/>
        {% endif %}
        <style>{{ config.style }}</style>
        <title>{{ clean_query(query) }} - Whoogle Search</title>
    </head>
    <body>
    {{ search_header|safe }}
    {% if is_translation %}
    <iframe 
        id="lingva-iframe"
        src="{{ lingva_url }}/auto/{{ translate_to }}/{{ translate_str }}">
    </iframe>
    {% endif %}
    {{ response|safe }}
    </body>
    <footer>
        <p class="footer">
            Whoogle Search v{{ version_number }} ||
            <a id="gh-link" href="https://github.com/benbusby/whoogle-search">{{ translation['github-link'] }}</a>
        </p>
    </footer>
    <script src="{{ cb_url('autocomplete.js') }}"></script>
    <script src="{{ cb_url('utils.js') }}"></script>
    <script src="{{ cb_url('keyboard.js') }}"></script>
</html>
