{% extends "crashstats_base.html" %}
{% block site_css %}
  {{ super() }}
  {% compress css %}
    <link rel="stylesheet" type="text/css" href="{{ static('crashstats/css/jquery-ui-1.10.3/flick/jquery.ui.custom.min.css') }}" media="screen" />
    <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 }} per 1M ADI by Build ID
{% endblock %}

{% block content %}
    <main role="main">
        <header>
            <h2 id="gcc-main-title">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">
                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                <fieldset>
                    <legend class="visually-hidden">Select Report Criteria</legend>

                    {% set date_format = '%Y/%m/%d' %}
                    <div class="field_elem_container">
                        <label for="start_date">From:</label>
                        <input type="date" name="start_date" id="start_date" value="{{ start_date.strftime(date_format) }}" required />
                    </div>

                    <div class="field_elem_container">
                        <label for="end_date">To:</label>
                        <input type="date" name="end_date" id="end_date" value="{{ end_date.strftime(date_format) }}" required />
                    </div>

                    <div class="field_elem_container">
                        <label for="product">Product:</label>
                        <select name="product" id="product">
                            <option value="none">Select A Product</option>
                            {% for product in products %}
                                <option value="{{ product }}"
                                    {% if selected_product == product %}
                                        selected="selected"
                                    {% endif %}>{{ product }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="field_elem_container">
                        <label for="version">Version:</label>
                        <select name="version" id="version">
                            <option value="none">Select A Version</option>
                            {% for version in versions %}
                                <option value="{{ version }}"
                                    {% if selected_version == version %}
                                        selected="selected"
                                    {% endif %}>{{ version }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <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 ADI 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/ui/jquery.ui.core.min.js') }}"></script>
  <script src="{{ static('crashstats/js/jquery/plugins/ui/jquery.ui.datepicker.min.js') }}"></script>
  <script src="{{ static('crashstats/js/socorro/utils.js') }}"></script>
  <script src="{{ static('crashstats/js/socorro/gccrashes.js') }}"></script>
  {% endcompress %}
{% endblock %}