{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block head %}
<style>
    .discussion-item {
        transition: background 0.15s;
        border-left: 4px solid transparent;
    }
    .discussion-item.has-unread {
        background-color: #f0f4ff;
        border-left-color: var(--brand-color, #2f3e8b);
    }
    .discussion-item:hover {
        background-color: #e8edf8;
        text-decoration: none;
    }
    .avatar-sm {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">
            <i class="bi bi-chat-dots me-2 text-primary"></i>{% translate "Discussions" %}
        </h1>
        <a href="{% url 'notifications:inbox' %}" class="btn btn-outline-secondary">
            <i class="bi bi-bell me-1"></i>{% translate "Notifications" %}
        </a>
    </div>

    {% if not items %}
    <div class="card shadow-sm">
        <div class="card-body text-center py-5 text-muted">
            <i class="bi bi-chat-square fs-1 d-block mb-3"></i>
            <p class="mb-0">{% translate "Vous n'avez encore aucune discussion." %}</p>
        </div>
    </div>
    {% else %}
    <div class="card shadow-sm">
        <div class="list-group list-group-flush">
            {% for item in items %}
            <a href="{% url 'notifications:discussion_detail' item.discussion.pk %}"
               class="list-group-item list-group-item-action discussion-item px-4 py-3 {% if item.unread_count %}has-unread{% endif %}">
                <div class="d-flex align-items-start gap-3">
                    <!-- Icône -->
                    <div class="avatar-sm bg-primary text-white">
                        <i class="bi bi-chat-dots"></i>
                    </div>

                    <!-- Contenu -->
                    <div class="flex-grow-1 min-width-0">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <span class="fw-semibold">{{ item.discussion.title|default:item.discussion }}</span>
                                {% if item.discussion.object_label %}
                                <span class="badge bg-light text-secondary ms-2 small">
                                    <i class="bi bi-link-45deg me-1"></i>{{ item.discussion.object_label }}
                                </span>
                                {% endif %}
                            </div>
                            <span class="text-muted small ms-3 text-nowrap">
                                {{ item.discussion.updated_at|date:"d/m/Y H:i" }}
                            </span>
                        </div>
                        {% if item.last_message %}
                        <p class="mb-1 small text-muted text-truncate mt-1" style="max-width:600px;">
                            <strong>{{ item.last_message.author.get_full_name|default:item.last_message.author.username }}</strong> :
                            {{ item.last_message.content|truncatechars:120 }}
                        </p>
                        {% else %}
                        <p class="mb-1 small text-muted mt-1">{% translate "Aucun message encore." %}</p>
                        {% endif %}
                        <!-- Participants -->
                        <div class="d-flex align-items-center gap-1 mt-1">
                            {% for p in item.discussion.participants.all|slice:":6" %}
                            <span class="badge bg-secondary" title="{{ p.get_full_name|default:p.username }}">
                                {{ p.get_full_name|default:p.username|truncatechars:12 }}
                            </span>
                            {% endfor %}
                            {% if item.discussion.participants.count > 6 %}
                            <span class="badge bg-light text-muted">+{{ item.discussion.participants.count|add:"-6" }}</span>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Badge non-lus -->
                    {% if item.unread_count %}
                    <span class="badge bg-primary rounded-pill align-self-center">{{ item.unread_count }}</span>
                    {% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}

</div>
{% endblock content %}