{% extends "crashstats_base.html" %}
{% block page_title %}Search - Mozilla Crash Reports{% endblock %}

{% block site_css %}
    {{ super() }}
    {% compress css %}
<link href="{{ static('crashstats/js/lib/select2/select2.css') }}" type="text/css" rel="stylesheet">
    {% endcompress %}

    {% compress css %}
    <link rel="stylesheet" type="text/css" href="{{ static('crashstats/css/lib/jquery-ui.css') }}" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{ static('crashstats/css/lib/jquery-ui.structure.css') }}" media="screen" />
    <link rel="stylesheet" type="text/css" href="{{ static('crashstats/css/lib/jquery-ui.theme.css') }}" media="screen" />
    {% endcompress %}

    {% compress css %}
<link href="{{ static('supersearch/css/search.less') }}" type="text/less" rel="stylesheet">
    {% endcompress %}
{% endblock %}

{% block content %}
<div id="mainbody">
    <div class="page-heading">
        <h2>Super Search</h2>
        <ul class="options">
            <li><a href="{{ url('supersearch.search') }}" class="selected">Search by fields</a></li>
            {% if waffle.switch('supersearch-custom-query') and request.user.has_perm('crashstats.run_custom_queries') %}
            <li><a href="{{ url('supersearch.search_custom') }}">Custom query</a></li>
            {% endif %}
        </ul>
    </div>

    <section id="search-form">
        <form method="get" action="{{ url('supersearch.search') }}"
            data-fields-url="{{ url('supersearch.search_fields') }}"
            data-results-url="{{ url('supersearch.search_results') }}"
            data-custom-url="{{ url('supersearch.search_custom') }}"
            data-public-api-url="{{ url('api:model_wrapper', 'SuperSearch') }}"
        >
            <button type="submit" id="search-button">Search</button>

            <div id="ui-mode-switch">
                <span>
                    <input type="checkbox">
                    <label data-on="ON" data-off="OFF"></label>
                </span>
                Simple search mode
            </div>

            <!-- Simplified search UI -->
            <div id="simple-search">
                <fieldset>
                    {% for field, field_data, examples in simple_search_data %}
                    <div>
                        <label for="simple-{{ field }}">
                            {{ field | replace('_', ' ') | capitalize }}
                        </label>
                        <select name="{{ field }}" id="simple-{{ field }}"
                            multiple="multiple"
                            placeholder="{{ ', '.join(examples) }}..."
                        >
                            {% for opt in field_data %}
                            <option value="{{ opt[0] }}">{{ opt[1] }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endfor %}
                </fieldset>

                <p><em>
                    Note: the date will be a range between now and a week ago.
                    You can change it by switching the simple search mode off.
                </em></p>
            </div>

            <!-- Advanced search UI -->
            <div id="advanced-search">
                {% if waffle.switch('supersearch-custom-query') and request.user.has_perm('crashstats.run_custom_queries') %}
                <button class="customize">Customize</button>
                {% endif %}
                <button class="new-line">New line</button>

                <fieldset id="search-params-fieldset"></fieldset>

                <p><em>Note: by default, the date will be a range between now and a week ago. You can override the lower bound, the upper bound, or both. </em></p>
            </div>

            <fieldset class="options">
                <h4>More options... <span class="show">click to show</span><span class="hide">click to hide</span></h4>
                <div>
                    Facet on:
                    <input type="text" name="_facets" value="{{ facets | join(', ') }}">
                    Show columns:
                    <input type="text" name="_columns_fake" value="{{ columns | join(', ') }}">
                    <input type="hidden" name="_columns" value="{{ columns | join(', ') }}">
                    <div class="public-api-url">
                        Public API URL:
                        <input type="text" name="_public_api_url">
                    </div>
                </div>
            </fieldset>
        </form>
    </section>

    <div class="panel">
        <div class="title">
            <h2>Search results</h2>
        </div>

        <div class="body" id="search_results">
            <p>Run a search to get some results. </p>
        </div>
    </div>
</div>
{% endblock %}

{% block site_js %}
    {{ super() }}

<script>
var COLUMNS = {{ possible_columns | json_dumps }};
var FACETS = {{ possible_facets | json_dumps }};
var BASE_URL = location.protocol + '//' + location.host;
</script>

{% compress js %}
<script src="{{ static('crashstats/js/jquery/plugins/jquery-ui.js') }}"></script>
<script src="{{ static('crashstats/js/jquery/plugins/jquery.tablesorter.js') }}"></script>
{% endcompress %}

    {% compress js %}
<script src="{{ static('crashstats/js/lib/select2/select2.js') }}"></script>
<script src="{{ static('supersearch/js/lib/dynamic_form.js') }}"></script>
<script src="{{ static('crashstats/js/socorro/utils.js') }}"></script>
    {% endcompress %}

    {% compress js %}
<script src="{{ static('supersearch/js/socorro/search.js') }}"></script>
<script src="{{ static('crashstats/js/socorro/bugzilla.js') }}"></script>
    {% endcompress %}

{% endblock %}