{% extends "shell.html" %}

{% block title %}{{ search_query }}{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/themes/default/search.css"/>
<link rel="stylesheet" href="/static/themes/{{theme}}/search.css"/>
{% if search_query == "notnite" %}<link rel="stylesheet" href="/static/creature.css"/>{% endif %}
<script src="/static/js/search.js" defer></script>
{% endblock %}

{% block page %}
<div class="main">
    {% include "ui/userbar.html" %}
    {% if alpha %}<span id="alpha-warning">WARNING! askLyphe is in alpha! user experience is in no way representative of the final product!</span>{% endif %}
    {% include "ui/navbar.html" %}

    <div class="index-bar">
        <a href="{{ websearch_url }}">
            <img id="websearch-img-selected" src="/static/img/websearch_selected.png" alt="search the web"/>
        </a>
        <a href="{{ imagesearch_url }}">
            <img id="imagesearch-img" src="/static/img/imagesearch.png" alt="search for images"/>
        </a>
    </div>

    <div class="pagecontent">
        <div class="pagegradient">
            <div class="response">
                {% match error %}
                {% when Some with (val) %}
                <div class="error">{{ val }}</div>
                {% when None %}
                <div class="results-area" id="results-area">
                    <div class="complications">
                        {% if complications.disabled %}
                        <div class="complications-note">
                            <span>complications disabled for this query</span>
                        </div>
                        {% endif %}
                        {% match complications.unit_converter %}
                        {% when Some with (conversion) %}
                        <div class="unit_converter-complication">
                            <span class="unit_converter-title">lyphe unit converter</span>
                            <span class="unit_converter-result">{{ conversion.value }} {{ conversion.unit_a }} = {{ conversion.equals }} {{ conversion.unit_b }}</span>
                        </div>
                        {% when None %}
                        {% endmatch %}
                        {% match complications.wikipedia %}
                        {% when Some with (wikipedia) %}
                        <div class="wikipedia-complication">
                            <a href="{{ wikipedia.url }}">
                                <div class="wikipedia-header">
                                    <span class="wikipedia-title">{{ wikipedia.title }}</span>
                                    <span class="wikipedia-fromwikipedia">from wikipedia, the free encyclopedia that anyone can edit</span>
                                </div>
                                {% match wikipedia.image %}
                                {% when Some with (image) %}
                                <div class="wikipedia-image">
                                    <img src="{{ image }}" alt="wikipedia thumbnail image for {{ wikipedia.title }}"/>
                                </div>
                                {% when None %}
                                {% endmatch %}
                            </a>
                            <span class="wikipedia-class">{{ wikipedia.description }}</span>
                            <span class="wikipedia-description">{{ wikipedia.extract }}</span>
                        </div>
                        {% when None %}
                        {% endmatch %}
                    </div>
                </div>
                {% endmatch %}
            </div>
        </div>
    </div>

    {% include "ui/footer.html" %}
</div>
{% endblock %}