{% extends "layout.html" %}
{% load i18n %}


{% block content %}
    {% block before_results %}
        <div class="container my-5 p-0">
            <section class="search-header-wrapper">
                <div class="search-page-header">
                    <div class="search-page-inner">
                        <div class="search-hero-banner">
                            <h2>{% trans "Search results" %}</h2>
                            <p>{% trans "Below pages were found for your search query." %}</p>
                            <div class="search-form-wrapper w-75 mx-auto">
                                <form action="{% url 'pagesearch' %}">
                                    <input type="text" class="form-control" id="search_input" name="q" placeholder="{% trans "I am looking for.." %}" {% if request.GET.q %}value="{{request.GET.q}}"{% endif %}>
                                    <button type="submit" class="btn"><i class="fa fa-search"></i></button>
                                </form>
                            </div>
                        </div>
                    </div>	
                </div>
            </section>
        </div>
    {% endblock %}

    {% block results %}
        <div class="container mb-5 px-5 px-md-0">
            <div class="row">
                {% if page_obj %}
                    {% for page in page_obj %}
                        <a href="{{page.specific.localized.get_url}}" class="col-12 col-md-8 mx-auto search-result-block shadow">
                            <h4>{{page.specific.title}}</h4>
                            {% if page.specific.meta_description %}
                                <p class='search-result-description'>{{page.specific.meta_description|truncatechars:200}}</p>
                            {% endif %}
                            <label class="ms-auto">{% trans "View this page" %} <i class="fa fa-arrow-right ps-1"></i></label>
                        </a>

                    {% endfor %}
                {% else %}
                    <h2>{% trans "No pages found." %}</h2>
                {% endif %}
            </div>
        </div>
    {% endblock %}
    
        {% block after_results %}
            {% include "oscar/partials/pagination.html" %}
        {% endblock %}
{% endblock %}