{% extends 'core/base.html' %}
{% block title %}Intercom — Portal{% endblock %}
{% block content %}
<section class="max-w-4xl mx-auto">
<header class="flex items-center justify-between mb-4">
<h1 class="text-2xl font-bold">Discord Intercom</h1>
<button id="refresh" class="btn">Refresh</button>
</header>
<div id="list" class="space-y-3"></div>


<div class="mt-6 card glass p-4">
<textarea id="composer" rows="3" class="w-full"></textarea>
<div class="mt-2 text-right"><button id="send" class="btn bg-accent font-semibold">Post</button></div>
</div>
</section>
<script>
async function load(){
const r = await fetch('/board/api/messages');
const data = await r.json();
const root = document.getElementById('list');
root.innerHTML = data.map(m=>`
<article class="card glass p-4">
<div class="text-sm text-white/60">${(m.timestamp||'').replace('T',' ').replace('Z',' UTC')}</div>
<div class="font-semibold">${m.username||'user'}</div>
<div class="mt-1 whitespace-pre-wrap">${m.content||''}</div>
</article>`).join('');
}
async function post(){
const v = document.getElementById('composer').value.trim();
if(!v) return;
const r = await fetch('/board/api/post',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({content:v})});
if(r.ok){ document.getElementById('composer').value=''; load(); }
else alert('Not allowed or failed');
}
load();
setInterval(load,15000);
refresh.onclick = load;
send.onclick = post;
</script>
{% endblock %}