{% extends "App/base.html" %}
{% load app_filters %}

{% block page_content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <form class="d-flex align-items-center" id="form1" method="post">
            {% csrf_token %}
            {{ form.phrase }}
            <button type="submit" class="btn-default">Search</button>
        </form>
    </div>
</div>



<div class="container results-container mt-5">
    <div class="d-flex mb-3 justify-content-between">
        <p>{{ results|length }} results hvae been found</p>
        <div class="functions-menu">
            <a href=""><i class="fa fa-save"></i></a>
            <a href=""><i class="fa fa-share"></i></a>
            <a href=""><i class="fa fa-print"></i></a>
        </div>
    </div>

    {% for result in results %}
<div class="card" data-bs-toggle="modal" data-bs-target="#staticBackdrop{{result.index}}">
    <div class="card-header card-header-test1 level-text-{{ result.level|make_list|first }}">
        Level {{ result.level|make_list|first }}, Standard {{result.module}}, Page {{result.pageNum}}
    </div>
    <div class="card-body">
        <h5 class="card-title">
            {{result.heading1}}
        </h5>
        <p class="card-text">
            {{result.paragraph | truncatewords:50}}
        </p>
    </div>
</div>
{% endfor %}

{% for result in results %}

<!-- Modal -->
<div class="modal fade" id="staticBackdrop{{result.index}}" data-bs-backdrop="static" data-bs-keyboard="false"
    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div class="" id="staticBackdropLabel{{result.index}}">
                    <p class="modal-level level-text-{{ result.level|make_list|first }}">Level {{result.level}}</p>
                    <p class="modal-module">Standard {{result.module}}</p>
                    <p class="modal-heading">{{result.heading1}}</p>
                    <p class="modal-heading modal-heading-2">{{result.heading2}}</p>
                    <p class="modal-heading modal-heading-3">{{result.heading3}}</p>
                    <p class="modal-heading modal-heading-4">{{result.heading4}}</p>
                </div>
                <button type="button" class="btn-close align-self-start" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div>

            </div>
            <div class="modal-body">
                <p>{{result.paragraph|highlight_search:result.sentence|safe}}</p>
                <p class="text-end">Page: {{result.pageNum}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


{% endfor %}



</div>
{% endblock %}

<div class="container d-flex">
    <div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
            <label class="form-check-label" for="flexCheckDefault">
                Compliance Degree:
            </label>
        </div>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckboxShall" value="shall">
        <label class="form-check-label" for="inlineCheckbox1">Shall</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckboxShould" value="should">
        <label class="form-check-label" for="inlineCheckbox2">Should</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckboxMay" value="may">
        <label class="form-check-label" for="inlineCheckbox1">May</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckboxMust" value="must">
        <label class="form-check-label" for="inlineCheckbox2">Must</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckboxCanCan" value="can">
        <label class="form-check-label" for="inlineCheckbox2">Can</label>
    </div>
</div>

<div class="dropdown mb-3">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="sortByDropMenu" data-bs-toggle="dropdown"
        aria-expanded="false">
        Sort by
    </button>
    <ul class="dropdown-menu" aria-labelledby="sortByDropMenu">
        <li><a class="dropdown-item" href="#">Most Relevance</a></li>
        <li><a class="dropdown-item" href="#">Level Order</a></li>
    </ul>
</div>









{% for result in results %}
{# Each "contact" is a Contact model object. #}
{{result.heading1}}<br>

{% endfor %}

{% if results.has_other_pages %}
<ul class="pagination">
    {% if results.has_previous %}
    <li><a href="?page={{ results.previous_page_number }}">&laquo;</a></li>
    {% else %}
    <li class="disabled"><span>&laquo;</span></li>
    {% endif %}
    {% for i in results.paginator.page_range %}
    {% if results.number == i %}
    <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
    {% else %}
    <li><a form="form1" href="?page={{ i }}">{{ i }}</a></li>
    {% endif %}
    {% endfor %}
    {% if results.has_next %}
    <li><a href="?page={{ results.next_page_number }}">&raquo;</a></li>
    {% else %}
    <li class="disabled"><span>&raquo;</span></li>
    {% endif %}
</ul>
{% endif %}