{% extends "base.html" %}
{% load app_filters %}
{% load static %}

{% block page_content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <form class="d-flex align-items-center" id="searchForm" method="get">
            <input type="text" class="form-control" name="phrase" placeholder="Seach IDDRS ..."
                aria-label="Seach IDDRS ..." aria-describedby="basic-addon1">
            <button id="submitSearch" type="submit" class="btn-default">Search</button>
        </form>
    </div>
</div>

{% if results %}
<form id="fiterForm" method="get">
    <div class="d-flex justify-content-evenly mt-3">
        {% for level in levels %}
        <div class="btn-group ">
            <button class="level-{{ level.levelNumber }} btn btn-sm dropdown-toggle " type="button"
                data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                {{ level.levelName }}
            </button>
            <div class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
                {% for standard in standards %}
                {% if standard.standardLevel == level.levelNumber %}
                <div class="form-check">
                    <input class="form-check-input" name="title" type="checkbox" value="{{ standard.standardTitle }}" 
                    {% if standard.standardTitle in selectedChoices %} checked {% endif %}
                        id="checkbox{{ standard.id }}">
                    <label class="form-check-label" for="checkbox{{ standard.id }}">
                        {{ standard.stamdardNumber }} {{ standard.standardTitle }}
                    </label>
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    <input type="text" class="form-control" name="searchedPhrase" value="{{phrase}}" hidden>
</form>
{% endif %}



<div class="mt-5">

    {% if results %}
    <h4>Results for: {{ phrase }}</h4>
    {% endif %}

    {% if selectedChoices %}
    <h5>Based on the following filter/s: <a class="text-dark" id="filterBtn" href="#filterCollapse"
            data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="filterCollapse"><i
                class="fa fa-arrow-down" aria-hidden="true"></i></a></h5>

    <div class="ps-5 collapse" id="filterCollapse">
        {% for choice in selectedChoices %}
        <h6 class="text-secondary">{{choice}}</h6>
        {% endfor %}
        

    </div>
    {% endif %}
    {% 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 }}, IDDRS {{result.module}}, <span class="float-end"> Page
                {{result.pageNumber}} </span>
        </div>
        <div class="card-body">
            <h5 class="card-title">
                {{result.heading1}}
            </h5>
            <p class="card-text">
                {{result.paragraph | truncatewords:50}}
            </p>
        </div>
    </div>
    {% endfor %}
</div>



{% if results %}
<nav aria-label="Page navigation example">
    <ul class="pagination">
        {% for i in pages.page_range %}
        {% if 'title' in request.get_full_path or 'phrase' in request.get_full_path or 'searchedPhrase' in request.get_full_path %}
        <li class="page-item {% if i == pNumber %} active {% endif %}"><a class="page-link"
                href="{{ request.get_full_path }}&page={{ i }}">{{ i }}</a></li>
        {% else %}
        <li class="page-item {% if i == pNumber %} active {% endif %}"><a class="page-link" href="?page={{ i }}">{{ i
                }}</a></li>
        {% endif %}

        {% endfor %}
    </ul>
</nav>
{% endif %}



<div class="d-flex justify-content-between mt-5">
    <div class="border p-2 fq" >
        <h4 class="text-decoration-underline">Featured Questions About IDDRS Framework</h4>
        <ul>
            <li class="mb-3">
                <div class="fw-bold">Featured Questions About IDDRS Framework</div>
            </li>
            <li class="mb-3">
                <div class="fw-bold">Featured Questions About IDDRS Framework</div>
            </li>
            <li class="mb-3">
                <div class="fw-bold">Featured Questions About IDDRS Framework</div>
            </li>
            <li class="mb-3">
                <div class="fw-bold">Featured Questions About IDDRS Framework</div>
            </li>
            <li class="mb-3">
                <div class="fw-bold">Featured Questions About IDDRS Framework</div>
            </li>
            
        </ul>
    </div>
    <div class="border" style="width: 50%;">
        <div id="wordCloud">
        </div>
    </div>
</div>


{% 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}} {{
                        result.levelName }}</p>
                    <p class="modal-module">IDDRS {{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|linebreaks }}</p>
                <p class="text-end">Page: {{result.pageNumber}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% endfor %}

{% endblock %}