{% extends "base.html" %}
{% block head %}
  <title>Chrome Performance Alerts</title>
  <link type="text/css" rel="stylesheet" href="{{static_dir}}/alerts_style.css">
  <script>
    var ANOMALY_LIST = {{anomaly_list|safe}};
    var STOPPAGE_ALERT_LIST = {{stoppage_alert_list|safe}};
    var SHERIFF_LIST = {{sheriff_list|safe}};
    var XSRF_TOKEN = '{{xsrf_token}}';
    var NUM_ANOMALIES = {{num_anomalies|safe}};
  </script>
  {# Following line needed to avoid a spurious 404 for deps.js due to the use
     --streamed_compiled_js flag used in app.sh in development environment. #}
  <script type="text/javascript">CLOSURE_NO_DEPS = true;</script>
  <script src="{{static_dir}}/alerts_bin.js"></script>

  <link rel="import" href="/third_party/polymer/components/polymer/polymer.html">
  <link rel="import" href="/third_party/polymer/components/paper-button/paper-button.html">
  <link rel="import" href="/dashboard/elements/select-menu.html">
  <link rel="import" href="/dashboard/elements/alerts-table.html">
  <link rel="import" href="/dashboard/elements/overlay-message.html">
  <link rel="import" href="/dashboard/elements/quick-log.html">

{% endblock %}
{% block content %}
  <h1>Chrome Performance Alerts</h1>
  <overlay-message id="message-bar"></overlay-message>
  <div id="content">
    <div id="action-bar">
      <select-menu id="sheriff-select"></select-menu>
      <paper-button raised noink id="improvements-toggle" class="alert-togglebutton">Show improvements</paper-button>
      <paper-button raised noink id="triaged-toggle" class="alert-togglebutton">Show triaged</paper-button>
    </div>
    {% if have_anomalies %}
      <h2>Performance alerts</h2>
      <p id='num-alerts'></p>
      <script>
        var numAlertsElement = document.getElementById('num-alerts');
        var numAlerts = NUM_ANOMALIES;
        numAlertsElement.innerText = numAlerts + (numAlerts == 1 ? ' alert.' : ' alerts.');
        document.title += ' (' + numAlerts + ')';
      </script>
      <alerts-table id="anomaly-table" xsrfToken="{{xsrf_token|safe}}"></alerts-table>
    {% endif %}
    {% if have_stoppage_alerts %}
      <h2>Data stoppage alerts</h2>
      <alerts-table id="stoppage-alert-table" xsrfToken="{{xsrf_token|safe}}"></alerts-table>
    {% endif %}
    {% if all_triaged_image %}
      <img src="/memes/{{all_triaged_image}}">
    {% endif %}
    <quick-log id="auto-triage-log" xsrfToken="{{xsrf_token|safe}}" style="width:100%; display:block;"></quick-log>
  </div>
{% endblock %}
{% include 'analytics.html' %}