{% extends "base.html" %}

{% block head %}
{{ super() }}
<script>
  var filterMods = {
    '=': "{{ _('Contains') }}",
    '==': "{{ _('Matches Exactly') }}",
    '=~': "{{ _('Matches Regex') }}",
    '=!': "{{ _('Does Not Contain') }}",
    '=!=': "{{ _('Is Not') }}",
    '=!~': "{{ _('Does Not Begin With') }}"
  };
  var noFilter = "{{ _('No Filter') }}";

  // TODO: cleanup
  window.wb_prefix = "{{ wb_prefix }}";
</script>
<script src="{{ static_prefix }}/search.js"></script>
{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <h4 class="display-4">
            {% trans %}Collection {{ coll }} Search Page{% endtrans %}
        </h4>
    </div>
</div>
<div class="container mt-4">
    <form class="needs-validation" id="search-form" novalidate>
        <div class="form-row">
            <div class="col-12">
                <label for="search-url" class="lead" aria-label="{{ _('Search Collection') }}">
                    {% set coll_title = metadata.title if metadata and metadata.title else coll %}
                    {% autoescape false %}
                    {% trans %}Search the {{ coll_title }} collection by url:{% endtrans %}
                    {% endautoescape %}
                </label>
                <a tabindex="0" class="btn btn-sm float-right btn-light" role="button" data-toggle="modal" data-target="#searchInstructions">{{ _('Help') }}</a>
            </div>
        </div>
        <div class="form-row">
            <div class="col-12">
                <input aria-label="{{ _('URL') }}" aria-required="true" class="form-control form-control-lg" id="search-url"
                       name="search" placeholder="{{ _('Enter a URL to search for') }}"
                       title="{{ _('Enter a URL to search for') }}" type="search" required autofocus />
                <div class="invalid-feedback">
                    {% trans %}Please enter a URL{% endtrans %}
                </div>
            </div>
        </div>
        <div class="form-row mt-2">
            <div class="col-5">
                <div class="custom-control custom-checkbox custom-control">
                    <input type="checkbox" class="custom-control-input" id="open-results-new-window">
                    <label class="custom-control-label" for="open-results-new-window">{{ _('Open results in new window') }}</label>
                </div>
            </div>
            <div class="col-7">
                <button type="submit" id="search-button" class="btn btn-primary float-right" role="button" aria-label="{{ _('Search') }}">
                    {% trans %}Search{% endtrans %}
                </button>
                <button class="btn btn-outline-secondary float-right mr-3" type="button" role="button"
                        data-toggle="collapse" data-target="#advancedOptions" id="advanced-options"
                        aria-expanded="false" aria-controls="advancedOptions" aria-label="{{ _('Search Options') }}">
                    {{ _('Search Options') }}
                </button>
                <button id="reset-search-form" class="btn btn-outline-danger float-right mr-3" type="button" role="button" aria-label="{{ _('Reset Options') }}">
                    {{ _('Reset') }}
                </button>
            </div>
        </div>
        <div class="collapse mt-3" id="advancedOptions">
            <div class="form-group form-row">
                <label for="match-type-select" class="col-sm-2 col-form-label" aria-label="{{ _('Match Type') }}">
                    {{ _('Match Type:') }}
                </label>
                <select id="match-type-select" class="form-control form-control col-sm-6">
                    <option value="">{% trans %}Default{% endtrans %}</option>
                    <option value="prefix">{% trans %}Prefix{% endtrans %}</option>
                    <option value="host">{% trans %}Host{% endtrans %}</option>
                    <option value="domain">{% trans %}Domain{% endtrans %}</option>
                </select>
            </div>
            <p style="cursor: help;">
               <span data-toggle="tooltip" data-placement="right"
                     title="{{ _('Restricts the results to the given date/time range (inclusive)') }}">
                   {{ _('Date/Time Range') }}
                </span>
            </p>
            <div class="form-row">
                <div class="col-6">
                    <label class="sr-only" for="dt-from" aria-label="{{ _('Date/Time Range From') }}">{% trans %}From:{% endtrans %}</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">{% trans %}From:{% endtrans %}</div>
                        </div>
                        <input id="dt-from" type="date" placeholder="yyyy-mm-dd" name="date-range-from" class="form-control">
                        <input id="ts-from" type="time" placeholder="hh:mm:ss" name="date-range-from-ts" class="form-control">
                    </div>
                </div>
                <div class="col-6">
                    <label class="sr-only" for="dt-to" aria-label="{{ _('Date/Time Range To') }}">{% trans %}To:{% endtrans %}</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">{% trans %}To:{% endtrans %}</div>
                        </div>
                        <input id="dt-to" type="date" placeholder="yyyy-mm-dd" name="date-range-to" class="form-control">
                        <input id="ts-to" type="time" placeholder="hh:mm:ss" name="date-range-to-ts" class="form-control">
                    </div>
                </div>
            </div>
            <div class="form-group mt-3">
                <div class="form-row">
                    <div class="col-12">
                        <p>{% trans %}Filtering{% endtrans %}</p>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-6">
                        <div class="row pb-1">
                            <label for="filter-by" class="col-form-label col-3">{% trans %}By:{% endtrans %}</label>
                            <select id="filter-by" class="form-control col-7">
                                <option value="mime">{% trans %}Mime Type{% endtrans %}</option>
                                <option value="status">{% trans %}Status{% endtrans %}</option>
                                <option value="url">{% trans %}URL{% endtrans %}</option>
                            </select>
                        </div>
                        <div class="row pb-1">
                            <label for="filter-modifier" class="col-form-label col-3">{% trans %}How:{% endtrans %}</label>
                            <select id="filter-modifier" class="form-control col-7">
                                <option value="=">{% trans %}Contains{% endtrans %}</option>
                                <option value="==">{% trans %}Matches Exactly{% endtrans %}</option>
                                <option value="=~">{% trans %}Matches Regex{% endtrans %}</option>
                                <option value="=!">{% trans %}Does Not Contain{% endtrans %}</option>
                                <option value="=!=">{% trans %}Is Not{% endtrans %}</option>
                                <option value="=!~">{% trans %}Does Not Begin With{% endtrans %}</option>
                            </select>
                        </div>
                        <div class="row pb-1">
                            <label for="filter-expression" class="col-form-label col-3">{% trans %}Expr:{% endtrans %}</label>
                            <input type="text" id="filter-expression" class="form-control col-7"
                                   placeholder="{% trans %}Enter an expression to filter by{% endtrans %}"
                            >
                        </div>
                            <button id="add-filter" class="btn btn-outline-secondary mt-2" type="button">
                                {% trans %}Add Filter{% endtrans %}
                            </button>

                    </div>
                    <div class="col-6">
                        <ul id="filter-list" class="filter-list">
                            <li id="filtering-nothing">{% trans %}No Filter{% endtrans %}</li>
                        </ul>
                        <button id="clear-filters" class="btn btn-outline-danger float-right mr-2" type="button">
                            {% trans %}Clear Filters{% endtrans %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
{% if metadata %}
    <div class="container mt-4 justify-content-center">
        <p class="lead">{{ _('Collection Metadata') }}</p>
        <div class="row">
            <div class="col-4 pr-1">
                <div class="list-group" id="collection-metadata" role="tablist">
                    {% for key in metadata.keys() %}
                        <a class="list-group-item list-group-item-action text-uppercase {% if loop.index0 == 0 %}active{% endif %}"
                           data-toggle="list" href="#collection-metadata-{{ key }}" role="tab">
                            {{ key }}
                        </a>
                    {% endfor %}
                </div>
            </div>
            <div class="col-8 pl-1">
                <div class="tab-content h-100">
                    {% for key, val in metadata.items() %}
                        <div class="tab-pane inherit-height {% if loop.index0 == 0 %}active{% endif %}"
                             id="collection-metadata-{{ key }}" role="tabpanel">
                            <div class="card inherit-height">
                                <div class="card-body">
                                    {{ val | safe }}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% include "instructions.html" %}
{% endblock %}
