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

{% extends "crashstats_base.html" %}
{% block page_title %}{{ signature }} - Signature report - Mozilla Crash Stats{% endblock %}

{% block summary_page_tags %}
  <meta property="og:title" content="Crash Stats signature report: [@{{ signature }}]">
  <meta property="og:url" content="{{ request.build_absolute_uri() }}">
  <meta property="og:description" content="">
{% endblock %}

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

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

{% block content %}
  <div id="mainbody"
       data-urls-summary="{{ url('signature:signature_summary') }}"
       data-urls-aggregations="{{ url('signature:signature_report') }}aggregation/"
       data-urls-reports="{{ url('signature:signature_reports') }}"
       data-urls-graphs="{{ url('signature:signature_report') }}graphs/"
       data-urls-bugzilla="{{ url('signature:signature_bugzilla') }}"
       data-urls-comments="{{ url('signature:signature_comments') }}"
       data-urls-correlations="{{ url('signature:signature_correlations') }}"

       data-channels="{{ channels | to_json }}"
       data-fields="{{ fields | to_json }}"
       data-columns="{{ columns | to_json }}"
       data-sort="{{ sort | join(',') }}"
       data-correlations-products="{{ correlations_products | to_json }}"
  >
    <div class="page-heading">
      <h2>Signature report for <em>{{ signature }}</em></h2>
      <div>
        Showing results from {{ query.start_date | time_tag }} to {{ query.end_date | time_tag }}.
      </div>
      <div>
        <a href="#" class="display-toggle-filters toggle-filters show" data-text-opposite="Hide Filters">Show Filters</a>
      </div>
    </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('signature:signature_report') }}"
            data-fields-url="{{ url('supersearch:search_fields') }}?{{ make_query_string(exclude=['signature', 'date']) }}"
            data-signature="{{ signature }}"
            data-no-csrf
      >
        <div class="form-controls">
          <button class="new-line">New line</button>
          <button type="submit" id="search-button">Search</button>
        </div>

        {{ date_filters(query.start_date, query.end_date) }}

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

        <div class="clear"></div>
      </form>
    </section>

    <nav id="panels-nav">
      <ul class="tabs">
        <li><a href="#summary" class="summary" data-tab-name="summary">Summary</a></li>
        <li><a href="#aggregations" class="aggregations" data-tab-name="aggregations">Aggregations</a></li>
        <li><a href="#reports" class="reports" data-tab-name="reports">Reports</a></li>
        <li><a href="#graphs" class="graphs" data-tab-name="graphs">Graphs</a></li>
        <li><a href="#bugzilla" class="bugzilla" data-tab-name="bugzilla">Bugzilla</a></li>
        <li><a href="#comments" class="comments" data-tab-name="comments">Comments</a></li>
        <li><a href="#correlations" class="correlations" data-tab-name="correlations">Correlations</a></li>
      </ul>
    </nav>

    <!-- Loading panel.
         Shows a loading bar, is displayed by default when the page is
         loading initial data.
    -->
    <section class="panel tab-panel" id="loading-panel">
      <header class="title">
        <h2>Loading&hellip;</h2>
      </header>

      <div class="body">
        <div class="loader"></div>
      </div>
    </section>
  </div>
{% endblock %}