<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Informacje</title>
  <style>
    :root { height: 100%; }
    html, body { height: 100%; margin: 0; font-family: Helvetica, Arial; color: #000; }
    .viewport { display: flex; flex-direction: column; height: 100vh; min-height: 100%; }
    .video-area { flex: 0 0 85%; position: relative; overflow: hidden; background: #000; }

     body { background: #fdb515; }

    .info-bar {
        flex: 0 0 15%; 
        background: #fdb515; 
        color: #000; 
        display: flex; 
//        display: block;
        width: 300% ; 
        align-items: center; 
        vertical-align:middle;        
        box-sizing: border-box; 
        height: 15vh; 
        min-height: 50px; 
        padding-left: 4vh; 
        padding-right: 4vh; 
        overflow: hidden; 
        white-space: nowrap; 
        animation: scroll-left 20s linear infinite; 
    }

    @keyframes scroll-left {
        from { transform: translateX(100%); }
        to { transform: translateX(-100%); }
    }

    .video-area video {
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        height: 100%; 
        width: auto; 
        object-fit: cover; 
    }

    .info-bar, .info-bar .info-left, .info-bar .info-right {
        font-size: 5vh; 
        font-weight:700;
        line-height: 1; 
    }

    .num-inline {            
        display: inline-block; 
        margin-left: 1vh; 
        padding: 1.6vh 1.2vh; 
        border: 0.4vh solid #000; 
        border-radius: 0.8vh; 
        background: transparent; 
        line-height: 1; 
        vertical-align: middle; 
    }

    @media (max-width: 700px) {
        .video-area { flex-basis: 70%; }
    }
  </style>

  <script>
    async function fetchCurrent() {
      try {
        const r = await fetch('/current', { cache: 'no-store' });
        const j = await r.json();
        
        const nums = j.current || [];
        const waitingCount = j.waiting != null ? j.waiting : '0';
        
        const infoText = 'Chcesz spróbować swoich sił w lutowaniu? Odbierz numer i sprawdzaj kolejkę na queue.hswro.org';
        const numsFormatted = nums.map(n => `<span class="num-inline">${n}</span>`).join(' ');
        const numList = nums.length > 0 ? `| Zapraszamy z numerami: ${numsFormatted}` : '';
        const combinedText = `${infoText} | Oczekujących: ${waitingCount} ${numList}`;
        
        // Wstawienie tekstu do dolnego paska
        document.getElementById('info-bar-text-1').innerHTML = combinedText;
 //       document.getElementById('info-bar-text-2').innerHTML = combinedText;        
      } catch (e) {
        console.error('fetchCurrent error', e);
      }
    }

    window.addEventListener('load', () => {
      fetchCurrent();
      setInterval(fetchCurrent, 5000);
    });
  </script>
</head>
<body>
  <div class="viewport">
    <div class="video-area">
      <video id="bgvideo" autoplay loop muted playsinline>
        <source src="{{ url_for('static', filename='background.mp4') }}" type="video/mp4">
      </video>
    </div>

    <div class="info-bar">
      <div id="info-bar-text-1" class="info-left">-</div>   
    </div>
  </div>
</body>
</html>
