{% extends "web/base.html" %}
{% load static wagtailcore_tags wagtailimages_tags %}

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

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

{% block content %}
<div class="flex w-full justify-center py-2">
    <form action="/search/" method="get" class="flex w-full items-center justify-center">

        <input type="text" name="q" id="" class="rounded w-[60%]">
        <button type="submit" aria-label="search-blog" class="text-2xl bg-gray-200 h-full px-4 rounded">
            <i class="fa fa-search" aria-hidden="true"></i>

        </button>
    </form>
</div>

{% if search_results %}
<div class="container mx-auto py-4">
    {% for result in search_results %}
    <h2 class="p-4 border border-b">
        <a href="{{result.url}}" class="flex w-full justify-between">
            <span>


                {{ result.title|truncatewords:20 }}

            </span>
            <span class="text-sm">

                {{ result.first_published_at|date:"d M Y" }}
            </span>

        </a>
    </h2>
    {% endfor %}
</div>

{% 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 %}