{% extends "coder/base.html" %}
{%load static%}
{% load crispy_forms_tags %}
{% block content %}
<div class="col-sm-5">
    <div class="card-deck">
        <form class="form-inline" method="GET" autocomplete="off" action="/">
            <input class="form-control mr-sm-2" type="search" name="q" placeholder="content/keyword"
                aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit"> 🔍</button>
        </form>
    </div>
</div>


<!--Improve Search with Incremental Search (AJAX and JQuery)-->

<br>

<h1>Practice </h1>

<br>

{% for object in question %}
<article class="media content-section shadow">
    <div class="media-body container-fluid">
        {%if object.iscorrect%}
        <h3><a class="article-title" href="{%url 'coder:detail' object.pk%}">{{object.title }}</a>
        <img src="{%static 'coder/check.svg'%}" height="18" width="18"></h3>
        {%else%}
        <h3><a class="article-title" href="{%url 'coder:detail' object.pk%}">{{object.title }}</a></h3>
        {%endif%}
    </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 %}