{% extends "base.html" %}
{% block title %}Messages | Roster{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h2 class="h3 mb-4">Conversations</h2>
            
            <div class="list-group shadow-sm rounded-3 overflow-hidden">
                {% for partner in partners %}
                <a href="{% url 'chat_detail' partner.username %}" class="list-group-item list-group-item-action p-3 border-0 border-bottom">
                    <div class="d-flex align-items-center">
                        <img src="{{ partner.profile.avatar_url|default:'https://ui-avatars.com/api/?name='|add:partner.first_name }}" class="rounded-circle me-3" width="50" height="50" alt="{{ partner.username }}">
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0 fw-bold">{{ partner.get_full_name|default:partner.username }}</h6>
                                <small class="text-muted">{{ partner.last_message.timestamp|date:"M d" }}</small>
                            </div>
                            <p class="text-muted mb-0 small text-truncate" style="max-width: 300px;">
                                {% if partner.last_message.sender == request.user %}You: {% endif %}
                                {{ partner.last_message.body }}
                            </p>
                        </div>
                        {% if not partner.last_message.is_read and partner.last_message.recipient == request.user %}
                        <span class="badge bg-primary rounded-pill">New</span>
                        {% endif %}
                    </div>
                </a>
                {% empty %}
                <div class="list-group-item text-center py-5">
                    <p class="text-muted mb-0">No conversations yet. Connect with someone from the Discovery Hub!</p>
                    <a href="{% url 'home' %}" class="btn btn-primary-cg btn-sm mt-3">Browse Profiles</a>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
