{% extends 'base.html' %}{% load static %}
{% block title %}Community Chat — Unity Nation{% endblock %}
{% block extra_css %}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.room-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);padding:24px;text-decoration:none;display:block;transition:all var(--tr);position:relative;overflow:hidden}
.room-card::before{content:'';position:absolute;bottom:-20px;right:-20px;width:90px;height:90px;border-radius:50%;background:rgba(123,95,230,.08);pointer-events:none}
.room-card:hover{border-color:rgba(123,95,230,.4);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.room-icon{width:46px;height:46px;border-radius:12px;background:rgba(123,95,230,.2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:14px}
.room-name{font-family:var(--ff);font-size:1rem;font-weight:700;color:var(--white);margin-bottom:5px}
.room-desc{font-size:.81rem;color:var(--muted);line-height:1.55;margin-bottom:13px}
.room-meta{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--muted)}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div class="pg-hd"><div class="ey">Community</div><h1>Community Chat</h1><p>Connect and collaborate with Unity Nation members in live chat rooms.</p></div>
<div class="room-grid">
{% for room in rooms %}
<a href="{% url 'community_chat' room.id %}" class="room-card">
  <div class="room-icon">💬</div>
  <div class="room-name">{{ room.name }}</div>
  <div class="room-desc">{{ room.description|default:"Join the conversation with Unity Nation members in this community room." }}</div>
  <div class="room-meta"><i class="fas fa-users"></i><span>Community Room</span><span style="margin-left:auto"><i class="fas fa-arrow-right"></i></span></div>
</a>
{% empty %}
<div style="grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--muted)">
  <div style="width:80px;height:80px;border-radius:20px;background:rgba(123,95,230,.12);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 18px"><i class="fas fa-comments" style="color:var(--vlt)"></i></div>
  <h3 style="font-family:var(--ff);color:var(--white);margin-bottom:7px">No chat rooms yet</h3>
  <p>Community rooms will appear here when created by admins.</p>
</div>
{% endfor %}
</div>
</div>
{% endblock %}