{% extends "crashstats_base.html" %}
{% block page_title %}{{ signature }} - Signature report - 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 href="{{ static('supersearch/css/search.less') }}" type="text/less" rel="stylesheet">
<link href="{{ static('signature/css/signature_report.less') }}" type="text/less" rel="stylesheet">
    {% endcompress %}
{% endblock %}

{% block content %}
<div id="mainbody">
    <div class="page-heading">
        <h2>Signature report for <em>{{ signature }}</em></h2>
        &nbsp;&nbsp;
        <em>
            <a href="{{ url('crashstats:report_list') }}?signature={{ signature | urlencode }}&amp;{{ report_list_query_string }}">
                See the equivalent Report list page
            </a>
        </em>
    </div>

    <section id="search-form">
        <a href="#" class="toggle-filters show">Show</a>
        <h4>Search filters</h4>

        <form method="get" action="{{ url('signature:signature_report') }}"
            data-fields-url="{{ url('supersearch.search_fields') }}?exclude=signature"
            data-signature="{{ signature }}"
        >
            <button type="submit" id="search-button">Search</button>
            <button class="new-line">new line</button>
            <fieldset id="search-params-fieldset"></fieldset>

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

    <nav id="panels-nav">
        <ul class="tabs">
            <li><a href="#reports" class="reports" data-tab-name="reports">Reports</a></li>
            <li><a href="#aggregations" class="aggregations" data-tab-name="aggregations">Aggregations</a></li>
            <li><a href="#comments" class="comments" data-tab-name="comments">Comments</a></li>
        </ul>
    </nav>

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

        <div class="body">
            <div class="loader"></div>
        </div>
    </section>

    <!-- Reports panel.
        Displays a list of crash reports that have the current signature.
    -->
    <section class="panel" id="reports-panel"
        data-source-url="{{ url('signature:signature_reports') }}"
    >
        <header class="title">
            <h2>Crash Reports</h2>
        </header>

        <div class="body">
            <div class="controls">
                <input type="text" name="_columns_fake" value="{{ columns | join(', ') }}">
                <!-- This second input is required by select2 for sorting. -->
                <input type="hidden" name="_columns" value="{{ columns | join(', ') }}">
                <button type="submit">Update</button>
                <hr>
            </div>

            <div class="content">
                <div class="loader"></div>
            </div>
        </div>
    </section>

    <!-- Aggregations panel.
        Displays tables with aggregations of one or several fields.
    -->
    <section class="panel" id="aggregations-panel"
        data-source-url="{{ url('signature:signature_report') }}aggregation/"
    >
        <header class="title">
            <h2>Aggregations</h2>
        </header>

        <div class="body">
            <div class="controls">
                <span class="loader"></span>
                <select class="fields-list">
                    <option></option>
                    {% for field in fields %}
                    <option value="{{ field.id }}">{{ field.text }}</option>
                    {% endfor %}
                </select>
                <hr>
            </div>

            <div class="status"></div>

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

    <!-- Comments panel.
        Displays a list of user comments from crash reports that have the
        current signature.
    -->
    <section class="panel" id="comments-panel"
        data-source-url="{{ url('signature:signature_comments') }}"
    >
        <header class="title">
            <h2>User Comments</h2>
        </header>

        <div class="body">
            <div class="content">
                <div class="loader"></div>
            </div>
        </div>
    </section>

</div>
{% endblock %}


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

<script>
var BASE_URL = location.protocol + '//' + location.host;
var FIELDS = {{ fields | json_dumps }};
</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('signature/js/signature_report.js') }}"></script>
    {% endcompress %}

{% endblock %}