<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>SkyWatch — Streaming Status</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: Arial, sans-serif; background: #f0f2f5; color: #222; }

    #header-bar {
      background: #0a1628; color: #fff;
      display: flex; align-items: center; gap: 16px;
      padding: 14px 28px;
    }
    #header-bar img { height: 80px; }
    #header-bar h1 { font-size: 1.3em; font-weight: normal; letter-spacing: .04em; }
    #header-bar a.nav { margin-left: auto; color: #aac4e8; text-decoration: none; font-size: .9em; }
    #header-bar a.nav:hover { color: #fff; }
    #header-bar .nav-group { margin-left: auto; display: flex; gap: 20px; }

    .content { max-width: 860px; margin: 28px auto; padding: 0 16px; }

    /* Country block */
    .country { margin-bottom: 32px; }
    .country-title {
      font-size: 1.15em; font-weight: bold; color: #0a1628;
      border-bottom: 2px solid #0a1628; padding-bottom: 6px; margin-bottom: 16px;
    }

    /* State block */
    .state { margin-bottom: 20px; margin-left: 12px; }
    .state-title {
      font-size: 1em; font-weight: bold; color: #444;
      margin-bottom: 10px;
    }
    .state-title span { background: #dde3ed; border-radius: 4px; padding: 2px 8px; }

    /* City block */
    .city { margin-left: 16px; margin-bottom: 12px; }
    .city-title {
      font-size: .9em; text-transform: uppercase; letter-spacing: .06em;
      color: #666; margin-bottom: 6px;
    }

    /* Stream card */
    .stream-card {
      background: #fff; border-radius: 6px;
      border-left: 4px solid #0078d4;
      padding: 10px 14px; margin-bottom: 8px; margin-left: 16px;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 8px;
    }
    .stream-card.offline { border-left-color: #bbb; opacity: .65; }
    .stream-name { font-weight: bold; font-size: .95em; }
    .stream-meta { font-size: .82em; color: #666; margin-top: 2px; }
    .stream-badge {
      font-size: .78em; padding: 3px 10px; border-radius: 12px;
      font-weight: bold; white-space: nowrap;
    }
    .badge-live { background: #e6f4ea; color: #1a7a2e; }
    .badge-off  { background: #f0f0f0; color: #888; }
    .listen-btn {
      display: inline-block; padding: 5px 14px; border-radius: 4px;
      background: #0078d4; color: #fff; text-decoration: none; font-size: .85em;
    }
    .listen-btn:hover { background: #005fa3; }
    .rec-btn {
      display: none; padding: 5px 14px; border-radius: 4px;
      background: #555; color: #fff; text-decoration: none; font-size: .85em;
    }
    .rec-btn:hover { background: #333; }

    .no-streams { color: #888; font-style: italic; margin: 32px 0; text-align: center; }
  </style>
  </head>
  <body>
    <div id="header-bar">
      <img src="/icecast.png" alt="SkyWatch" />
      <h1>SkyWatch — Streaming Status</h1>
      <div class="nav-group">
        <a class="nav" href="/">⌂ Home</a>
        <a class="nav" href="/map.html">⚲ Mapa</a>
      </div>
    </div>
    <div class="content">
      <div class="country">
        <div class="country-title">▶ BR</div>
        <div class="state">
          <div class="state-title">
            <span>RJ</span>
          </div>
          <div class="city">
            <div class="city-title">✈ FCA</div>
            <div class="stream-card">
              <div>
                <div class="stream-name">CENTRO-130.55</div>
                <div class="stream-meta">BR-RJ-FCA-CENTRO — FCA - Rio de Janeiro Centro - 130.55 MHz</div>
                <div class="stream-meta">
                            Ouvintes: 0 / pico: 4 · desde 2026-09-11T13:34:04+0000</div>
              </div>
              <div style="display:flex;align-items:center;gap:10px;">
                <a class="rec-btn" href="/recordings.html#BR-RJ-FCA-CENTRO-130.55" data-mount="BR-RJ-FCA-CENTRO-130.55">Gravações</a>
                <span class="stream-badge badge-live">● AO VIVO</span>
                <a class="listen-btn" href="/BR-RJ-FCA-CENTRO-130.55">▶ Ouvir</a>
              </div>
            </div>
          </div>
        </div>
        <div class="state">
          <div class="state-title">
            <span>SC</span>
          </div>
          <div class="city">
            <div class="city-title">✈ FCA</div>
            <div class="stream-card">
              <div>
                <div class="stream-name">SDEN-126.575</div>
                <div class="stream-meta">BR-SC-FCA-SDEN — FCA - Costa Esmeralda - SDEN - 126.575 MHz</div>
                <div class="stream-meta">
                            Ouvintes: 0 / pico: 1 · desde 2026-09-11T19:03:35+0000</div>
              </div>
              <div style="display:flex;align-items:center;gap:10px;">
                <a class="rec-btn" href="/recordings.html#BR-SC-FCA-SDEN-126.575" data-mount="BR-SC-FCA-SDEN-126.575">Gravações</a>
                <span class="stream-badge badge-live">● AO VIVO</span>
                <a class="listen-btn" href="/BR-SC-FCA-SDEN-126.575">▶ Ouvir</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
(function(){
  fetch(location.protocol + '//' + location.hostname + '/devices/recordings')
    .then(function(r){ return r.json(); })
    .then(function(channels){
      var mounts = channels.map(function(c){ return c.mount; });
      var btns = document.querySelectorAll('.rec-btn');
      for(var i=0;i&lt;btns.length;i++){
        if(mounts.indexOf(btns[i].getAttribute('data-mount')) !== -1){
          btns[i].style.display='inline-block';
        }
      }
    })
    .catch(function(){});
})();
</script>
  </body>
</html>
