{% load search_highlight %}

<h3> Search results for "{{ search_string }}". </h3>
<p>There are <b>{{ num_of_search_results }}</b> pages(s) matching the search query.</p></br>

<div>
    {% for result in search_results %}
    <div>
        <h3> {{ result.title | underline:result.match_data }}</h3>
        <a style="textunder" href="{{ result.url }}"> {{ result.url }} </a>
        <p>{{ result.body | highlight:result.match_data }} </p></br>
    </div>
    {% endfor %}
</div>

<nav aria-label="...">
    <ul class="pager">
        {% if search_results.has_previous %}
            <li class="previous">
                <a href="?q={{ search_string }}&page={{ search_results.previous_page_number }}">
                    <span aria-hidden="true">&larr;</span> Previous
                </a>
            </li>
        {% else %}
            <li class="previous disabled">
                <a><span>&larr;</span> Previous</a>
            </li>
        {% endif %}

        {% if search_results.has_next %}
            <li class="next">
                <a href="?q={{ search_string }}&page={{ search_results.next_page_number }}">
                    Next <span aria-hidden="true">&rarr;</span>
                </a>
            </li>
        {% else %}
            <li class="next disabled">
                <a>Next <span aria-hidden="true">&rarr;</span></a>
            </li>
        {% endif %}
    </ul>
</nav>
