<!doctype html>
<html>
  <head>
    <title>Skia Infra Alerts Popup</title>
  </head>

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

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

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

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

    #extra-info {
      margin-left: auto;
      margin-right: auto;
    }
    #extra-info td {
      padding: 0px 10px;
      width: 33%;
      text-align: center;
    }

    .alerts-row-name td {
      font-weight: bold;
      padding-top: 20px;
    }

    .left-padded {
      padding-left: 20px;
    }

    svg {
      height: 22px;
      width: 40px;
      cursor: pointer;
    }

    svg:hover {
      fill: #CC6677;
    }

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

  <body>
    <div class="alerts-link">
      <a href="https://promalerts.skia.org/#/alerts" target="_blank">Go to Alerts Page</a>
    </div>
    <br/>
    <table id="extra-info">
      <tr>
        <td>
          Trooper: <span id="current-trooper"></span>
        </td>
        <td>
          Sheriff: <span id="current-sheriff"></span>
        </td>
        <td>
          Silenced Alerts: <a href="https://promalerts.skia.org/#/silences" target="_blank"><span id="silenced-alerts"></span></a>
        </td>
      </tr>
    </table>
    <table id="alerts-table"></table>
    <div id="errors"></div>
    <script src="popup.js"></script>
  </body>
</html>