<!doctype html>
<html>
  <head>
    <title>Notifications for Skia Developers</title>
  </head>

  <style>
    body {
      font-family: sans-serif;
      font-size: 0.8em;
      width: 700px;
    }

    #alerts-link {
      text-align: center;
    }

    a {
      text-decoration: underline;
      color: #444;
    }

    a:hover {
      color: black;
      cursor: pointer;
    }

    table {
      margin-left: auto;
      margin-right: auto;
      border: 1px solid black;
      border-collapse: collapse;
    }
    table td {
      padding: 7px 10px;
      text-align: center;
      border: 1px solid black;
    }
    #info-table td {
      width: 25%;
    }

    .red {
      background-color: #ef9b9b;
    }

    .green {
      background-color: #c2fcc2;
    }

    .yellow {
      background-color: #ffe4af;
    }

    .trunk-status-cell {
      padding: 0px;
    }

    .trunk-status-cell > iframe {
      height: 10px;
      width: 550px;
      border: none;
    }

    [data-issue] + .trunk-status-row > td,
    .closer-status-row + .other-status-row > td {
      padding-top: 5px;
    }

    #errors {
      color: red;
    }
  </style>

  <body>
    <div id="alerts-link">
      <a href="https://status.skia.org" target="_blank">Skia Status Page</a>
    </div>
    <br/>
    <table id="info-table">
      <tr>
        <td colspan=4>
          <span id="tree-status"></div>
        </td>
      </tr>
      <tr>
        <td>
          Sheriff: <span id="current-sheriff"></div>
        </td>
        <td>
          Trooper: <span id="current-trooper"></span>
        </td>
        <td>
          Robocop: <span id="current-robocop"></span>
        </td>
        <td>
          Wrangler: <span id="current-wrangler"></span>
        </td>
      </tr>
      <tr>
        <td>
          Perf Alerts: <span id="perf-alerts"></span>
        </td>
        <td>
          Untriaged GMs: <span id="gm-alerts"></span>
        </td>
        <td>
          Untriaged Images: <span id="image-alerts"></span>
        </td>
        <td>
          <a href="https://am.skia.org/?tab=1">Infra Alerts</a>
        </td>
      </tr>
    </table>
    <table id="gerrit-reviewer"></table>
    <table id="gerrit-cq"></table>
    <table id="gerrit-approved"></table>
    <table id="gerrit-under-review"></table>
    <table id="gerrit-wip"></table>
    <br/><br/>
    <div id="errors"></div>
    <script src="node_modules/skia-common-js/common.js"></script>
    <script src="popup.js"></script>
  </body>
</html>