{% extends "notes/base.html" %}
{% load crispy_forms_tags %}
{% block content %}

<h2>DomeCode's Forum.</h2>
<small>
    <p><a style="color: rgb(0, 238, 255); font-weight: bold;" href="{%url 'forum:guidelines'%}">Forum
            Guidelines</a></p>
</small>
<div class="col-sm-6">
    <div class="card-deck">
        <form class="form-inline" method="GET" autocomplete="off" action="/forum/">
            <div class="input-group">
                <input class="form-control mr-sm-2" type="search" name="q" class="form-control"
                    placeholder="content/keyword">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="submit">Search</button>
                </span>
            </div>
        </form>
    </div>
</div>
<br>
<small>Use the search option for searching specific keywords, categories that include <a style="color: aqua;">"About
        DomeCode"</a>, <a style="color: aqua;">"General Development"</a>,<a style="color: aqua;"> "Web Development"</a>
    and <a style="color: aqua;">"CS".</a></small>
<br><br>
<small class="text-muted">Your query has returned {{ paginator.count }}
    result{{ paginator.count|pluralize }}.</small><br><br>


<span class="badge badge-dark badge-pill"> <a style="color: aliceblue;" class="nav-item nav-link"
        href="{%url 'forum:query-create' %}">New Query</a></span>

<br>
<br>
<!--Improve Search with Incremental Search (AJAX and JQuery)-->
{% for queries in query %}
<article class="media content-section shadow" style="padding-bottom:15px ; padding-top: 15px;">
    <a href="{%url 'users:profilepage' queries.user.profile.slug%}"><img class="rounded-circle article-img"
            src="{{ queries.user.profile.image.url }}" /></a>
    <div class="media-body container-fluid">
        <div class="article-metadata">
            <small class="text-muted">Last modified on {{ queries.last_modified|date:"F d, Y" }}</small>
            <small class="text-muted">and created on {{ queries.created|date:"F d, Y" }}</small>
        </div>
        <span class="badge badge-light badge-pill">{{queries.category}}</span>
        <h4><a class="article-title" href="{% url 'forum:detail' queries.slug %}">{{ queries.title}}</a></h4>

        <button class="badge badge-info badge-pill">This query has {{queries.likes.count}} likes.
        </button>

    </div>
</article>
{% endfor %}
{% if page_obj.has_previous %}

<a class="page-link badge badge-dark badge-pill"
    href="?{% if query %}q={{query}}&{% endif %}page={{ page_obj.previous_page_number }}">&laquo; Previous</a>

{% endif %}

{% for i in page_obj.paginator.page_range %}
{% if page_obj.number == i %}
<a class="page-link badge badge-dark badge-pill">Page {{ i }}</a>
{% else %}
<a class="page-link badge badge-dark badge-pill" href="?{% if query %}q={{query}}&{% endif %}page={{ i }}">
    {{ i }}</a>

{% endif %}
{% endfor %}

{% if page_obj.has_next %}

<a class="page-link badge badge-dark badge-pill"
    href="?{% if query %}q={{query}}&{% endif %}page={{ page_obj.next_page_number }}">Next</a>


<a class="page-link badge badge-dark badge-pill"
    href="?{% if query %}q={{query}}&{% endif %}page={{ page_obj.paginator.num_pages }}">Last
    &raquo;</a>

{% endif %}

<br>

{% endblock content %}