{% extends "shell.html" %}

{% block title %}Images - {{ search_query }}{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/themes/default/imagesearch.css?git={{ git_commit }}"/>
<link rel="stylesheet" href="/static/themes/{{theme.internal_name()}}/imagesearch.css?git={{ git_commit }}"/>
{% if search_query == "notnite" %}<link rel="stylesheet" href="/static/creature.css?git={{ git_commit }}"/>{% endif %}
{% 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_image.html" %}

    <div class="index-bar">
        <a href="{{ websearch_url }}">
            <img id="websearch-img" src="/static/img/websearch.png?git={{ git_commit }}" alt="search the web"/>
        </a>
        <a href="{{ imagesearch_url }}">
            <img id="imagesearch-img-selected" src="/static/img/imagesearch_selected.png?git={{ git_commit }}" 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 %}
                {% match note %}
                {% when Some with (val) %}
                <div class="note">{{ val }}</div>
                {% when None %}
                {% endmatch %}
                <div class="results-area">
                    <div class="image-result-list">
                        {% for result in search_results %}
                        <div class="image-result">
                            <a href="{{ result.url }}">
                                <img src="{{ result.src }}" alt="image result" onerror="this.parentNode.parentNode.remove();"/>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                    {% if blocked.len() > 0 %}
                    <span class="blocked-header">{{ blocked.len() }} results were pruned from search results for the following reasons:</span>
                    <ol class="blocked-results">
                        {% for (url, reason) in blocked %}
                        <li>"{{ url }}" because "{{ reason }}"</li>
                        {% endfor %}
                    </ol>
                    {% endif %}
                </div>
                {% endmatch %}
            </div>
        </div>
    </div>

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