{% extends 'base.html' %}{% block title %}Intercom — {{ brand }}{% endblock %}
{% block content %}
<section class="max-w-5xl mx-auto">
  <div class="card glass p-4">
    <textarea id="composer" rows="3" class="w-full" placeholder="Share an update…" {% if not can_post %}disabled{% endif %}></textarea>
    <div class="mt-3 flex items-center justify-between">
      <div class="text-xs text-white/60">{% if not can_post %}You don’t have permission to post.{% endif %}</div>
      <button id="sendBtn" class="btn bg-accent font-semibold" {% if not can_post %}disabled{% endif %}>Post</button>
    </div>
  </div>
  <div class="mt-6 space-y-3" id="board">
    {% for m in messages %}
    <article class="card glass p-4">
      <div class="flex items-start gap-3">
        {% if m.avatar %}<img src="{{ m.avatar }}" class="size-9 rounded-lg">{% else %}<div class="size-9 rounded-lg bg-white/10 grid place-items-center">🟣</div>{% endif %}
        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-2">
            <div class="font-semibold">{{ m.username }}</div>
            {% if m.timestamp %}<div class="text-xs text-white/50">{{ m.timestamp.replace('T',' ').replace('Z',' UTC') }}</div>{% endif %}
          </div>
          <div class="mt-1 whitespace-pre-wrap text-white/90">{{ m.content }}</div>
        </div>
      </div>
    </article>
    {% endfor %}
  </div>
  <div class="mt-4 text-center"><button id="refreshBtn" class="btn">Refresh</button></div>
</section>
<script>
const board=document.getElementById('board'), sendBtn=document.getElementById('sendBtn'), composer=document.getElementById('composer');
function esc(s){return (s||'').replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;');}
async function fetchMessages(){
  const r=await fetch('/api/board/messages'); if(!r.ok) return;
  const data=await r.json();
  board.innerHTML=data.map(m=>`
<article class="card glass p-4">
  <div class="flex items-start gap-3">
    ${m.avatar?`<img src="${m.avatar}" class="size-9 rounded-lg">`:`<div class="size-9 rounded-lg bg-white/10 grid place-items-center">🟣</div>`}
    <div class="flex-1 min-w-0">
      <div class="flex items-center gap-2">
        <div class="font-semibold">${esc(m.username)}</div>
        ${m.timestamp?`<div class="text-xs text-white/50">${esc(m.timestamp.replace('T',' ').replace('Z',' UTC'))}</div>`:''}
      </div>
      <div class="mt-1 whitespace-pre-wrap text-white/90">${esc(m.content)}</div>
    </div>
  </div>
</article>`).join('');
}
async function postMessage(){
  const content=(composer.value||'').trim(); if(!content) return;
  const r=await fetch('/api/board/post',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({content})});
  if(r.ok){composer.value=''; fetchMessages()} else {const e=await r.json().catch(()=>({error:'Failed'})); alert(e.error||'Failed')}
}
document.getElementById('refreshBtn').addEventListener('click', fetchMessages);
sendBtn?.addEventListener('click', postMessage);
</script>
{% endblock %}