{% extends "crashstats_base.html" %}
{% block site_css %}
  {{ super() }}

  {% 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 rel="stylesheet" type="text/less" href="{{ static('crashstats/css/gccrashes.less') }}" media="screen" />
  {% endcompress %}
    <link rel="stylesheet" type="text/css" href="{{ static('crashstats/css/lib/nv.d3.min.css') }}" media="screen" />
{% endblock %}

{% block page_title %}
Total Volume of GC Crashes for {{ product }} {{ selected_version }}
{% endblock %}

{% block content %}
    <main role="main">
        <header>
            <h2 id="gcc-main-title" data-template="Total Volume of GC Crashes for $PRODUCT $VERSION">Total Volume of GC Crashes for {{ product }} {{ selected_version }}</h2>
        </header>

        <section class="panel report-criteria">
            <h3 class="title">Select Report Criteria</h3>
            <form id="gccrashes" name="gccrashes" method="post" class="body" data-versions-url="{{ url('crashstats:get_nightlies_for_product_json') }}" data-base-url="{{ url('crashstats:gccrashes_json') }}" data-report="{{ report }}">
                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                {% if form.errors %}
                    <ul class="user-msg error django-form-error">
                    {% for field in form %}
                        {% for error in field.errors %}
                            <li>
                              {% if field != '__all__' %}
                                <b>{{ field.label }}:</b>
                              {% endif %}
                              {{ error }}
                            <li>
                        {% endfor %}
                    {% endfor %}
                    </ul>
                {% endif %}
                <fieldset>
                    <legend class="visually-hidden">Select Report Criteria</legend>

                    {% for field in form %}
                    <div class="field_elem_container">
                        {{ field.label_tag() }} {{ field }}
                    </div>
                    {% endfor %}

                    <input type="submit" value="Generate Graph" />
                </fieldset>
            </form>
        </section>

        <section class="panel report-graph">
            <figure id="graph-figure">
                <figcaption class="title">Total Volume of GC Crashes by 1M <abbr title="Active Daily Installs">ADI</abbr> by Build ID</figcaption>
                <section class="body">
                    <div id="gccrashes_graph">
                        <svg class="graph"></svg>
                    </div>
                </section>
            </figure>
        </section>
    </main>
{% endblock %}

{% block site_js %}
  {{ super() }}
  <script src="{{ static('crashstats/js/lib/d3.min.js') }}"></script>
  <script src="{{ static('crashstats/js/lib/nv.d3.min.js') }}"></script>

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

  {% compress js %}
  <script src="{{ static('crashstats/js/socorro/utils.js') }}"></script>
  <script src="{{ static('crashstats/js/socorro/gccrashes.js') }}"></script>
  {% endcompress %}
{% endblock %}