{% extends "base.html" %}

{% comment %}

Search page

{% endcomment %}

{% block title %}
    Search
{% endblock title %}

{% block content %}

    <h1 class="h3 pt-2 mb-3">Search results</h1>

    <div class="row mb-5">
        <div class="col-6">
            <form class="input-group">
                <input id="search"
                       type="text"
                       class="form-control"
                       placeholder="Search the BCA..."
                       aria-label="Search"
                       name="q"
                       value="{{ query.q }}">
                <button class="btn btn-primary" type="submit">
                    <i class="fa fa-magnifying-glass"></i> Search
                </button>
            </form>
        </div>
        <div class="col-auto d-flex align-items-center pb-1">
            <span id="results_count" class="form-text"></span>
        </div>
    </div>

    {% if query %}
        <div class="row">
            <div class="col-3 col-lg-2 small">
                <nav class="nav nav-pills flex-column">
                    <!-- Category selection -->
                    <span class="fw-semibold p-1"><i class="fa fa-layer-group fa-fw"></i> Category</span>

                    <button type="button"
                            class="btn btn-link btn-sm text-start nav-link p-1 {% if not query.category %}active{% endif %}"
                            onclick="updateQuery('category')">
                        Summary
                    </button>
                    <button type="button"
                            class="btn btn-link btn-sm text-start nav-link p-1 {% if query.category == 'datasets' %}active{% endif %}"
                            onclick="updateQuery('category', 'datasets')">
                        Datasets
                    </button>

                    <button type="button"
                            class="btn btn-link btn-sm text-start nav-link p-1 {% if query.category == 'genes' %}active{% endif %}"
                            onclick="updateQuery('category', 'genes')">
                        Genes
                    </button>

                    <!-- Species selection -->
                    <div class="d-flex justify-content-between mt-3 p-1">
                        <span class="fw-semibold">
                            <i class="fa fa-kiwi-bird fa-fw"></i> Species
                        </span>

                        <button type="button"
                                class="btn btn-link btn-sm"
                                onclick="updateQuery('species')">
                            Clear
                        </button>
                    </div>
                    {% include "./components/select/species.html" with redirect="query" placeholder="Search..." species=query.species %}

                    <!-- Results per page -->
                    <span class="fw-semibold mt-3 p-1">
                        <i class="fa fa-grip fa-fw"></i> Results per page
                    </span>

                    {% load string_extras %}
                    {% for limit in "12,24,36,48,60"|split %}
                        <a class="nav-link p-1 {% if query.limit == limit %}active{% elif not query.limit and limit == '12' %}active{% endif %}"
                           href="#"
                           role="button"
                           onclick="event.preventDefault(); updateQuery('limit', {{ limit }})">{{ limit }}</a>
                    {% endfor %}
                </nav>
            </div>
            <div class="col-9 col-lg-10">
                <div class="row row-cols-2 row-cols-sm-3 row-cols-lg-4 row-cols-xl-6 g-4"
                     id="results">
                    <template id="result-template">
                        <div class="col mb-4">
                            <div>
                                <p class="mb-0 fw-semibold small">
                                    <a href="#" class="result-title"></a>
                                </p>
                                <p class="mb-0 small">
                                    <a href="#" class="result-subtitle text-secondary"></a>
                                </p>
                                <p class="mb-0 truncate-3 small result-description"></p>
                                <p class="mb-0 small result-badges"></p>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    {% else %}
        {% include "./components/mockup/search.html" %}
    {% endif %}

    <script type="module">
        {% load static %}
        import {
            initFormHandler,
            loadSearchResults,
            updateQuery
        } from "{% static 'app/dist/search/results_page.js' %}";

        window.updateQuery = updateQuery;

        let species = "{{query.species}}",
            query = "{{query.q|escape}}",
            limit = {{query.limit|default:12}},
            offset = {{query.offset|default:0}},
            category = "{{query.category}}";
        loadSearchResults(species, query, limit, offset, category);
        initFormHandler();
    </script>

{% endblock content %}

{% block pagination %}
    {% if query %}
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </ul>
        </nav>
    {% endif %}
{% endblock pagination %}