{% extends "base.html" %}
{% block title %}{{ _("Inbox") }}{% endblock %}
{% block content %}
{# ── Mobile card styles (below md = 768px) ── #}
{# Scoped to #inbox-page so no other table is affected.                         #}
{# Strategy: CSS-only responsive cards — <tr>/<td> structure is untouched so   #}
{# the AJAX tbody swap (refreshInboxRows) keeps working with zero JS changes.   #}
{# The <style> block lives in inbox.html (never in _inbox_rows.html) so it      #}
{# survives every partial replacement of the <tbody>.                           #}
<style>
/* ── Mobile domain hint: hidden by default (parent sm:hidden also hides it on desktop) ── */
.mobile-domain-hint { display: none; }

@media (max-width: 767px) {
  /* ── Container: disable horizontal scroll, cards need full width ── */
  #inbox-page .bg-white.rounded-xl {
    overflow-x: visible;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* ── Hide the thead entirely ── */
  #inbox-table thead {
    display: none;
  }

  /* ── Remove the tbody row dividers — cards have their own borders ── */
  #inbox-table tbody {
    display: block;
    padding: 0.5rem 0.75rem;
    gap: 0;
  }

  /* ── Each <tr> becomes a card ──
        Flex (not block) so the visual order of the card is independent of the
        DOM column order — the desktop table puts product BEFORE subject, but
        the card keeps subject first via the order rules below. */
  #inbox-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    margin-bottom: 0.625rem;
    padding: 0.75rem 0.875rem 0.625rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;      /* gray-200 */
    background-color: #ffffff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06);
    overflow: hidden;               /* clip the stretch link */
    /* Remove table hover — we apply it via the stretch link below */
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }
  /* Dark mode card base */
  .dark #inbox-table tbody tr {
    border-color: #374151;          /* gray-700 */
    background-color: #1f2937;      /* gray-800 */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.25);
  }
  /* Unread card emphasis — left accent + bg via CSS vars; beats the #ffffff base card rule */
  #inbox-table tbody tr.row-unread {
    border-left: 3px solid var(--unread-accent);
    background-color: var(--unread-bg);
  }
  .dark #inbox-table tbody tr.row-unread {
    border-left: 3px solid var(--unread-accent-dark);
    background-color: var(--unread-bg-dark);
  }
  /* Hover: lift the card */
  #inbox-table tbody tr:hover {
    border-color: #a5b4fc;          /* brand-300 */
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.1);
    background-color: #ffffff;      /* prevent Tailwind hover:bg-gray-50 from flashing */
  }
  .dark #inbox-table tbody tr:hover {
    border-color: #4f46e5;          /* brand-600 */
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.35);
    background-color: #1f2937;
  }
  /* Last card: no bottom margin */
  #inbox-table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* ── Default: collapse all cells ── */
  #inbox-table tbody td {
    display: none;
    padding: 0;
  }

  /* ── Subject cell: primary card body ──
        Intentionally NOT positioned, so the stretched-link ::after below
        resolves to the <tr> card (position:relative) and makes the WHOLE card
        tappable — without hiding the subject text. */
  #inbox-table tbody td[data-col="subject"] {
    display: block;
    order: 0;                 /* card body first, regardless of DOM order */
    flex: 1 1 100%;
    min-width: 0;
    padding: 0 0 0.5rem 0;
    padding-right: 2.25rem;   /* room for the star button top-right */
  }
  /* Subject is the PRIMARY, VISIBLE line (the key scannable field) */
  #inbox-table tbody td[data-col="subject"] .inbox-card-link {
    display: block;
    font-size: 0.9375rem;     /* ~15px — larger than the snippet */
    font-weight: 600;
    color: #111827;           /* gray-900 */
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
  }
  .dark #inbox-table tbody td[data-col="subject"] .inbox-card-link {
    color: #f3f4f6;           /* gray-100 */
  }
  /* Stretched-link overlay: transparent, covers the whole card for tapping;
     sits UNDER the star (z2) and footer/badge pills (z1), which stay clickable. */
  #inbox-table tbody td[data-col="subject"] .inbox-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  /* Secondary #id link in the mobile badge row stays small/inline */
  #inbox-table tbody td[data-col="subject"] .sm\:hidden a {
    font-weight: 500;
  }
  /* Snippet */
  #inbox-table tbody td[data-col="subject"] p {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.125rem;
  }
  /* Mobile badge row (already sm:hidden — keep it, no changes needed) */
  #inbox-table tbody td[data-col="subject"] .sm\:hidden {
    display: flex;
    position: relative;
    z-index: 1;
    margin-bottom: 0.25rem;
  }

  /* ── Star cell: position in top-right corner of card ── */
  #inbox-table tbody td[data-col="star"] {
    display: block;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0;
    z-index: 2;           /* above the overlay link */
  }
  #inbox-table tbody td[data-col="star"] .star-btn {
    font-size: 1.125rem;  /* slightly smaller than desktop 2xl */
    line-height: 1;
    min-width: 2rem;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Footer row: status + priority + product + date ── */
  /* We use a flex strip. Each of these cells shows inline. */
  #inbox-table tbody td[data-col="status"],
  #inbox-table tbody td[data-col="priority"],
  #inbox-table tbody td[data-col="product"],
  #inbox-table tbody td[data-col="date"] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    vertical-align: middle;
    position: relative;
    z-index: 1;
  }
  /* Wrap all footer cells in a pseudo-row using the status cell as the flex
     container anchor. We achieve this by making the subject td display:block
     (already done above) and letting the footer cells flow as inline-flex
     siblings. We wrap them in a flex container via a wrapper already present
     in the DOM: they are siblings, so we rely on the <tr>'s block display
     to let them sit on the same line with a gap. */
  #inbox-table tbody td[data-col="status"] {
    order: 2;
    margin-right: 0.375rem;
    margin-top: 0.375rem;
  }
  #inbox-table tbody td[data-col="priority"] {
    order: 3;
    margin-right: 0.375rem;
    margin-top: 0.375rem;
  }
  #inbox-table tbody td[data-col="product"] {
    order: 1;                 /* footer strip: icon, status, priority, date */
    margin-right: 0.375rem;
    margin-top: 0.375rem;
  }
  /* Product icon: smaller on cards */
  #inbox-table tbody td[data-col="product"] img,
  #inbox-table tbody td[data-col="product"] div.w-8 {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.3rem;
  }
  #inbox-table tbody td[data-col="product"] .text-xs.font-bold {
    font-size: 0.5rem;
  }
  /* Date cell: pushed to the right edge of the flex footer row */
  #inbox-table tbody td[data-col="date"] {
    order: 4;
    margin-left: auto;
    margin-top: 0.375rem;
    font-size: 0.7rem;
    color: #9ca3af;       /* gray-400 */
  }
  .dark #inbox-table tbody td[data-col="date"] {
    color: #6b7280;       /* gray-500 */
  }

  /* ── Support status cell: hidden on mobile (info is implicit in expired accent) ── */
  #inbox-table tbody td[data-col="support"] {
    display: none;
  }

  /* ── Cells kept hidden on mobile ── */
  /* id, msg, ps — not shown; the subject cell's sm:hidden div carries ID + badges */
  #inbox-table tbody td[data-col="id"],
  #inbox-table tbody td[data-col="msg"],
  #inbox-table tbody td[data-col="ps"] {
    display: none;
  }

  /* ── Mobile domain hint: visible in the top badge row ── */
  /* Uses inline-block so max-width + text-overflow work inside the flex row.
     The subject cell has padding-right:2.25rem which already clears the star,
     so the flex-wrap row stays inside that safe zone and can't collide. */
  /* Sky tinted pill — same visual family as the topic/VIP/Thanks pills */
  .mobile-domain-hint {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.65rem;
    font-weight: 500;
    color: #0369a1;           /* sky-700 */
    background-color: #e0f2fe; /* sky-100 */
    padding: 0 0.375rem;
    border-radius: 0.25rem;
    max-width: 10rem;         /* fits typical domains; row flex-wraps + star zone is padded */
    min-width: 0;
    vertical-align: middle;
    flex-shrink: 1;
  }
  .dark .mobile-domain-hint {
    color: #7dd3fc;           /* sky-300 */
    background-color: rgb(14 165 233 / 0.1); /* sky-500/10 */
  }
  /* ── Clear floats after each row ── */
  #inbox-table tbody tr::after {
    content: '';
    display: table;
    clear: both;
  }

  /* ── Empty state row: keep it simple ── */
  #inbox-table tbody tr:only-child td[colspan] {
    display: block;
    padding: 3rem 1rem;
    text-align: center;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  #inbox-table tbody tr:only-child {
    border: none;
    box-shadow: none;
    background: transparent;
  }
}

/* ── CSS variables for unread row palette ── */
#inbox-table {
  --unread-bg: #ede9fe;
  --unread-accent: #8b5cf6;
  --unread-bg-dark: #2d2a4a;
  --unread-accent-dark: #8b5cf6;
}
/* Desktop rows are full-width stripes, so the tint reads lighter than on
   mobile cards — one step darker (violet-200) for clear read/unread contrast. */
@media (min-width: 768px) {
  #inbox-table {
    --unread-bg: #ddd6fe;
  }
}

/* ── Unread row bg via CSS vars — applied globally so HTMX-injected rows are also covered. ── */
#inbox-table tbody tr.row-unread {
  background-color: var(--unread-bg);
}
.dark #inbox-table tbody tr.row-unread {
  background-color: var(--unread-bg-dark);
}
/* ── Desktop only: inset left accent via box-shadow (avoids border-collapse issues).
      Wrapped in min-width guard so the rule does not fire on mobile flex cards,
      where td:first-child is a flex item and the inset shadow appears as a stray
      vertical tick mid-card. ── */
@media (min-width: 768px) {
  #inbox-table tbody tr.row-unread td:first-child {
    box-shadow: inset 3px 0 0 var(--unread-accent);
  }
  .dark #inbox-table tbody tr.row-unread td:first-child {
    box-shadow: inset 3px 0 0 var(--unread-accent-dark);
  }
}
</style>
<div id="inbox-page" class="p-3 sm:p-6">
  {# ── Header row ── #}
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
    <div class="flex items-center gap-3">
      <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100">{{ _("Inbox") }} — {% if filters.presale %}{{ _("Pre Sale Messages") }}{% elif filters.status == 'open' %}{{ _("Open") }}{% elif filters.status == 'in_progress' %}{{ _("In Progress") }}{% elif filters.status == 'waiting_customer' %}{{ _("Waiting") }}{% elif filters.status == 'answered' %}{{ _("Answered") }}{% elif filters.status == 'closed' %}{{ _("Closed") }}{% else %}{{ _("All Tickets") }}{% endif %}</h2>
      {% if last_msg_sync %}
      <span class="text-xs text-gray-400 dark:text-gray-500">
        {{ _("last synced") }} <span data-ts="{{ last_msg_sync }}"></span>
        <a href="#" onclick="inlineSync('messages',this);return false" class="text-brand-500 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 ml-0.5">{{ _("(sync now)") }}</a>
      </span>
      {% endif %}
    </div>
    <div class="flex items-center gap-4">
      <span class="inbox-count text-sm text-gray-500 dark:text-gray-400">{% trans count=total_count %}{{ count }} ticket{% pluralize %}{{ count }} tickets{% endtrans %}</span>
      <div>
        <label class="text-xs font-medium text-gray-500 dark:text-gray-400 mr-2">{{ _("Sort by:") }}</label>
        <select id="sortSelect" onchange="changeSorting()" class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
          <option value="default" {% if filters.sort == 'default' or not filters.sort %}selected{% endif %}>{{ _("Default (Status & Priority)") }}</option>
          <option value="smart_priority" {% if filters.sort == 'smart_priority' %}selected{% endif %}>{{ _("Smart Priority") }}</option>
          <option value="newest_first" {% if filters.sort == 'newest_first' %}selected{% endif %}>{{ _("Newest First") }}</option>
          <option value="oldest_first" {% if filters.sort == 'oldest_first' %}selected{% endif %}>{{ _("Oldest First") }}</option>
          <option value="recently_updated" {% if filters.sort == 'recently_updated' %}selected{% endif %}>{{ _("Recently Updated") }}</option>
        </select>
      </div>
    </div>
  </div>

  {# ── Filters ── #}
  <form id="inbox-filter-form" method="get" action="{{ url_for('inbox') }}" class="flex flex-wrap items-end gap-3 mb-5">
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Status") }}</label>
      <select name="status" id="inbox-status-filter" class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
        <option value="">{{ _("All") }}</option>
        <option value="open" {% if filters.status=='open' %}selected{% endif %}>{{ _("Open") }}</option>
        <option value="in_progress" {% if filters.status=='in_progress' %}selected{% endif %}>{{ _("In Progress") }}</option>
        <option value="waiting_customer" {% if filters.status=='waiting_customer' %}selected{% endif %}>{{ _("Waiting") }}</option>
        <option value="closed" {% if filters.status=='closed' %}selected{% endif %}>{{ _("Closed") }}</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Priority") }}</label>
      <select name="priority" id="inbox-priority-filter" class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
        <option value="">{{ _("All") }}</option>
        <option value="p1" {% if filters.priority=='p1' %}selected{% endif %}>{{ _("Critical") }}</option>
        <option value="p2" {% if filters.priority=='p2' %}selected{% endif %}>{{ _("High") }}</option>
        <option value="p3" {% if filters.priority=='p3' %}selected{% endif %}>{{ _("Normal") }}</option>
        <option value="p4" {% if filters.priority=='p4' %}selected{% endif %}>{{ _("Low") }}</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Tag") }}</label>
      <input type="text" name="tag" id="inbox-tag-filter" value="{{ filters.tag or '' }}" placeholder="{{ _('Tag name') }}"
             class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 w-28 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Product") }}</label>
      <select name="product" id="inbox-product-filter"
              class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none max-w-[180px]">
        <option value="">{{ _("All") }}</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Search") }}</label>
      <input type="text" name="search" id="inbox-search-filter" value="{{ filters.search or '' }}" placeholder="{{ _('Subject, message or domain...') }}"
             class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 w-full sm:w-48 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
    </div>
    <button type="submit" id="inbox-filter-btn"
            class="inline-flex items-center gap-1 px-4 py-1.5 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
      <span class="material-symbols-outlined text-base">filter_list</span>
      {{ _("Filter") }}
    </button>
    {% if filters.status or filters.priority or filters.tag or filters.search or filters.product %}
    <a href="{{ url_for('inbox') }}" id="inbox-clear-filters" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 underline">{{ _("Clear") }}</a>
    {% endif %}
  </form>

  {# ── Ticket table ── #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden overflow-x-auto">
    <table id="inbox-table" class="w-full text-sm">
      <thead>
        <tr class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          <th class="px-2 py-3 w-12 text-center">{{ _("Star") }}</th>
          <th class="px-4 py-3 hidden sm:table-cell">{{ _("ID") }}</th>
          <th class="px-2 py-3 w-10 text-center hidden lg:table-cell">{{ _("Product") }}</th>
          <th class="px-4 py-3">{{ _("Subject") }}</th>
          <th class="px-2 py-3 w-10 text-center hidden md:table-cell">{{ _("Msg") }}</th>
          <th class="px-4 py-3 hidden lg:table-cell">{{ _("PS") }}</th>
          <th class="px-4 py-3">{{ _("Status") }}</th>
          <th class="px-4 py-3 hidden sm:table-cell">{{ _("Priority") }}</th>
          <th class="px-4 py-3 hidden lg:table-cell">{{ _("Support") }}</th>
          <th class="px-4 py-3 hidden md:table-cell">{{ _("Last Activity") }}</th>
        </tr>
      </thead>
      <tbody id="inbox-tbody" class="divide-y divide-gray-100 dark:divide-gray-800">
        {% for ticket in tickets %}
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors {{ 'font-semibold row-unread' if not ticket.is_read else '' }}" data-testid="ticket-row" data-ticket-id="{{ ticket.id }}">
          {# Star toggle #}
          <td data-col="star" class="px-2 py-3 text-center">
            <button onclick="toggleStar({{ ticket.id }}, event)"
                    class="star-btn text-2xl leading-none hover:scale-110 transition-transform cursor-pointer focus:outline-none"
                    data-ticket-id="{{ ticket.id }}"
                    data-starred="{{ 'true' if ticket.is_starred else 'false' }}"
                    title="{{ _('Unstar this ticket') if ticket.is_starred else _('Star this ticket') }}">
              <span class="star-icon">{{ '⭐' if ticket.is_starred else '☆' }}</span>
            </button>
          </td>

          {# ID + external link #}
          <td data-col="id" class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
            <div class="flex items-center gap-1.5">
              <a href="{{ url_for('ticket_get', ticket_id=ticket.id) }}" class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 font-medium">
                #{{ ticket.provider_thread_id or ticket.id }}
              </a>
              {% if ticket.provider_thread_id %}
              <a href="https://addons.prestashop.com/seller-contact.php?ict={{ ticket.provider_thread_id }}"
                 target="_blank" rel="noopener" title="{{ _('Open in Addons') }}"
                 class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300">
                <span class="material-symbols-outlined text-sm">open_in_new</span>
              </a>
              {% endif %}
              {% if not ticket.is_read %}
              <span class="inline-block w-2 h-2 rounded-full bg-brand-500 flex-shrink-0" title="{{ _('Unread') }}"></span>
              {% endif %}
              {% if ticket.has_ai %}
              <span class="material-symbols-outlined text-sm text-purple-400 flex-shrink-0" title="{{ _('AI suggestion available') }}">psychology</span>
              {% endif %}
              {% if ticket.customer_revenue and ticket.customer_revenue|float > 500 %}
              <span class="inline-flex items-center px-1.5 py-0 rounded text-[10px] font-bold bg-amber-100 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 flex-shrink-0" title="{{ _('VIP Customer (&euro;%(revenue)s)', revenue=ticket.customer_revenue) }}">{{ _("VIP") }}</span>
              {% elif ticket.customer_revenue and ticket.customer_revenue|float > 100 %}
              <span class="material-symbols-outlined text-sm text-amber-400 flex-shrink-0" title="{{ _('Valued Customer (&euro;%(revenue)s)', revenue=ticket.customer_revenue) }}">military_tech</span>
              {% endif %}
              {% if ticket.is_new %}
              <span class="inline-flex items-center px-1.5 py-0 rounded text-[10px] font-bold bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300 flex-shrink-0" title="{{ _('First message — no reply sent yet') }}">{{ _("New") }}</span>
              {% endif %}
              {% if ticket.is_presale %}
              <span class="inline-flex items-center px-1.5 py-0 rounded text-[10px] font-medium bg-blue-100 dark:bg-blue-500/15 text-blue-700 dark:text-blue-300 flex-shrink-0" title="{{ _('Pre-sale — no order linked') }}">{{ _("Pre-sale") }}</span>
              {% endif %}
              {% if ticket.is_autoresponded %}
              <span class="inline-flex items-center px-1.5 py-0 rounded text-[10px] font-semibold bg-amber-100 dark:bg-amber-500/15 text-amber-700 dark:text-amber-300 flex-shrink-0" title="{{ _('Auto-response sent — still needs a human reply') }}">{{ _("Auto-replied") }}</span>
              {% endif %}
            </div>
          </td>

          {# Product (icon only, tooltip shows name) #}
          <td data-col="product" class="px-2 py-3 text-gray-600 dark:text-gray-400 w-12 text-center hidden lg:table-cell">
            {% if ticket.product_type == 'business_care' %}
              {% if ticket.id_product %}
              <a href="{{ url_for('inbox', product=ticket.id_product) }}" title="{{ ticket.product_name or '' }}">
                <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 flex items-center justify-center inline-flex" title="{{ ticket.product_name or '' }}">
                  <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400">BC</span>
                </div>
              </a>
              {% else %}
              <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 flex items-center justify-center inline-flex" title="{{ ticket.product_name or '' }}">
                <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400">BC</span>
              </div>
              {% endif %}
            {% elif ticket.pico_url %}
              {% if ticket.id_product %}
              <a href="{{ url_for('inbox', product=ticket.id_product) }}" title="{{ ticket.product_name or '' }}">
                <img src="{{ ticket.pico_url }}" alt="{{ ticket.product_name or '' }}" class="w-8 h-8 rounded-lg inline-block"
                     loading="lazy" onerror="this.style.display='none'" title="{{ ticket.product_name or '' }}">
              </a>
              {% else %}
              <img src="{{ ticket.pico_url }}" alt="{{ ticket.product_name or '' }}" class="w-8 h-8 rounded-lg inline-block"
                   loading="lazy" onerror="this.style.display='none'" title="{{ ticket.product_name or '' }}">
              {% endif %}
            {% else %}
              <span class="text-xs text-gray-400 dark:text-gray-500" title="{{ ticket.product_name or '' }}">-</span>
            {% endif %}
          </td>

          {# Subject + snippet #}
          <td data-col="subject" class="px-4 py-3 max-w-xs">
            {# Mobile-only: ID + badges inline above subject #}
            <div class="flex items-center gap-1 sm:hidden mb-0.5 flex-wrap">
              <a href="{{ url_for('ticket_get', ticket_id=ticket.id) }}" class="text-brand-600 dark:text-brand-400 text-xs font-medium">#{{ ticket.provider_thread_id or ticket.id }}</a>
              {% if not ticket.is_read %}<span class="inline-block w-2 h-2 rounded-full bg-brand-500 flex-shrink-0" title="{{ _('Unread') }}"></span>{% endif %}
              {% if ticket.has_ai %}<span class="material-symbols-outlined text-purple-400 flex-shrink-0" style="font-size:11px" title="{{ _('AI suggestion') }}">psychology</span>{% endif %}
              {% if ticket.customer_revenue and ticket.customer_revenue|float > 500 %}<span class="inline-flex items-center px-1 rounded text-[9px] font-bold bg-amber-100 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300">{{ _("VIP") }}</span>{% elif ticket.customer_revenue and ticket.customer_revenue|float > 100 %}<span class="material-symbols-outlined text-amber-400 flex-shrink-0" style="font-size:11px">military_tech</span>{% endif %}
              {% if ticket.is_new %}<span class="inline-flex items-center px-1 rounded text-[9px] font-bold bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300">{{ _("New") }}</span>{% endif %}
              {% if ticket.is_presale %}<span class="inline-flex items-center px-1 rounded text-[9px] font-medium bg-blue-100 dark:bg-blue-500/15 text-blue-700 dark:text-blue-300">{{ _("Pre-sale") }}</span>{% endif %}
              {% if ticket.is_autoresponded %}<span class="inline-flex items-center px-1 rounded text-[9px] font-semibold bg-amber-100 dark:bg-amber-500/15 text-amber-700 dark:text-amber-300" title="{{ _('Auto-response sent — still needs a human reply') }}">{{ _("Auto-replied") }}</span>{% endif %}
              {% if ticket.customer_website %}<span class="mobile-domain-hint" title="{{ ticket.customer_website }}"><span class="material-symbols-outlined" style="font-size:11px">language</span><span class="truncate">{{ (ticket.customer_website | replace('https://', '') | replace('http://', '')).split('/')[0] }}</span></span>{% endif %}
            </div>
            <div class="flex items-center gap-1.5 min-w-0">
              <a href="{{ url_for('ticket_get', ticket_id=ticket.id) }}" class="inbox-card-link text-gray-900 dark:text-gray-100 hover:text-brand-600 dark:hover:text-brand-400 block truncate min-w-0">
                {{ ticket.subject }}
              </a>
              {% if ticket.customer_website %}
              <span class="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0 rounded text-[10px] font-medium bg-sky-100 dark:bg-sky-500/10 text-sky-700 dark:text-sky-300 flex-shrink-0 max-w-[10rem]" title="{{ ticket.customer_website }}"><span class="material-symbols-outlined" style="font-size:11px">language</span><span class="truncate">{{ (ticket.customer_website | replace('https://', '') | replace('http://', '')).split('/')[0] }}</span></span>
              {% endif %}
            </div>
            {% if ticket.latest_topic_label %}
            <span class="inline-flex items-center px-1.5 py-0 rounded text-[10px] font-medium bg-purple-100 dark:bg-purple-500/10 text-purple-700 dark:text-purple-300 cursor-default"
                  {% if ticket.latest_topic_summary %}title="{{ ticket.latest_topic_summary }}"{% endif %}>{{ ticket.latest_topic_label }}</span>
            {% endif %}
            {% if ticket.last_snippet %}
            <p class="text-xs text-gray-400 dark:text-gray-500 truncate mt-0.5 font-normal">{{ ticket.last_snippet }}</p>
            {% endif %}
          </td>

          {# Last message preview #}
          <td data-col="msg" class="px-2 py-3 text-center w-10 hidden md:table-cell">
            {% if ticket.last_msg_direction %}
            <div class="relative group/msg inline-flex">
              {% if ticket.last_msg_direction == 'inbound' %}
              <span class="material-symbols-outlined text-base text-blue-500 cursor-default" title="{{ _('Last: inbound') }}">call_received</span>
              {% else %}
              <span class="material-symbols-outlined text-base text-green-500 cursor-default" title="{{ _('Last: outbound') }}">call_made</span>
              {% endif %}
              <div class="hidden group-hover/msg:block absolute left-1/2 -translate-x-1/2 top-full mt-1 z-30 w-72 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-3 text-left">
                <div class="flex items-center gap-2 mb-1.5">
                  {% if ticket.last_msg_direction == 'inbound' %}
                  <span class="inline-flex items-center gap-1 text-[11px] font-medium text-blue-600 dark:text-blue-400"><span class="material-symbols-outlined" style="font-size:13px">call_received</span>{{ _("Inbound") }}</span>
                  {% else %}
                  <span class="inline-flex items-center gap-1 text-[11px] font-medium text-green-600 dark:text-green-400"><span class="material-symbols-outlined" style="font-size:13px">call_made</span>{{ _("Outbound") }}</span>
                  {% endif %}
                  <span class="text-[11px] text-gray-400 dark:text-gray-500">{{ ticket.last_msg_author }}</span>
                  <span class="text-[11px] text-gray-400 dark:text-gray-500 ml-auto">{{ ticket.last_msg_date }}</span>
                </div>
                <p class="text-xs text-gray-600 dark:text-gray-400 whitespace-pre-wrap break-words leading-relaxed">{{ ticket.last_msg_body }}</p>
              </div>
            </div>
            {% else %}
            <span class="text-xs text-gray-300 dark:text-gray-600">-</span>
            {% endif %}
          </td>

          {# PS Version #}
          <td data-col="ps" class="px-4 py-3 text-gray-600 dark:text-gray-400 whitespace-nowrap hidden lg:table-cell">{{ ticket.ps_version or '-' }}</td>

          {# Status badge #}
          <td data-col="status" class="px-4 py-3 whitespace-nowrap">
            {% if ticket.is_review_request and ticket.status == 'closed' %}
              <span class="inline-flex items-center gap-0.5 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-300">
                <span class="material-symbols-outlined" style="font-size:12px">favorite</span>{{ _("Thanks") }}
              </span>
            {% elif ticket.status == 'open' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-400">{{ _("Open") }}</span>
            {% elif ticket.status == 'in_progress' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-400">{{ _("In Progress") }}</span>
            {% elif ticket.status == 'waiting_customer' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-400">{{ _("Waiting") }}</span>
            {% elif ticket.status == 'answered' %}
              <span class="inline-flex items-center gap-0.5 px-2 py-0.5 rounded-full text-xs font-medium bg-teal-100 dark:bg-teal-500/10 text-teal-800 dark:text-teal-300"><span class="material-symbols-outlined" style="font-size:11px">check_circle</span>{{ _("Answered") }}</span>
            {% elif ticket.status == 'closed' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400">{{ _("Closed") }}</span>
            {% else %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300">{{ ticket.status }}</span>
            {% endif %}
          </td>

          {# Priority badge #}
          <td data-col="priority" class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
            {% if ticket.priority == 'p1' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-500/10 text-red-800 dark:text-red-400">{{ _("Critical") }}</span>
            {% elif ticket.priority == 'p2' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-400">{{ _("High") }}</span>
            {% elif ticket.priority == 'p3' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-400">{{ _("Normal") }}</span>
            {% else %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">{{ _("Low") }}</span>
            {% endif %}
          </td>

          {# Support status #}
          <td data-col="support" class="px-4 py-3 whitespace-nowrap hidden lg:table-cell">
            {% if ticket.is_support_expired %}
              <span class="inline-flex items-center gap-1 text-xs text-red-600 dark:text-red-400">
                <span class="material-symbols-outlined text-sm">error</span>{{ _("Expired") }}
              </span>
            {% else %}
              <span class="inline-flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
                <span class="material-symbols-outlined text-sm">check_circle</span>{{ _("Active") }}
              </span>
            {% endif %}
          </td>

          {# Last activity #}
          <td data-col="date" class="px-4 py-3 text-gray-500 dark:text-gray-400 whitespace-nowrap text-xs hidden md:table-cell">
            {{ ticket.last_activity_at|localdt('%Y-%m-%d %H:%M') if ticket.last_activity_at else '-' }}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="10" class="px-4 py-12 text-center">
            {% if not has_api_key and not is_filtered %}
            <span class="material-symbols-outlined text-4xl text-blue-400 dark:text-blue-500 mb-2 block">key</span>
            <p class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">{{ _("Connect your PrestaShop Addons account") }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">{{ _("Import your support threads by linking your Addons API key.") }}</p>
            <a href="{{ url_for('onboarding.onboard_api_key') }}" class="inline-flex items-center gap-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
              {{ _("Set up Addons integration →") }}
            </a>
            {% else %}
            <span class="material-symbols-outlined text-4xl text-gray-300 dark:text-gray-600 mb-2 block">{{ empty_state.icon }}</span>
            <p class="text-sm text-gray-500 dark:text-gray-400">{{ empty_state.title }}</p>
            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{ empty_state.hint }}</p>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {# ── Pagination ── #}
  {% if total_pages > 1 %}
  <div id="inbox-pagination" class="flex flex-col sm:flex-row items-center sm:justify-between gap-3 mt-4">
    <p class="text-xs text-gray-500 dark:text-gray-400">
      {% trans %}Page {{ page }} of {{ total_pages }}{% endtrans %}
    </p>
    <div class="flex items-center gap-1">
      {% if page > 1 %}
      <a href="{{ url_for('inbox', status=filters.status, priority=filters.priority, tag=filters.tag, search=filters.search, product=filters.product, sort=filters.sort, page=page-1) }}"
         class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
        <span class="material-symbols-outlined text-base">chevron_left</span>
      </a>
      {% endif %}

      {% for p in range(1, total_pages + 1) %}
        {% if p == page %}
        <span class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-brand-600 rounded-lg">{{ p }}</span>
        {% elif p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
        <a href="{{ url_for('inbox', status=filters.status, priority=filters.priority, tag=filters.tag, search=filters.search, product=filters.product, sort=filters.sort, page=p) }}"
           class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">{{ p }}</a>
        {% elif p == 2 and page > 4 %}
        <span class="px-1 text-gray-400 dark:text-gray-500">&hellip;</span>
        {% elif p == total_pages - 1 and page < total_pages - 3 %}
        <span class="px-1 text-gray-400 dark:text-gray-500">&hellip;</span>
        {% endif %}
      {% endfor %}

      {% if page < total_pages %}
      <a href="{{ url_for('inbox', status=filters.status, priority=filters.priority, tag=filters.tag, search=filters.search, product=filters.product, sort=filters.sort, page=page+1) }}"
         class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
        <span class="material-symbols-outlined text-base">chevron_right</span>
      </a>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>

{% endblock %}