<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="/dashboard/static/base.css">
  <link rel="import" href="/components/polymer/polymer.html">
  <link rel="import" href="/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">
  <link rel="import" href="/dashboard/static/alerts.html">

  <title>Chrome Performance Alerts</title>
  <script>
    'use strict';
    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>
  <style>
    body {
      align-items: center;
      -webkit-align-items: center;
    }

    .center {
      margin: auto;
      padding: 10px;
    }

    /* The action bar contains the graph button and triage button. */
    #action-bar {
      margin-top: 20px;
      width: 100%;
    }

    /* The content container contains everything below the sheriff select menu. */
    #content {
      display: inline-flex;
      display: -webkit-inline-flex;
      flex-direction: column;
      -webkit-flex-direction: column;
      align-items: flex-start;
      -webkit-align-items: flex-start;
    }

    /* This class indicates a button toggled on (e.g. show improvements). */
    .alert-togglebutton {
      float: right;
      margin-left: 4px;
      margin-right: 4px;
    }

    #auto-triage-log {
      padding: 15px 0 15px 0;
    }

    #message-bar {
      top: 26px;
    }

    #anomaly-table, #stoppage-alert-table {
      width: 100%;
    }
  </style>
</head>
<body>
  {% include 'nav.html' %}
  <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>
        'use strict';
        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 not have_anomalies and not have_stoppage_alerts %}
      <h2 class="center">All alerts triaged!</h2>
      <img class="center" src="http://thecatapi.com/api/images/get?api_key=MjUzMDQ&category=space&size=small">
    {% endif %}
    <quick-log id="auto-triage-log" xsrfToken="{{xsrf_token | safe}}"
               style="width:100%; display:block;"></quick-log>
  </div>
  {% include 'analytics.html' %}
</body>
</html>