<!-- search_results.html -->
{% extends 'base.html' %}

{% block title %}Submission Search Results{% endblock %}

{% load custom_filters %}

{% load static %}

{% block content %}
<div class="row justify-content-center">
    <h1> Search Results</h1>
    <ul>
        {% for submission in search_results %}
            <li>
                <a class="row" href="{% url 'fa:submission_detail' submission_id=submission.submission_id %}">
                    <div class="col-auto img-holder-small">
                        {% if submission.file %}
                            {% if submission.file.file.url|is_image %}
                                {% if submission.mature_rating.mature == "Adult" or submission.mature_rating.mature == "Mature" %}
                                    <img class="blur" src="{{ submission.file.file.url }}" alt="{{ submission.title }}">
                                {% else %}
                                    <img src="{{ submission.file.file.url }}" alt="{{ submission.title }}">
                                {% endif %}
                            {% else %}
                                <img src="{% static 'img/no-image-dark.webp' %}" alt="No image">    
                            {% endif %}
                        {% else %}
                            <img src="{% static 'img/no-image-dark.webp' %}" alt="No image">
                        {% endif %}
                    </div>
                    <div class="col">
                        <h3>{{ submission.title }}</h3>
                        <strong>By Artist: {{ submission.artist.artist }}</strong>
                        <p>{{ submission.description|descriptionHtml2Text|truncatechars:200 }}</p>
                    </div>
                </a>
            </li>
        {% empty %}
            <li>No submissions found.</li>
        {% endfor %}
    </ul>
</div>
<div class="row justify-content-center border border-2">

    <!-- Display Bootstrap pagination -->
    <div class="col-6">
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if search_results.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?search_query={{ request.GET.search_query }}&page=1" aria-label="First">
                            &laquo;
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?search_query={{ request.GET.search_query }}&page={{ search_results.previous_page_number }}" aria-label="Previous">
                            <span aria-hidden="true">&lsaquo;</span>
                        </a>
                    </li>
                {% endif %}

                <li class="page-item disabled">
                    <span class="page-link">
                        Page {{ search_results.number }} of {{ search_results.paginator.num_pages }}.
                    </span>
                </li>

                {% if search_results.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?search_query={{ request.GET.search_query }}&page={{ search_results.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">&rsaquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?search_query={{ request.GET.search_query }}&page={{ search_results.paginator.num_pages }}" aria-label="Last">
                            &raquo;
                        </a>
                    </li>
                {% endif %}
                
            </ul>
        </nav>
    </div>

    <!-- Jump-to field -->
    <div class="col-3">
        <form method="GET" class="row g-3">
            <input type="hidden" name="search_query" class="form-control" value="{{ request.GET.search_query }}">
            <label for="jumpToPage" class="col-auto col-form-label">Jump to:</label>
            <div class="col-3">
              <input type="number" name="page" id="jumpToPage" class="form-control" min="1" max="{{ search_results.paginator.num_pages }}" value="{{ search_results.number }}" >
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">Go</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}