{# Compact inbox-style thread list for the ticket-header "N threads" popup.
   Rendered by GET /customer/<hash>/threads-mini. See customer_threads_mini(). #}
{% macro status_chip(status) -%}
  {% set map = {
    'open': (_('Open'), 'bg-blue-100 dark:bg-blue-500/15 text-blue-700 dark:text-blue-300'),
    'in_progress': (_('In Progress'), 'bg-amber-100 dark:bg-amber-500/15 text-amber-700 dark:text-amber-300'),
    'waiting_customer': (_('Waiting'), 'bg-purple-100 dark:bg-purple-500/15 text-purple-700 dark:text-purple-300'),
    'answered': (_('Answered'), 'bg-emerald-100 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300'),
    'closed': (_('Closed'), 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400'),
  } %}
  {% set label, cls = map.get(status, (status or '—', 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400')) %}
  <span class="inline-flex items-center px-1.5 py-0 rounded text-[10px] font-medium flex-shrink-0 {{ cls }}">{{ label }}</span>
{%- endmacro %}

{% macro thread_row(it) -%}
  {% set is_link = it.ticket_id and not it.is_current %}
  <{% if is_link %}a href="/ticket/{{ it.ticket_id }}"{% else %}div{% endif %}
     class="flex items-center gap-2.5 px-3 py-2.5 rounded-lg transition-colors
            {% if it.is_current %}bg-brand-50 dark:bg-brand-500/10 ring-1 ring-brand-200 dark:ring-brand-500/30 cursor-default
            {% else %}hover:bg-gray-50 dark:hover:bg-gray-700/50{% endif %}">
    {# Product icon / BC badge #}
    <div class="flex-shrink-0">
      {% if it.product_type == 'business_care' %}
      <div class="w-7 h-7 rounded-lg bg-indigo-100 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 flex items-center justify-center" title="{{ it.product_name }}">
        <span class="text-[10px] font-bold text-indigo-600 dark:text-indigo-400">{{ _("BC") }}</span>
      </div>
      {% elif it.pico_url %}
      <img src="{{ it.pico_url }}" alt="" class="w-7 h-7 rounded-lg" title="{{ it.product_name }}" onerror="this.style.display='none'">
      {% else %}
      <div class="w-7 h-7 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center" title="{{ it.product_name }}">
        <span class="material-symbols-outlined text-gray-400 dark:text-gray-500" style="font-size:16px">extension</span>
      </div>
      {% endif %}
    </div>
    {# Subject + meta #}
    <div class="min-w-0 flex-1">
      <div class="flex items-center gap-1.5">
        {% if not it.is_read %}<span class="inline-block w-2 h-2 rounded-full bg-brand-500 flex-shrink-0" title="{{ _('Unread') }}"></span>{% endif %}
        <span class="truncate text-sm text-gray-900 dark:text-gray-100 {% if not it.is_read %}font-semibold{% endif %}">{{ it.subject }}</span>
        {% if it.is_current %}<span class="inline-flex items-center px-1.5 py-0 rounded text-[10px] font-semibold bg-brand-100 dark:bg-brand-500/20 text-brand-700 dark:text-brand-300 flex-shrink-0">{{ _("current") }}</span>{% endif %}
      </div>
      <div class="flex items-center gap-2 mt-0.5 text-[11px] text-gray-400 dark:text-gray-500">
        {% if it.provider_thread_id %}<span class="truncate">#{{ it.provider_thread_id }}</span>{% endif %}
        {% if it.last_activity_at %}<span class="flex-shrink-0">{{ it.last_activity_at|localdt('%Y-%m-%d') }}</span>{% endif %}
      </div>
    </div>
    {# Status #}
    {{ status_chip(it.status) }}
  </{% if is_link %}a{% else %}div{% endif %}>
{%- endmacro %}

{% if total == 0 %}
<p class="text-sm text-gray-400 dark:text-gray-500 text-center py-8">{{ _("No other threads from this customer.") }}</p>
{% elif group_by_module %}
<div class="space-y-4">
  {% for module_name, rows in grouped.items() %}
  <div>
    <p class="px-3 pb-1 text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider flex items-center gap-1.5">
      <span class="truncate">{{ module_name }}</span>
      <span class="text-gray-300 dark:text-gray-600">·</span>
      <span>{{ rows|length }}</span>
    </p>
    <div class="space-y-0.5">
      {% for it in rows %}{{ thread_row(it) }}{% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="space-y-0.5">
  {% for it in items %}{{ thread_row(it) }}{% endfor %}
</div>
{% endif %}