<!doctype html>
<html lang="pl">
<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, sans-serif; color: #000; overflow-x: hidden; background: #fdb515; }
        .viewport { display: flex; flex-direction: column; height: 100vh; min-height: 100%; }
        .video-area { flex: 0 0 85%; position: relative; overflow: hidden; background: #000; }

        .info-bar {
            flex: 0 0 15%;
            background: #fdb515;
            color: #000;
            height: 15vh;
            min-height: 50px;
            box-sizing: border-box;
            overflow: hidden;
            white-space: nowrap;
            display: flex;
            align-items: center;
            padding-left: 4vh;
            padding-right: 4vh;
        }

        #scroll-content {
            display: inline-block;
            white-space: nowrap;
            margin-left: 100%;
            animation: scroll-left var(--duration, 20s) linear infinite;
        }

        #gap {
            display: inline-block;
            width: var(--gap-width, 500px);
        }

        #text-1, #text-2 {
            display: inline-block;
            white-space: nowrap;
        }

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

        #scroll-content, .num-inline, #text-1, #text-2 {
            font-size: 5vh;
            font-weight:700;
            line-height: 1;
            vertical-align: middle;
        }

        .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;
        }

        @keyframes scroll-left {
            from { transform: translateX(0); }
            to { transform: translateX(var(--scroll-distance)); }
        }

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

    <script>
      const SPEED_FACTOR = 0.006;
      const CUSTOM_GAP_WIDTH = 1920;

      function updateAnimation(scrollContentElement, combinedText) {

        const tempElement = document.createElement('span');
        tempElement.style.whiteSpace = 'nowrap';
        tempElement.style.fontSize = '5vh';
        tempElement.style.fontWeight = '700';
        tempElement.innerHTML = combinedText;

        document.body.appendChild(tempElement);
        const contentWidth = tempElement.offsetWidth;
        document.body.removeChild(tempElement);

        const totalScrollDistance = contentWidth + CUSTOM_GAP_WIDTH;

        const duration = totalScrollDistance * SPEED_FACTOR;

        scrollContentElement.style.setProperty('--scroll-distance', `-${totalScrollDistance}px`);
        scrollContentElement.style.setProperty('--duration', `${duration}s`);

        document.getElementById('gap').style.setProperty('--gap-width', `${CUSTOM_GAP_WIDTH}px`);

        document.getElementById('text-1').innerHTML = combinedText;
        document.getElementById('text-2').innerHTML = combinedText;
      }

      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 first = j.first != 0 ? j.first : '-';

          const infoText = ({{ infotext | tojson }}); 
          // const infoText = 'Chcesz spróbować swoich sił w lutowaniu? Odbierz numer i sprawdzaj kolejkę tutaj lub 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} | Liczba oczekujących: ${waitingCount} | Pierwszy w kolejce nr ${first} ${numList} `;

          const scrollContentElement = document.getElementById('scroll-content');

          scrollContentElement.style.animationPlayState = 'paused';
          updateAnimation(scrollContentElement, combinedText);
          setTimeout(() => {
            scrollContentElement.style.animationPlayState = 'running';
          }, 50);


        } catch (e) {
          console.error('fetchCurrent error', e);
          const scrollContentElement = document.getElementById('scroll-content');
          scrollContentElement.style.animationPlayState = 'running';
        }
      }

      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="scroll-content">
            <span id="text-1">-</span>
            <span id="gap">&nbsp;</span>
            <span id="text-2">-</span>
        </div>
    </div>
</div>
</body>
</html>
