{% extends 'story/base.html' %}
{% load static %}
{% load i18n %}
{% load comments %}
{% load blog_modules %}
{% load pagination %}
{% block main %}
    <main class="main">
        <!-- Page Title -->
        <div class="page-title">
            <div class="heading">
                <div class="container">
                    <div class="row d-flex justify-content-center text-center">
                        <div class="col-lg-8">
                            <h1 class="heading-title">
                                {% trans "Search Results" %}
                            </h1>
                            <p class="mb-0">
                                {% if search_has_filters %}
                                    {% blocktrans count count=results_count %}We found {{ count }} result for your search.{% plural %}We found {{ count }} results for your search.{% endblocktrans %}
                                    {% if search_title %}“{{ search_title }}”{% elif search_text %}“{{ search_text }}”{% endif %}
                                {% else %}
                                    {% trans "Enter a search query to find articles." %}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <nav class="breadcrumbs">
                <div class="container">
                    <ol>
                        <li>
                            <a href="{% url 'core_manager:home' %}">
                                {% trans "Home" %}
                            </a>
                        </li>
                        <li class="current">
                            {% trans "Search Results" %}
                        </li>
                    </ol>
                </div>
            </nav>
        </div>
        <!-- End Page Title -->
        <!-- Search Results Posts Section -->
        <section class="search-results-posts section" id="search-results-posts">
            <div class="container" data-aos="fade-up" data-aos-delay="100">
                <div class="row gy-4">
                    {% for article in articles %}
                    <div class="col-lg-4">
                        <article>
                            {% if article.img %}
                            <div class="post-img">
                                <a href="{{ article.get_absolute_url }}"><img alt="{{ article.title }}" class="img-fluid" loading="lazy" src="{{ article.img.url }}"/></a>
                            </div>
                            {% endif %}
                            <p class="post-category">
                                <a href="{% url 'blog:category' category_slug=article.category.slug %}">{{ article.category.title }}</a>
                            </p>
                            <h2 class="title"><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></h2>
                            <div class="d-flex align-items-center">
                                {% if article.author.userprofile.avatar %}
                                <img alt="{{ article.author.get_full_name|default:article.author.username }}" class="img-fluid post-author-img flex-shrink-0" loading="lazy" src="{{ article.author.userprofile.avatar.url }}"/>
                                {% endif %}
                                <div class="post-meta">
                                    {% if article.author %}
                                    <p class="post-author">{{ article.author.get_full_name|default:article.author.username }}</p>
                                    {% endif %}
                                    <p class="post-date"><time datetime="{{ article.publish|date:'c' }}">{{ article.publish|date:"M j, Y" }}</time></p>
                                </div>
                            </div>
                        </article>
                    </div>
                    {% empty %}
                    {% if search_has_filters %}
                    <div class="col-12"><p>{% trans "No articles found. Try a different search." %}</p></div>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
        </section>
        <!-- /Search Results Posts Section -->
        {% if is_paginated %}
        <section class="pagination-3 section" id="pagination-3">
            <div class="container">
                <nav class="d-flex justify-content-center" aria-label="{% trans 'Pagination' %}">
                    <ul>
                        {% if page_obj.has_previous %}
                        <li><a href="?{{ search_querystring }}&amp;page={{ page_obj.previous_page_number }}" rel="prev" aria-label="{% trans 'Previous' %}"><i class="bi bi-chevron-left" aria-hidden="true"></i></a></li>
                        {% endif %}
                        {% elided_page_range page_obj as page_numbers %}
                        {% for number in page_numbers %}
                        {% if number == page_obj.paginator.ELLIPSIS %}
                        <li><span aria-disabled="true">{{ number }}</span></li>
                        {% else %}
                        <li><a href="?{{ search_querystring }}&amp;page={{ number }}"{% if number == page_obj.number %} class="active" aria-current="page"{% endif %}>{{ number }}</a></li>
                        {% endif %}
                        {% endfor %}
                        {% if page_obj.has_next %}
                        <li><a href="?{{ search_querystring }}&amp;page={{ page_obj.next_page_number }}" rel="next" aria-label="{% trans 'Next' %}"><i class="bi bi-chevron-right" aria-hidden="true"></i></a></li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </section>
        {% endif %}
    </main>
{% endblock %}