{% extends 'base.html' %}
{% block title %}Czat na żywo · {{panel_brand}}{% endblock %}
{% block content %}
<p class="eyebrow">PLAYERBOTS · NA ŻYWO</p>
<h1>Wiadomości</h1>
<nav class="msg-tabs" aria-label="Podkategorie wiadomości">
  <a class="msg-tab" href="{{url_for('world_feed')}}">✦ Wiadomości ze świata</a>
  <a class="msg-tab active" href="{{url_for('live_chat')}}">▤ Czat na żywo</a>
</nav>
<section class="metin-chat-window" aria-labelledby="live-chat-title">
  <header class="metin-chat-titlebar"><div><span class="metin-chat-title-gem">◆</span><h1 id="live-chat-title">Protokół wiadomości</h1></div><span class="metin-chat-status"><i></i> LIVE · odświeżanie co 4 s</span></header>
  <div class="metin-chat-guide"><span>Wołaj i Handel</span><b>·</b> nick prowadzi do karty postaci <b>·</b> ostatnie 100 wiadomości, zapisane trwale — wejdź o dowolnej porze <b>·</b> tylko wiadomości zapisane przez rdzeń gry</div>
  <div id="live-chat-messages" class="metin-chat-scroll" aria-live="polite">{% include 'partials/live_chat_messages.html' %}</div>
  <footer class="metin-chat-footer"><span>Podgląd tylko do odczytu · nie wysyła wiadomości do gry</span><button type="button" id="live-chat-refresh">↻ Odśwież</button></footer>
</section>
<script>
(() => {
  const box = document.getElementById('live-chat-messages');
  const refresh = document.getElementById('live-chat-refresh');
  let inFlight = false;
  async function update(){
    if(inFlight) return; inFlight=true;
    try { const res=await fetch('{{url_for("api_live_chat")}}',{headers:{'X-Requested-With':'XMLHttpRequest'}}); const data=await res.json(); if(data.ok){ const stick=box.scrollHeight-box.scrollTop-box.clientHeight<42; box.innerHTML=data.html; if(stick) box.scrollTop=box.scrollHeight; } }
    catch (_) {} finally { inFlight=false; }
  }
  refresh.addEventListener('click', update);
  box.scrollTop=box.scrollHeight;
  setInterval(update,4000);
})();
</script>
{% endblock %}