{% extends "base.html" %}
{% load static wagtailcore_tags %}

{% block body_class %}template-searchresults{% endblock %}

{% block title %}Search{% endblock %}

{% block content %}
    <h1>Search</h1>

    <form action="{% url 'search' %}" method="get" class="container mx-auto sm:px-6 lg:px-8">
        <div class="flex flex-col space-y-4">
            <label for="query" class="sr-only block text-sm font-medium leading-6 text-gray-900">Search</label>
            <div class="mt-2">
                <input type="text" placeholder="Type search keywords..."
                       class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                       id="query" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}>
            </div>

            <div>
                <input type="submit" class="primary-button" value="Search">
            </div>
        </div>


    </form>

    {% if search_results %}

        {# Add this paragraph to display the details of results found: #}
        <p>You searched{% if search_query %} for “{{ search_query }}”{% endif %}, {{ search_results.paginator.count }}
            result{{ search_results.paginator.count|pluralize }} found.</p>

        {# Replace the <ul> HTML element with the <ol> html element: #}
        <ol>
            {% for result in search_results %}
                <li>
                    <h4><a href="{% pageurl result %}">{{ result }}</a></h4>
                    {% if result.search_description %}
                        {{ result.search_description }}
                    {% endif %}
                </li>
            {% endfor %}
        </ol>

        {# Improve pagination by adding: #}
        {% if search_results.paginator.num_pages > 1 %}
            <p>Page {{ search_results.number }} of {{ search_results.paginator.num_pages }},
                showing {{ search_results|length }} result{{ search_results|pluralize }} out
                of {{ search_results.paginator.count }}</p>
        {% endif %}

        {% if search_results.has_previous %}
            <a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.previous_page_number }}">Previous</a>
        {% endif %}

        {% if search_results.has_next %}
            <a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.next_page_number }}">Next</a>
        {% endif %}

    {% elif search_query %}
        No results found
    {% endif %}
{% endblock %}