<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('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>
{% include 'footer.html' %}
<script src="{{ cb_url('autocomplete.js') }}"></script>
<script src="{{ cb_url('utils.js') }}"></script>
<script src="{{ cb_url('keyboard.js') }}"></script>
</html>
