{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% block meta %}
    <meta name="description" content="Search page">
    <meta name="keywords" content="Search, Page, Search Page, Generic Search">
    {% endblock meta %}

    <!-- Page Title -->
    <title>
       {% block title %}Search{% endblock %}
    </title>

    <!-- Page Styles -->
    {% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-5.1.3/css/bootstrap.min.css' %}">
    {% endblock %}

</head>

<body class="bg-light">
  {% block body %}
    <div class="container py-5">
      <div class="row">
        <div class="col-md-8 {% if not object_list %}position-absolute top-50 start-50 translate-middle{% endif %}">
          {% block search_results_title %}
            {% if object_list %}
              <h4>{{results_count}} results for <span class="fst-italic">{{query}}</span></h4>
            {% endif %}
          {% endblock %}

          {% block search_form %}
            <form class="{% if not object_list %}col-md-5 mx-auto {% endif %} mb-2" method="GET" action="{% url 'generic_search' %}">
              <div class="row">
                <div class="col-9">
                  <div class="input-group">
                    <input type="text" class="form-control bd-radius-none" name="q" placeholder="Search...">
                  </div>
                </div>
                <div class="col-3">
                  <button type="submit" class="btn btn-outline-secondary w-100">Submit</button>
                </div>
              </div>
            </form>
          {% endblock %}

          {% block search_results %}
          <div>

            {% block pagination_page %}
              {% for object in page_obj %}
                <div class="card mb-2 shadow-sm">
                  <div class="card-body">
                    <a href="{{object.url}}" class="card-title d-block text-decoration-none">{% if object.title %}{{object.title|title|truncatewords:15}} {% else %}{{object.url|truncatechars:100}}{% endif %}</a>
                    <a href="{{object.url}}" class="card-subtitle mb-2 text-muted d-block fs-6">{{object.url|truncatechars:150}}</a>
                    {% if object.description %}<p class="card-text">{{object.description|truncatewords:30}}</p>{% endif %}
                    <p class="card-text">{{object.rank}}</p>
                    <p class="card-text">{{object.tfidf}}</p>
                  </div>
                </div>
              {% endfor %}
            {% endblock %}
            {% if is_paginated %}
            {% block pagination %}
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                {% if page_obj.has_previous %}
                  <li class="page-item"><a class="page-link" href="?q={{query}}&page=1">&laquo; first</a></li>
                  <li class="page-item"><a class="page-link" href="?q={{query}}&page={{ page_obj.previous_page_number }}">previous</a></li>
                {% endif %}
                <li class="page-item"><span class="page-link text-muted" >
                  Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                </span>
                </li>
                {% if page_obj.has_next %}
                  <li class="page-item"><a class="page-link" href="?q={{query}}&page={{ page_obj.next_page_number }}">next</a></li>
                  <li class="page-item"><a class="page-link" href="?q={{query}}&page={{ page_obj.paginator.num_pages }}">last &raquo;</a></li>
                {% endif %}
              </ul>
            </nav>
            {% endblock %}
            {% endif %}
          </div>
          {% endblock %}
        </div>
      </div>
    </div>
  {% endblock %}
</body>
<!-- All JavaScript files -->
{% block scripts %}
  <script type="text/javascript" src="{% static 'js/jquery/3.6.0/jquery.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/popper-2.11.2/popper.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'bootstrap-5.1.3/js/bootstrap.min.js' %}" ></script>
{% endblock %}
</html>