{% from "supersearch/macros/date_filters.html" import date_filters %}

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

{% block site_css %}
  {{ super() }}
  <link rel="stylesheet" href="/static/supersearch/css/search.min.css" />
{% endblock %}

{% block site_js %}
  {{ super() }}
  <script src="/static/supersearch/js/search.min.js" type="module"></script>
{% endblock %}

{% block content %}
  <div id="mainbody"
       data-columns="{{ possible_columns | to_json }}"
       data-facets="{{ possible_facets | to_json }}"
  >
    <div class="page-heading">
      <h2>Super Search</h2>
      <nav>
        {% if request.user.has_perm('crashstats.run_custom_queries') %}
          <ul class="options">
            <li><a href="{{ url('supersearch:search') }}" class="selected">Search by fields</a></li>
            <li><a href="{{ url('supersearch:search_custom') }}">Custom query</a></li>
          </ul>
        {% endif %}
        <div id="sumo-link">
          <a href="https://firefox-source-docs.mozilla.org/crash-reporting/searching_crash_reports.html"
             title="Firefox Source Docs on searching crash reports"
             rel="noopener"
          >A guide to searching crash reports</a>
        </div>
      </nav>
    </div>

    <div class="protected-info">
      {% if request.user.has_perm('crashstats.view_pii') %}
        <img src="/static/img/3rdparty/silk/exclamation.png" alt="protected" title="Protected Data" />
        You are seeing public and protected data.
      {% else %}
        You are seeing public data only.
        See <a href="{{ url('documentation:protected_data_access') }}">protected data access documentation</a> for more
        information.
      {% endif %}
    </div>

    <section id="search-form">
      <div class="loader"></div>

      <form method="get" action="{{ url('supersearch:search') }}"
            data-fields-url="{{ url('supersearch:search_fields') }}?{{ make_query_string(exclude='date') }}"
            data-results-url="{{ url('supersearch:search_results') }}"
            data-custom-url="{{ url('supersearch:search_custom') }}"
            data-public-api-url="{{ url('api:model_wrapper', 'SuperSearch') }}"
            data-no-csrf
      >
        <div class="form-controls">
          {% if request.user.has_perm('crashstats.run_custom_queries') %}
            <button class="customize">Customize</button>
          {% endif %}
          <button class="new-line">New line</button>
          <button type="submit" id="search-button">Search</button>
        </div>

        {{ date_filters(dates.from, dates.to) }}

        <!-- Simplified search UI -->
        <fieldset id="simple-search">
          {% for field, field_data, examples in simple_search_data %}
            <div>
              <label for="simple-{{ field }}">{{ field | replace('_', ' ') | capitalize }}</label>
              <input name="{{ field }}" id="simple-{{ field }}"
                     class="simple-search-input"
                     type="text"
                     placeholder="{{ ', '.join(examples) }}..."
                     data-choices="{{ field_data | to_json }}"
              />
            </div>
          {% endfor %}
        </fieldset>

        <!-- Advanced search UI -->
        <div id="advanced-search">
          <fieldset id="search-params-fieldset"></fieldset>
        </div>

        <fieldset class="options">
          <h4>More options... <span class="show">click to show</span><span class="hide">click to hide</span></h4>
          <div>
            <p>
              <label for="_facets">Facet on:</label>
              <input type="text" name="_facets" id="_facets" value="{{ facets | join(', ') }}">
            </p>
            <p>
              <label for="_columns_fake">Show columns:</label>
              <input type="text" name="_columns_fake" id="_columns_fake" value="{{ columns | join(', ') }}">
              <input type="hidden" name="_columns" value="{{ columns | join(', ') }}">
            </p>
            <p>
              <label for="_sort">Sort by:</label>
              <input type="text" name="_sort" id="_sort" value="{{ sort | join(', ') }}">
            </p>

            <div class="public-api-url">
              Public API URL: (<a href="{{ url('documentation:supersearch_home') }}">Super Search API Documentation</a>)
              <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 %}