{% extends "base.html" %}
{% block title %}Support Conversations{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h4 class="mb-0"><i class="bi bi-chat-left-dots me-2 text-primary"></i>Customer Chat Conversations</h4>
  <a href="{{ url_for('support.admin_tickets') }}" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-life-preserver me-1"></i>Support Tickets
  </a>
</div>

<div class="card shadow-sm">
  <div class="card-body p-0">
    {% if sessions.items %}
    <div class="table-responsive">
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-light">
          <tr>
            <th>Customer</th>
            <th>First message</th>
            <th class="text-center">Messages</th>
            <th>Last activity</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for s in sessions.items %}
          <tr>
            <td class="fw-semibold">{{ s.customer.display_name if s.customer else '—' }}</td>
            <td class="text-muted small text-truncate" style="max-width:340px;">
              {{ s.preview[:120] }}{% if s.preview|length > 120 %}…{% endif %}
            </td>
            <td class="text-center">{{ s.message_count }}</td>
            <td class="small text-muted text-nowrap">{{ s.updated_at.strftime('%b %d, %Y %I:%M %p') }}</td>
            <td class="text-end">
              <a href="{{ url_for('support.admin_conversation_detail', session_id=s.id) }}"
                 class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i> View</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="p-4 text-muted text-center">No chat conversations yet.</div>
    {% endif %}
  </div>
</div>

{% if sessions.pages > 1 %}
<nav class="mt-3"><ul class="pagination justify-content-center">
  {% for p in range(1, sessions.pages + 1) %}
  <li class="page-item {{ 'active' if p == sessions.page }}">
    <a class="page-link" href="{{ url_for('support.admin_conversations', page=p) }}">{{ p }}</a>
  </li>
  {% endfor %}
</ul></nav>
{% endif %}
{% endblock %}