{% extends 'base.html' %}{% load static %}
{% block title %}My Conversations — Unity Nation{% endblock %}
{% block extra_css %}
.conv-row{display:flex;align-items:center;gap:13px;padding:14px 18px;border-top:1px solid rgba(255,255,255,.04);text-decoration:none;transition:background var(--tr)}
.conv-row:hover{background:rgba(255,255,255,.03)}
.c-av{width:44px;height:44px;border-radius:11px;background:rgba(123,95,230,.2);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--vlt);flex-shrink:0}
.c-name{font-weight:600;font-size:.9rem;margin-bottom:2px}
.c-sub{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.c-time{font-size:.72rem;color:var(--muted);margin-left:auto;flex-shrink:0;white-space:nowrap}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div class="pg-hd"><div class="ey">Messaging</div><h1>My Conversations</h1><p>Order chats and direct messages with merchants.</p></div>
<div style="background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden">
{% for room in chat_rooms %}
<a href="{% url 'order_chat' room.order.id %}" class="conv-row">
  <div class="c-av">{{ room.order.merchant.business_name|first|upper }}</div>
  <div style="flex:1;min-width:0">
    <div class="c-name">{{ room.order.merchant.business_name }}</div>
    <div class="c-sub">Order #{{ room.order.id }} · {{ room.order.product.name|default:room.order.service.name }}</div>
  </div>
  <div class="c-time">{{ room.updated_at|timesince }} ago</div>
</a>
{% empty %}
<div style="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-inbox" style="color:var(--vlt)"></i></div>
  <h3 style="font-family:var(--ff);color:var(--white);margin-bottom:7px">No conversations yet</h3>
  <p style="margin-bottom:20px">Your order chats with merchants will appear here once you make a purchase.</p>
  <a href="{% url 'marketplace' %}" class="btn btn-violet"><i class="fas fa-store"></i>Browse Marketplace</a>
</div>
{% endfor %}
</div>
</div>
{% endblock %}