{% extends "pathed_content.html" %}

{% block second_title %}
<h2> Dergen Search </h2>
{% endblock %}

{%block content_article %}
    <form class="dergen_search_form" method="get" enctype="multipart/form-data" action="/search">
        <h1>
            Dergle
        </h1>

        <input type="text" id="query" autocomplete="on" name="query" placeholder="Search for..."
        {% if search_query.user_type %}
            value="{{search_query.user_input}}"
        {% endif %}
        /> <br>

        <button type="submit">Search!</button>
        <button>I'm feeling cuddly</button>

        <div class="_search_type">
            {% for type in search_query.types %}
                <input type="radio" name="search_type"
                    id="type_{{type[1]}}" value="{{type[1]}}"
                    onchange="this.form.submit();"
                {% if type[1] == search_query.user_type %}
                    checked
                {% endif %}
                >
                <label for="type_{{type[1]}}">
                    {{type[0]}}
            </label>
            {% endfor %}
        </div>
    </form>

    {% if display_type == 'no_search' %}
        <h3>Search for something :D</h3>
        <ul>
            <li>Type normal words to search for post title, brief descriptions and main content</li>
            <li>Use the syntax <code>tags:tag_a,tag_b,...</code> to search for specific tags</li>
            <li>Use <code>path:/some/example/path</code> to limit search to a specific path </li>
            <li>Use the type selector to more precisely look for images, blogs, etc.</li>
            <li>Annoy the dragons to implement more metadata search tags</li>
        </ul>

    {% elseif display_type == 'image' %}		
        <ul class="gallery">
            {% for post in search_results %}
                <li class="entry">
                    <a href={{post.path}}>
                        <figure>
                            <img src="{{post.media_preview_url}}">
                            <figcaption>
                                {{ post.title }} ({{ post.search_score }})
                            </figcaption>
                        </figure>
                    </a>
                </li>
            {% endfor %}
        </ul>
    {%elseif display_type == 'no results' %}
        <h4>How sad. There are no search results here... :c </h4>
    {%else%}
        <ul class="dergen_search_result_listing">
            {% for post in search_results %}
                <li>
                    <ul class="_details">
                        <li class="_path_details"> <span>Score: {{post.search_score|round(2)}}</span> <span>Path: {{post.path}}</span> </li>
                        <li class="_title"> 
                            <a  href="{{post.url}}#:~:text={{ search_query.user_input|url_encode }}"
                                target="_blank"
                                rel="noopener">
                            {{post.title}} </a>
                        </li>
                        <li class="_brief"> {{post.brief}} </li>
                    </ul>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{%endblock%}