{% extends 'layout.html' %}
{% load static %}
{% load highlight %}
{% load url_replace %}
{% load humanize %}

{% block head_scripts %}
    <script type="text/javascript" src="{% static 'js/search.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/typeahead.bundle.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/handlebars.min-v4.7.6.js' %}"></script>
{% endblock %}
{% block title %}Search ports |{% endblock %}

{% block content %}
    <div class="row mt-3">
        <div class="col-lg-3 col-md-4 p-1 pt-0">
            <div class="card">
                <div class="card-header p-2">
                    Maintainer:
                </div>
                <div class="card-body p-2">
                    <div class="text-info" id="m-facets"></div>
                    <div class="col-12 p-0 m-0">
                        <input id="maintainer-q" class="typeahead form-control" type="text"
                               placeholder="Choose a maintainer...">
                        <img class="maintainer-autocomplete-spinner" id="maintainer-autocomplete-spinner"
                             src="{% static 'images/tspinner.gif' %}">
                    </div>
                    <label class="mt-2">{{ form.nomaintainer }} No maintainer</label>
                    {% if facets.fields.maintainers %}
                    <div class="filter-by-options">
                        <span><strong>Suggested: </strong></span>
                        <button class="btn btn-link text-info p-0 m-0 btn-sm"
                                onclick="appendMaintainerFilter('');$('#super-submit').click();">Any
                            maintainer
                        </button>
                        {% for maintainer in facets.fields.maintainers|slice:":5" %}
                            <button class="btn btn-link p-0 m-0 btn-sm"
                                    onclick="appendMaintainerFilter('{{ maintainer.0 }}');$('#super-submit').click();">{{ maintainer.0 }}({{ maintainer.1|intcomma }})
                            </button>
                        {% endfor %}
                    </div>
                {% endif %}
                </div>
            </div>
            <div class="card mt-2">
                <div class="card-header p-2">
                    Category:
                </div>
                <div class="card-body p-2">
                    <div class="text-info" id="c-facets"></div>
                    <div class="col-12 p-0 m-0">
                       <input id="category-q" class="typeahead form-control" type="text"
                           placeholder="Choose a category...">
                    <img class="category-autocomplete-spinner" id="category-autocomplete-spinner"
                         src="{% static 'images/tspinner.gif' %}">
                    </div>
                     {% if facets.fields.categories %}
                    <div class="filter-by-options mt-2">
                        <span><strong>Suggested:</strong> </span>
                        <button class="btn btn-link text-info p-0 m-0 btn-sm"
                                onclick="appendCategoryFilter('');$('#super-submit').click();">All
                            categories
                        </button>
                        {% for category in facets.fields.categories|slice:":5" %}
                            <button class="btn btn-link p-0 m-0 btn-sm"
                                    onclick="appendCategoryFilter('{{ category.0 }}');$('#super-submit').click();">{{ category.0 }}({{ category.1|intcomma }})
                            </button>
                        {% endfor %}
                    </div>
                {% endif %}
                </div>
            </div>
            <div class="card mt-2">
                <div class="card-header p-2">
                    Variant:
                </div>
                <div class="card-body p-2">
                    <div class="text-info" id="v-facets"></div>
                    <div class="col-12 p-0 m-0">
                        <input id="variant-q" class="typeahead form-control" type="text"
                               placeholder="Choose a variant...">
                        <img class="variant-autocomplete-spinner" id="variant-autocomplete-spinner"
                             src="{% static 'images/tspinner.gif' %}">
                    </div>
                    {% if facets.fields.variants %}
                    <div class="filter-by-options mt-2">
                        <span><strong>Suggested:</strong> </span>
                        <button class="btn btn-link text-info p-0 m-0 btn-sm"
                                onclick="appendVariantFilter('');$('#super-submit').click();">All
                            variants
                        </button>
                        {% for variant in facets.fields.variants|slice:":5" %}
                            <button class="btn btn-link p-0 m-0 btn-sm"
                                    onclick="appendVariantFilter('{{ variant.0 }}');$('#super-submit').click();">{{ variant.0 }}({{ variant.1|intcomma }})
                            </button>
                        {% endfor %}
                    </div>
                {% endif %}
                </div>
            </div>
            <div class="card mt-2">
                <div class="card-header p-2">
                    File installed:
                </div>
                <div class="card-body p-2" form="super-form">
                    {{ form.installed_file }}
                    <button onclick="applyInstalledFilesFilter();" class="btn btn-primary btn-sm mt-2">Apply
                    </button>
                    <button style="display: none" id="clear-installed-files-filter" onclick="clearInstalledFilesFilter();" class="btn btn-link btn-sm mt-2"><i
                            class="fa fa-window-close"></i> Clear
                    </button>
                    <button data-toggle="modal" data-target="#installed-files-help"
                            class="btn text-secondary btn-link btn-sm mt-2"><i class="fa fa-exclamation-circle"></i>
                    </button>
                </div>
            </div>
            <div class="card mt-2">
                    <div class="card-header p-2">
                        Port version:
                    </div>
                    <div class="card-body p-2" form="super-form">
                        <label>{{ form.livecheck_uptodate }} Up to date</label><br>
                        <label>{{ form.livecheck_outdated }} Outdated</label><br>
                        <label>{{ form.livecheck_broken }} Broken check</label>
                        <button style="display: none" id="clear-livecheck-filters" onclick="clearLivecheck();" class="btn btn-sm btn-link p-0 m-0"><i class="fa fa-window-close"></i> Clear livecheck filters</button>
                    </div>
                </div>
        <div class="card mt-2">
                <div class="card-body p-2">
                       <label>{{ form.show_deleted_ports }} Show deleted ports also</label>
                </div>
            </div>
        </div>
        <div class="col-lg-9 col-md-8">
            <form id="super-form" method="get" action="." class="border rounded-lg p-2">
                <div class="form-row">
                    <div class="col-10">
                        {{ form.q }}
                    </div>
                    <div class="col-2">
                        <button id="super-submit" style="width: 100%" type="submit" class="btn btn-primary"><i
                                class="fa fa-search"></i></button>
                    </div>
                </div>
                <div class="form-group my-0 py-2 rounded-lg search-by-options">
                    <label class="checkbox-inline rounded bg-light py-2 px-1 mb-0">{{ form.name }} Only match by port
                        names</label>
                    <button type="button" class="btn btn-default border-0 p-2" data-toggle="modal"
                            data-target="#search-help"><i class="fa fa-question-circle"></i></button>
                    <a href="." class="btn btn-link border-0 p-2 float-right">Reset all filters <i
                            class="fa fa-window-close"></i></a>
                </div>

            </form>
            <div id="search-results" class="mt-3">
                {% if query %}
                    <h5>Results for "{{ query }}"</h5>
                {% else %}
                    <!-- Figuring out a nice descriptive message to put here for an empty query -->
                {% endif %}
                    {% include 'includes/basic_pagination.html' with items=page contents="port(s)" %}
                <hr>
                {% for result in page.object_list %}
                    <div>
                        <a class="btn btn-link text-primary p-0" href="{{ result.object.get_absolute_url }}">
                            <h4>{{ result.name }}</h4></a>
                        <span class="float-right" {% if user.is_authenticated %}id="follow_port_{{ forloop.counter }}" data-name="{{ result.name }}"{% endif %}>
                            {% if not user.is_authenticated %}<a href="{% url 'account_login' %}"><i class="fa fa-plus-circle"></i></a>{% endif %}
                        </span>
                        <p class="mb-0 text-secondary" style="font-size: 18px">{{ result.description }}</p>
                        <span class="text-secondary" style="font-size: 13px">
                            <strong>Version:</strong>
                            {{ result.version }}
                            |
                            <strong>Maintained by:</strong>
                            {% for m in result.maintainers %}
                                <a href="{% url 'maintainer' m %}">{{ m }}</a>{% if not forloop.last %}, {% endif %}
                            {% endfor %}
                            |
                            <strong>Categories:</strong>
                            {% for c in result.categories %}
                                <a href="{% url 'category' c %}">{{ c }}</a>
                            {% endfor %}
                            |
                            <strong>Variants:</strong>
                            {% for v in result.variants %}
                                <a href="{% url 'variant' v %}">{{ v }}</a>{% if not forloop.last %}, {% endif %}
                            {% endfor %}

                </span>
                    </div>
                    <hr>
                    {% empty %}
                    <p>No results found.</p>
                {% endfor %}

                {% include 'includes/basic_pagination.html' with items=page contents="port(s)" %}
            </div>
            <div id="search-help" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Only search by port names</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            If this is selected, then results are displayed by matching the query with only the port
                            names. Otherwise, "description" is also used to find results.<br>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="installed-files-help" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Important information regarding this filter</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            The application fetches data for installed files from the buildbot every time a port is
                            built. The application does not have information about the ports which have never been built since its inception.

                            <br><br>
                            This filter searches for the files in the most recent successful build of a port, if available
                            in application database.
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}