{% extends 'base.html' %}{% load static %}
{% block title %}{{ room.name }} — Unity Nation{% endblock %}
{% block content %}
<div class="container chat-page">
  <!-- Header -->
  <div class="chat-hd">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px">
      <div style="display:flex;align-items:center;gap:12px">
        <div style="width:40px;height:40px;border-radius:10px;background:rgba(123,95,230,.2);display:flex;align-items:center;justify-content:center;font-size:1rem">💬</div>
        <div><div style="font-family:var(--ff);font-size:1.05rem;font-weight:700">{{ room.name }}</div><div style="font-size:.76rem;color:var(--muted)">{{ room.description|default:"Community chat room" }}</div></div>
      </div>
      <a href="{% url 'community_chat_list' %}" class="btn btn-ghost btn-sm"><i class="fas fa-arrow-left"></i>All Rooms</a>
    </div>
  </div>

  <!-- Messages -->
  <div class="chat-msgs" id="chatMsgs">
    {% for msg in messages %}
    <div class="msg-row {% if msg.sender == user %}mine{% endif %}">
      <div class="m-av">{{ msg.sender.username|first|upper }}</div>
      <div>
        <div class="m-bub">
          <div class="m-user">{{ msg.sender.username }}</div>
          <div class="m-text">{{ msg.content }}</div>
          <div class="m-time">{{ msg.created_at|date:"M d, H:i" }}</div>
        </div>
      </div>
    </div>
    {% empty %}
    <div style="text-align:center;padding:50px 20px;color:var(--muted)">
      <div style="font-size:2.5rem;margin-bottom:12px">👋</div>
      <p>No messages yet. Say hello and start the conversation!</p>
    </div>
    {% endfor %}
  </div>

  <!-- Input -->
  <div class="chat-bar">
    <form id="cF" method="post" action="{% url 'send_community_message' %}">{% csrf_token %}
      <input type="hidden" name="room_id" value="{{ room.id }}">
      <div class="chat-bar-row">
        <textarea name="content" id="cI" class="chat-inp" rows="1" placeholder="Write a message… (Enter to send)" required></textarea>
        <button type="submit" class="btn btn-violet"><i class="fas fa-paper-plane"></i>Send</button>
      </div>
    </form>
  </div>
</div>
<script>
const cm=document.getElementById('chatMsgs');if(cm)cm.scrollTop=cm.scrollHeight;
const ci=document.getElementById('cI');
if(ci){ci.addEventListener('input',()=>{ci.style.height='auto';ci.style.height=Math.min(ci.scrollHeight,110)+'px'});ci.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();document.getElementById('cF').submit()}})}
let lc=document.querySelectorAll('.msg-row').length;
setInterval(()=>{fetch('{% url "get_community_messages" room.id %}').then(r=>r.json()).then(d=>{if(d.messages&&d.messages.length>lc)location.reload()}).catch(()=>{})},5000);
</script>
{% endblock %}