{% extends "base.html" %}

{% block css %}
    <style type="text/css">

        #search-container {
            display: inline-block;
            max-width: 600px;
            width: 100%;
        }

        #logo {
            text-align: center;
            width: calc(100% - 100px);
            margin-bottom: 10px;
        }
        #logo img {
            width: 70px;
        }

        #search-form {
            width: 100%;
        }

        #search-input-wrap {
            float: left;
            max-width: 450px;
            width: 100%;
            font-size: 16px;
            line-height: 25px;
            padding: 5px;
        }

        #search-input {
            width: calc(100% - 15px);
            height: 25px;
        }

        #search-submit-wrap {
            float: left;
            margin-top: 5px;
        }

        @media all and (min-width: 768px) {
            #search-submit-wrap {
                padding-left: 10px;
            }
        }
        @media all and (max-width: 768px) {
            #search-submit-wrap {
                clear: left;
                margin-left: 4px;
            }
        }

        #search-results-wrap {
            width: 100%;
            float: left;
            margin-top: 20px;
        }

        .search-result-list-info {
            margin-top: 10px;
            margin-bottom: 20px;
            color: #938A8F;
        }

        .search-result {
            margin-bottom: 20px;
            width: 100%;
        }
        .search-result em {
            font-weight: bold;
            font-style: normal;
        }
        .search-result-link {
            font-size: 16px;
        }
        .search-result-link a, .search-result-link a:hover, .search-result-link a:active {
            color: #B43137;
        }
        .search-result-link a:visited {
            color: #938A8F;
        }
        .search-result-url {
            font-style: italic;
            margin-top: 3px;
            width: 100%;
            overflow: hidden;
            {#white-space: normal;#}
            {#overflow-wrap: break-word;#}
        }

        .search-to-debug-panel {
            float: left;
            clear: left;
            margin-top: 20px;
            line-height: 28px;
        }
        .search-to-debug-panel input[type=text] {
            font-size: 13px
        }

        .search-snippet {
            width: 100%;
            margin-top: 8px;
            margin-bottom: 5px;
            line-height: 18px;
            overflow: hidden;
            white-space: normal;
            overflow-wrap: break-word;
        }
        .search-snippet a, .search-snippet a:hover, .search-snippet a:active {
            color: #8B5556;
        }
        .search-snippet .info {
            font-style: italic;
        }
        .search-snippet-creation-dt {
            color: #938A8F;
            margin-right: 6px;
        }

        .search-result-pages {
            font-size: 16px;
            margin-top: 10px;
            margin-bottom: 30px;
            float: left;
            width: 100%;
        }
        .search-result-pages a, .search-result-pages a:hover, .search-result-pages a:active {
            color: #B43137;
        }
        .search-result-prev {
            float: left;
            margin-right: 20px;
        }
        .search-result-next {
            float: left;
        }

        textarea {
            font-size: 11px;
        }

    </style>
{% endblock %}

{% block content %}

    <div id=search-container>

        <div id=logo>
            <a href="/">
                <img src="/static/img/kunegu-poster-nopadding.png">
            </a>
        </div>

        <form id=search-form method=get action="{{ url_for('bp_ksr.search') }}">
            {{ preserve_arguments(exclude=['q', 'page_no', 'p'], exclude_with_prefixes=['debug-']) }}

            <div id=search-input-wrap>
                <input autofocus autocomplete=off type=text name=q id=search-input
                   value={{ query_object.user_input | tojson }}>
            </div>

            <div id=search-submit-wrap>
                <input id=search-submit type=submit value="Search">
            </div>

        {% if to_debug %}
            <div class=search-to-debug-panel>
                Planet:
                <select name=p>
                    {% for planet_name in to_debug.all_planet_names %}
                        <option value={{ planet_name | tojson }} {% if planet_name == g.planet.planet_name %} selected {% endif %}>
                            {{ planet_name }}
                        </option>
                    {% endfor %}
                </select>

                Domain:
                <select name=domain>
                    <option>ALL</option>
                    {% for domain in to_debug.domains_of_current_planet %}
                        <option>{{ domain }}</option>
                    {% endfor %}
                </select>

                <br>
                Debug:
                <label>
                    <input type=checkbox name=debug-score {% if to_debug.items.score %}checked{% endif %}>
                    Term scores
                </label>

                <label>
                    <input type=checkbox name=debug-query {% if to_debug.items.query %}checked{% endif %}>
                    Search query
                </label>

                <label>
                    <input type=checkbox name=debug-extraction_result {% if to_debug.items.extraction_result %}checked{% endif %}>
                    Extraction result
                </label>

                <br>
                Show entities:
                <select name=debug-entformat>
                    <option value="">&mdash;</option>
                    <option value=short {% if to_debug.items.entformat == 'short' %} selected{% endif %}>
                        short format
                    </option>

                    <option value=long {% if to_debug.items.entformat == 'long' %}selected{% endif %}>
                        long format
                    </option>
                </select>

                of kinds
                <input type=text name=debug-entkinds value="{{ ' '.join(to_debug.kinds) }}"> (space-separated)


            </div>
        {% endif %}

        </form>


        <div id=search-results-wrap>

        {% if 'query' in to_debug.items %}
            <div class=search-debug>
                <textarea>{{ query_object }}</textarea>
                <textarea>{{ search_results_page }}</textarea>
            </div>
        {% endif %}

        {% if search_results_page is not none %}
            <div class=search-result-list-info>
                {% set range = search_results_page.results_range(page_no, results_per_page) %}
                Results {{ range[0] }}-{{ range[1] }} of about {{ '{:,}'.format(search_results_page.total_results) }} (__kunegu_elapsed seconds)
            </div>

            <div class=search-result-list>
                {% for search_result in search_results_page.search_results
                       if search_result.flat_entity %}
                    <div class=search-result>
                        <div class=search-result-link>
                            <a href="{{ search_result.flat_entity.url }}">
                                {% if 'score' in to_debug.items %}
                                    {{ search_result.get_term_scores() }} &mdash;
                                {% endif %}

                                {{ search_result.flat_entity.title or search_result.flat_entity.url }}
                            </a>
                        </div>
                        <div class=search-result-url>
                            {{ search_result.flat_entity.url }}
                        </div>

                        <div class=search-snippet>
                            {% set creation_dt = search_result.flat_entity.props.get('creation_dt') %}
                            {% if creation_dt is not none %}
                                <span class=search-snippet-creation-dt>
                                    {{ creation_dt | time_diff }}
                                </span>
                            {% endif %}

                            {{ g.planet.snippet_finder.get_html_snippet(g.planet, query_object, search_result.flat_entity) | safe }}
                        </div>

                        {% if to_debug.items %}
                            <div class=search-debug>

                            {% if 'extraction_result' in to_debug.items %}
                                <a href="{{ url_for('bp_ksr.debug_blocks', entity_id_hex=search_result.flat_entity.entity_id.hex, p=g.planet.planet_name) }}">Extraction result</a>
                                <br><br>
                            {%  endif %}

                            {% if 'query' in to_debug.items %}
                                <textarea>{{ search_result.hit }}</textarea>
                            {% endif %}

                            {% for kind in to_debug.kinds %}
                                {% set entity = search_result.fetch_entity_with_kind(kind) %}
                                {% if entity %}
                                    {% set source = 'fetched' %}
                                {% else %}
                                    {% set source = 'created' %}
                                    {% set extracted_entity = search_result.fetch_entity_with_kind('extracted') %}
                                    {% if extracted_entity %}
                                        {% set entity = extracted_entity.create_entity_with_kind(kind) %}
                                    {% else %}
                                        {% set entity = none %}
                                    {% endif %}

                                {% endif %}

                                {% if to_debug.items.entformat == 'short' %}
                                    <textarea>{{ entity or kind }}</textarea>
                                {% endif %}

                                {% if to_debug.items.entformat == 'long' %}
                                    <textarea>{{ source }} {{ entity or kind }} {{ json_dumps_friendly(entity, 2) }}</textarea>
                                {% endif %}

                            {% endfor %}

                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>

            <div class=search-result-pages>
                {% if not search_results_page.has_prev_page(page_no, results_per_page) %}
                {% else %}
                    <div class=search-result-prev>
                        <a href="{{ set_query_param(request.url, 'page_no', page_no-1) }}">
                            &larr; Previous
                        </a>
                    </div>
                {% endif %}

                {% if not search_results_page.has_next_page(page_no, results_per_page) %}
                    <div class=search-result-next>
                        No more results.
                    </div>
                {% else %}
                    <div class=search-result-next>
                        <a href="{{ set_query_param(request.url, 'page_no', page_no + 1) }}">
                            Next &rarr;
                        </a>
                    </div>
                {% endif %}
            </div>
        {% endif %}

        </div>

    </div>

    <script>
        let domainSelect = document.querySelector('select[name="domain"]');
        let searchInput = document.querySelector('#search-input');

        domainSelect.onchange = (event) => {
            let domain = event.target.value;
            let query = searchInput.value;
            query = query.replace(/site:[^ ]*/, '').trim();
            if (query)
                query += ' ';
            query += 'site:' + domain;
            searchInput.value = query;
        };
    </script>


{% endblock %}