{% extends "base.html" %}
{% block title %}{{ _("Products") }}{% endblock %}
{% block content %}
<div id="products-page" class="p-3 sm:p-6">
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
    <div class="flex items-center gap-3">
      <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
        <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">inventory_2</span>
        {{ _("Products") }}
      </h2>
      {% if last_product_sync %}
      <span class="text-xs text-gray-400 dark:text-gray-500">
        {{ _("last synced") }} <span data-ts="{{ last_product_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>
    <span class="text-sm text-gray-500 dark:text-gray-400" id="product-count">{% trans count=products|length %}{{ count }} product{% pluralize %}{{ count }} products{% endtrans %}</span>
  </div>

  {# Filters bar #}
  <div class="mb-4 flex flex-wrap items-center gap-4">
    <div class="relative max-w-sm flex-1 min-w-[200px]">
      <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 text-lg">search</span>
      <input type="text" id="product-search" placeholder="{{ _('Filter by name...') }}"
             class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg 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 transition-colors" />
    </div>
    <div class="flex items-center gap-1" id="status-filter">
      <button type="button" data-filter="all"
              class="status-btn px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors">
        {{ _("All") }}
      </button>
      <button type="button" data-filter="confirm"
              class="status-btn px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors">
        <span class="inline-block w-1.5 h-1.5 rounded-full bg-green-500 mr-1"></span>{{ _("Active") }}
      </button>
      <button type="button" data-filter="declined"
              class="status-btn px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors">
        <span class="inline-block w-1.5 h-1.5 rounded-full bg-orange-500 mr-1"></span>{{ _("Declined") }}
      </button>
    </div>
  </div>

  {% if products %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
    <div class="overflow-x-auto rounded-xl">
      <table class="w-full text-sm min-w-[700px]" id="products-table">
        <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
          <tr>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="name">
              {{ _("Product") }} <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none hidden md:table-cell" data-sort="type">
              {{ _("Type") }} <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="status">
              {{ _("Status") }} <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none hidden lg:table-cell" data-sort="version">
              {{ _("Version") }} <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none hidden md:table-cell" data-sort="rating">
              {{ _("Rating") }} <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide hidden xl:table-cell">{{ _("PS Compat.") }}</th>
            <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="price">
              {{ _("Price") }} <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none hidden sm:table-cell" data-sort="tickets">
              {{ _("Open Tickets") }} <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none hidden lg:table-cell" data-sort="load">
              {{ _("Support 30d") }} <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none hidden lg:table-cell" data-sort="guides">
              {{ _("Guides") }} <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _("Module ZIP") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _("Slug") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide hidden xl:table-cell">{{ _("Reference") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none hidden lg:table-cell" data-sort="updated">
              {{ _("Last Update") }} <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide hidden md:table-cell">{{ _("Actions") }}</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800" id="products-tbody">
          {% for p in products %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors product-row"
              data-name="{{ p.name|lower }}"
              data-type="{{ (p.product_type or '')|lower }}"
              data-status="{{ (p.status or '')|lower }}"
              data-version="{{ p.current_version or '' }}"
              data-rating="{{ p.avg_rating or '0' }}"
              data-price="{{ p.price or '0' }}"
              data-tickets="{{ p.open_tickets }}"
              data-load="{{ p.tickets_30d + p.msgs_30d }}"
              data-guides="{{ guides_count.get(p.id, 0) }}"
              data-candidates="{{ candidates_count.get(p.id, 0) }}"
              data-updated="{{ p.last_update_at.isoformat() if p.last_update_at else '' }}">

            {# Product: icon + name #}
            <td class="px-4 py-3">
              <div class="flex items-center gap-3">
                {% if p.product_type == 'business_care' %}
                <div class="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 flex items-center justify-center flex-shrink-0 shadow-sm">
                  <span class="text-sm font-bold text-indigo-600 dark:text-indigo-400">BC</span>
                </div>
                {% elif p.pico_url %}
                <img src="{{ p.pico_url }}" alt="" class="w-10 h-10 rounded-lg shadow-sm" loading="lazy" />
                {% else %}
                <div class="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                  <span class="material-symbols-outlined text-gray-400 dark:text-gray-500 text-xl">extension</span>
                </div>
                {% endif %}
                <div>
                  <span class="font-medium text-gray-900 dark:text-gray-100">{{ p.name }}</span>
                  {% if p.is_online == false %}
                  <span class="ml-1.5 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">{{ _("offline") }}</span>
                  {% endif %}
                </div>
              </div>
            </td>

            {# Type badge #}
            <td class="px-4 py-3 hidden md:table-cell">
              {% if p.product_type %}
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">{{ p.product_type }}</span>
              {% else %}
              <span class="text-gray-400 dark:text-gray-500">--</span>
              {% endif %}
            </td>

            {# Status badge: green=confirm, orange=declined #}
            <td class="px-4 py-3">
              {% if p.status %}
                {% if p.status == 'confirm' %}
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400">
                  <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
                  {{ _("Active") }}
                </span>
                {% elif p.status == 'declined' %}
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-orange-50 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400">
                  <span class="w-1.5 h-1.5 rounded-full bg-orange-500"></span>
                  {{ _("Declined") }}
                </span>
                {% else %}
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
                  <span class="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500"></span>
                  {{ p.status }}
                </span>
                {% endif %}
              {% else %}
              <span class="text-gray-400 dark:text-gray-500">--</span>
              {% endif %}
            </td>

            {# Version #}
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400 hidden lg:table-cell">{{ p.current_version or '--' }}</td>

            {# Rating #}
            <td class="px-4 py-3 hidden md:table-cell">
              {% if p.avg_rating %}
              <div class="flex items-center gap-1">
                <span class="material-symbols-outlined text-yellow-500 text-base" style="font-variation-settings: 'FILL' 1;">star</span>
                <span class="text-gray-700 dark:text-gray-300 font-medium">{{ p.avg_rating }}</span>
                {% if p.total_ratings %}
                <span class="text-gray-400 dark:text-gray-500 text-xs">({{ p.total_ratings }})</span>
                {% endif %}
              </div>
              {% else %}
              <span class="text-gray-400 dark:text-gray-500">--</span>
              {% endif %}
            </td>

            {# PS Compatibility #}
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-xs hidden xl:table-cell">
              {% if p.compatibility_min or p.compatibility_max %}
                {{ p.compatibility_min or '?' }} &ndash; {{ p.compatibility_max or '?' }}
              {% else %}
                <span class="text-gray-400 dark:text-gray-500">--</span>
              {% endif %}
            </td>

            {# Price #}
            <td class="px-4 py-3 text-right text-gray-700 dark:text-gray-300 font-medium whitespace-nowrap">{{ p.display_price or p.price or '--' }}</td>

            {# Open Tickets #}
            <td class="px-4 py-3 text-center hidden sm:table-cell">
              {% if p.open_tickets > 0 %}
              <a href="{{ url_for('inbox') }}?product={{ p.provider_product_id }}"
                 class="inline-flex items-center justify-center min-w-[28px] px-2 py-0.5 rounded-full text-xs font-semibold bg-brand-50 dark:bg-brand-500/10 text-brand-700 dark:text-brand-300 hover:bg-brand-100 dark:hover:bg-brand-500/20 transition-colors">
                {{ p.open_tickets }}
              </a>
              {% else %}
              <span class="text-gray-400 dark:text-gray-500 text-xs">0</span>
              {% endif %}
            </td>

            {# Support Load 30d #}
            <td class="px-4 py-3 text-center whitespace-nowrap hidden lg:table-cell">
              {% set total_load = p.tickets_30d + p.msgs_30d %}
              {% if total_load > 0 %}
                {% if total_load >= 10 %}
                  {% set bg = 'bg-red-50 dark:bg-red-500/10' %}{% set text = 'text-red-700 dark:text-red-400' %}
                {% elif total_load >= 5 %}
                  {% set bg = 'bg-orange-50 dark:bg-orange-500/10' %}{% set text = 'text-orange-700 dark:text-orange-400' %}
                {% else %}
                  {% set bg = 'bg-blue-50 dark:bg-blue-500/10' %}{% set text = 'text-blue-700 dark:text-blue-400' %}
                {% endif %}
                <div class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded {{ bg }}">
                  {% set n_tickets_30d = p.tickets_30d %}{% set n_msgs_30d = p.msgs_30d %}
                  <span class="text-xs font-semibold {{ text }}" title="{% trans %}{{ n_tickets_30d }} new tickets, {{ n_msgs_30d }} inbound messages in last 30 days{% endtrans %}">
                    {{ p.tickets_30d }}t / {{ p.msgs_30d }}m
                  </span>
                </div>
              {% else %}
              <span class="text-gray-400 dark:text-gray-500 text-xs">--</span>
              {% endif %}
            </td>

            {# Guides #}
            <td class="px-4 py-3 text-center hidden lg:table-cell">
              <span class="guide-count" data-product-id="{{ p.id }}">
                {% set gc = guides_count.get(p.id, 0) %}
                {% set cc = candidates_count.get(p.id, 0) %}
                {% if gc > 0 %}
                  <a href="{{ url_for('guides_list') }}?product={{ p.id }}"
                     class="inline-flex items-center justify-center min-w-[24px] px-1.5 py-0.5 rounded-full text-xs font-semibold bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-400 hover:bg-indigo-100 dark:hover:bg-indigo-500/20 transition-colors">{{ gc }}</a>
                  {% if cc > 0 %}
                  <span class="ms-1 inline-flex items-center justify-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold border border-amber-300 dark:border-amber-500/40 text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10"
                        title="{% trans %}{{ cc }} candidate topic(s) not yet documented{% endtrans %}">+{{ cc }}</span>
                  {% endif %}
                {% elif cc > 0 %}
                  <span class="inline-flex items-center justify-center px-1.5 py-0.5 rounded-full text-xs font-semibold border border-amber-300 dark:border-amber-500/40 text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10"
                        title="{% trans %}{{ cc }} candidate topic(s) detected from resolved tickets, not yet covered by an existing guide or doc page{% endtrans %}">{% trans %}{{ cc }} possible{% endtrans %}</span>
                {% else %}
                  <span class="text-gray-400 dark:text-gray-500 text-xs">0</span>
                {% endif %}
              </span>
              <button class="btn-candidates inline-flex items-center justify-center w-6 h-6 ms-1 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-400 dark:hover:border-gray-500 transition-colors"
                      data-product-id="{{ p.id }}"
                      data-product-name="{{ p.name|e }}"
                      title="{{ _('Find guide candidates') }}">&#9889;</button>
            </td>

            {# Module ZIP upload #}
            <td class="px-4 py-3" data-product-id="{{ p.id }}" data-product-version="{{ p.current_version or '' }}">
              <div class="module-release-cell" id="release-cell-{{ p.id }}">
                {% set rel = p.releases[0] if p.releases else None %}
                {% if rel %}
                <div class="flex items-center gap-1.5">
                  <span class="text-xs text-gray-700 dark:text-gray-300 font-medium" title="{{ rel.original_filename }}">v{{ rel.version or '?' }}</span>
                  {% set rel_filename = rel.original_filename %}
                  <a href="/api/products/{{ p.id }}/download-latest" title="{% trans %}Download {{ rel_filename }}{% endtrans %}"
                     class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300">
                    <span class="material-symbols-outlined text-sm">download</span>
                  </a>
                  {% if has_feature('module_upload') %}
                  <button type="button" onclick='openUploadForm({{ p.id }}, {{ (p.current_version or "") | tojson }})'
                          class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" title="{{ _('Replace ZIP') }}">
                    <span class="material-symbols-outlined text-sm">upload</span>
                  </button>
                  {% else %}
                  <button type="button" onclick='showUpgradeModal("premium", {{ _("Module Upload")|tojson }})'
                          class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" title="{{ _('Replace ZIP (Premium)') }}">
                    <span class="material-symbols-outlined text-sm">upload</span>
                  </button>
                  {% endif %}
                </div>
                {% else %}
                {% if has_feature('module_upload') %}
                <button type="button" onclick='openUploadForm({{ p.id }}, {{ (p.current_version or "") | tojson }})'
                        class="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 border border-dashed border-gray-300 dark:border-gray-600 rounded-lg hover:border-brand-400 dark:hover:border-brand-500 hover:text-brand-600 dark:hover:text-brand-400 transition-colors">
                  <span class="material-symbols-outlined text-sm">upload_file</span>
                  {{ _("Upload ZIP") }}
                </button>
                {% else %}
                <button type="button" onclick='showUpgradeModal("premium", {{ _("Module Upload")|tojson }})'
                        class="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 border border-dashed border-gray-300 dark:border-gray-600 rounded-lg hover:border-brand-400 dark:hover:border-brand-500 hover:text-brand-600 dark:hover:text-brand-400 transition-colors">
                  <span class="material-symbols-outlined text-sm">upload_file</span>
                  {{ _("Upload ZIP") }}
                </button>
                {% endif %}
                {% endif %}
              </div>
            </td>

            {# Module Slug (inline edit — hidden for bundles) #}
            <td class="px-4 py-3 whitespace-nowrap">
              {% if p.product_type == 'bundle' %}
                <span class="text-gray-400 dark:text-gray-500 text-xs">--</span>
              {% else %}
              <div class="flex items-center gap-1">
                <input type="text" value="{{ p.module_slug or '' }}" placeholder="{{ _('e.g. mymodule') }}"
                       data-product-id="{{ p.id }}" class="slug-input border border-gray-200 dark:border-gray-600 rounded text-xs px-2 py-1 w-28 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-brand-500 focus:border-brand-500 outline-none"
                       title="{{ _('Module slug for /modules/{slug}/logo.png check') }}">
                <button type="button" class="slug-save hidden text-green-600 dark:text-green-400 text-xs font-medium hover:text-green-800 dark:hover:text-green-300" data-product-id="{{ p.id }}">{{ _("Save") }}</button>
              </div>
              {% endif %}
            </td>

            {# Product Reference (inline edit — all product types including bundles) #}
            <td class="px-4 py-3 whitespace-nowrap hidden xl:table-cell">
              <div class="flex items-center gap-1">
                <input type="text" value="{{ p.reference or '' }}" placeholder="{{ _('e.g. mymodule') }}"
                       data-product-id="{{ p.id }}" class="ref-input border border-gray-200 dark:border-gray-600 rounded text-xs px-2 py-1 w-28 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-brand-500 focus:border-brand-500 outline-none"
                       title="{{ _('PS module reference for CSV export') }}">
                <button type="button" class="ref-save hidden text-green-600 dark:text-green-400 text-xs font-medium hover:text-green-800 dark:hover:text-green-300" data-product-id="{{ p.id }}">{{ _("Save") }}</button>
              </div>
            </td>

            {# Last Update #}
            <td class="px-4 py-3 whitespace-nowrap hidden lg:table-cell">
              {% if p.product_type == 'bundle' %}
                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">{{ _("depends on bundle products") }}</span>
              {% elif p.last_update_at %}
                <div class="flex items-center gap-1.5">
                  <span class="text-gray-600 dark:text-gray-400 text-xs">{{ p.last_update_at|localdt('%Y-%m-%d') }}</span>
                  {% if p.days_since_update is not none %}
                    {% set days_ago = p.days_since_update %}
                    {% if days_ago <= 30 %}
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400" title="{% trans %}{{ days_ago }} days ago{% endtrans %}">{{ days_ago }}d</span>
                    {% elif days_ago <= 60 %}
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-orange-100 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400" title="{% trans %}{{ days_ago }} days ago{% endtrans %}">{{ days_ago }}d</span>
                    {% else %}
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 dark:bg-red-500/10 text-red-700 dark:text-red-400" title="{% trans %}{{ days_ago }} days ago{% endtrans %}">{{ days_ago }}d</span>
                    {% endif %}
                  {% endif %}
                </div>
              {% else %}
              <span class="text-gray-400 dark:text-gray-500 text-xs">--</span>
              {% endif %}
            </td>

            {# Actions #}
            <td class="px-4 py-3 text-right hidden md:table-cell">
              <div class="inline-flex items-center gap-1.5">
                <button type="button"
                        class="btn-knowledge inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-teal-700 dark:text-teal-300 bg-white dark:bg-gray-800 border border-teal-300 dark:border-teal-500/40 rounded-lg hover:bg-teal-50 dark:hover:bg-teal-500/10 transition-colors"
                        data-product-id="{{ p.id }}"
                        data-product-name="{{ p.name|e }}"
                        title="{{ _('View / edit module knowledge') }}">
                  <span class="material-symbols-outlined text-sm">psychology</span>
                  {{ _("Knowledge") }}
                </button>
                <button type="button"
                   onclick="copyAndFlash('https://addons.prestashop.com/contact-form.php?id_product={{ p.provider_product_id }}', this)"
                   class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-violet-700 dark:text-violet-300 bg-white dark:bg-gray-800 border border-violet-300 dark:border-violet-500/40 rounded-lg hover:bg-violet-50 dark:hover:bg-violet-500/10 transition-colors"
                   title="{{ _('Copy the Addons support-request link for this product') }}">
                  <span class="material-symbols-outlined text-sm">contact_support</span>
                  {{ _("Support") }}
                </button>
                <a href="https://addons.prestashop.com/en/-/{{ p.provider_product_id }}-.html"
                   target="_blank" rel="noopener noreferrer"
                   class="inline-flex items-center gap-1 px-3 py-1.5 text-xs 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"
                   title="{{ _('View on Addons Marketplace') }}">
                  <span class="material-symbols-outlined text-sm">open_in_new</span>
                  Addons
                </a>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
    <span class="material-symbols-outlined text-4xl text-gray-300 dark:text-gray-600 mb-3 block">inventory_2</span>
    <p class="text-gray-500 dark:text-gray-400 text-sm">{{ _("No products synced yet.") }}</p>
    <p class="text-gray-400 dark:text-gray-500 text-xs mt-1">{{ _("Products are synced automatically when you run a sync.") }}</p>
  </div>
  {% endif %}
</div>

<script>
(function() {
  var STORAGE_KEY = 'products_status_filter';
  var activeFilter = localStorage.getItem(STORAGE_KEY) || 'all';
  var searchInput = document.getElementById('product-search');
  var PRODUCT_LABEL_SINGULAR = {{ _("product") | tojson }};
  var PRODUCT_LABEL_PLURAL = {{ _("products") | tojson }};

  function applyFilters() {
    var q = (searchInput ? searchInput.value : '').toLowerCase();
    document.querySelectorAll('.product-row').forEach(function(row) {
      var matchesName = row.dataset.name.includes(q);
      var matchesStatus = activeFilter === 'all' || row.dataset.status === activeFilter;
      row.style.display = (matchesName && matchesStatus) ? '' : 'none';
    });
    // Update visible count
    var visible = document.querySelectorAll('.product-row[style=""], .product-row:not([style])').length;
    var countEl = document.getElementById('product-count');
    if (countEl) {
      var total = document.querySelectorAll('.product-row').length;
      countEl.textContent = (activeFilter !== 'all' || q) ? visible + ' / ' + total + ' ' + PRODUCT_LABEL_PLURAL : total + ' ' + (total !== 1 ? PRODUCT_LABEL_PLURAL : PRODUCT_LABEL_SINGULAR);
    }
  }

  function setActiveButton(filter) {
    document.querySelectorAll('.status-btn').forEach(function(btn) {
      if (btn.dataset.filter === filter) {
        btn.className = 'status-btn px-3 py-1.5 text-xs font-medium rounded-lg border border-brand-200 bg-brand-50 dark:bg-brand-500/10 text-brand-700 dark:text-brand-300 transition-colors';
      } else {
        btn.className = 'status-btn px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors';
      }
    });
  }

  // Status filter buttons
  document.querySelectorAll('.status-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      activeFilter = this.dataset.filter;
      localStorage.setItem(STORAGE_KEY, activeFilter);
      setActiveButton(activeFilter);
      applyFilters();
    });
  });

  // Search filter
  if (searchInput) {
    searchInput.addEventListener('input', applyFilters);
  }

  // Apply saved filter on page load
  setActiveButton(activeFilter);
  applyFilters();

  // Sortable columns
  var currentSort = { col: null, asc: true };
  var tbody = document.getElementById('products-tbody');
  if (!tbody) return;

  document.querySelectorAll('th[data-sort]').forEach(function(th) {
    th.addEventListener('click', function() {
      var col = this.dataset.sort;
      if (currentSort.col === col) {
        currentSort.asc = !currentSort.asc;
      } else {
        currentSort.col = col;
        currentSort.asc = true;
      }

      // Update arrow indicators
      document.querySelectorAll('.sort-arrow').forEach(function(el) { el.textContent = ''; });
      this.querySelector('.sort-arrow').textContent = currentSort.asc ? ' \u25B2' : ' \u25BC';

      var rows = Array.from(tbody.querySelectorAll('.product-row'));
      rows.sort(function(a, b) {
        var av, bv;
        switch (col) {
          case 'name':
            av = a.dataset.name; bv = b.dataset.name;
            return currentSort.asc ? av.localeCompare(bv) : bv.localeCompare(av);
          case 'type':
            av = a.dataset.type; bv = b.dataset.type;
            return currentSort.asc ? av.localeCompare(bv) : bv.localeCompare(av);
          case 'status':
            av = a.dataset.status; bv = b.dataset.status;
            return currentSort.asc ? av.localeCompare(bv) : bv.localeCompare(av);
          case 'version':
            av = a.dataset.version; bv = b.dataset.version;
            return currentSort.asc ? av.localeCompare(bv, undefined, {numeric: true}) : bv.localeCompare(av, undefined, {numeric: true});
          case 'rating':
            av = parseFloat(a.dataset.rating) || 0; bv = parseFloat(b.dataset.rating) || 0;
            return currentSort.asc ? av - bv : bv - av;
          case 'price':
            av = parseFloat(a.dataset.price) || 0; bv = parseFloat(b.dataset.price) || 0;
            return currentSort.asc ? av - bv : bv - av;
          case 'tickets':
            av = parseInt(a.dataset.tickets) || 0; bv = parseInt(b.dataset.tickets) || 0;
            return currentSort.asc ? av - bv : bv - av;
          case 'load':
            av = parseInt(a.dataset.load) || 0; bv = parseInt(b.dataset.load) || 0;
            return currentSort.asc ? av - bv : bv - av;
          case 'guides':
            av = (parseInt(a.dataset.guides) || 0) * 10000 + (parseInt(a.dataset.candidates) || 0);
            bv = (parseInt(b.dataset.guides) || 0) * 10000 + (parseInt(b.dataset.candidates) || 0);
            return currentSort.asc ? av - bv : bv - av;
          case 'updated':
            av = a.dataset.updated || '0000'; bv = b.dataset.updated || '0000';
            return currentSort.asc ? av.localeCompare(bv) : bv.localeCompare(av);
          default:
            return 0;
        }
      });
      rows.forEach(function(row) { tbody.appendChild(row); });
    });
  });
})();
</script>

{# ── Guide Candidates Panel ── #}
<div id="candidates-panel" style="position:fixed;right:0;top:0;width:480px;height:100vh;z-index:50;background:#fff;border-left:1px solid #e5e7eb;box-shadow:-4px 0 24px rgba(0,0,0,.10);flex-direction:column;">
  <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e5e7eb;flex-shrink:0;">
    <div style="display:flex;align-items:center;gap:8px;min-width:0;">
      <h3 id="panel-title" style="font-size:14px;font-weight:600;color:#111827;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ _("Guide Candidates") }}</h3>
      <span style="flex-shrink:0;display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#fef3c7;color:#b45309;">{{ _("beta") }}</span>
    </div>
    <button id="panel-close" style="border:none;background:none;cursor:pointer;color:#6b7280;font-size:20px;line-height:1;padding:4px;">&#x2715;</button>
  </div>
  <div id="panel-body" style="flex:1;overflow-y:auto;padding:16px 20px;">
    <div id="panel-loading" style="display:none;text-align:center;padding:40px 0;color:#6b7280;font-size:13px;">
      <div style="display:inline-block;width:20px;height:20px;border:2px solid #e5e7eb;border-top-color:#6366f1;border-radius:50%;animation:spin .7s linear infinite;margin-bottom:8px;"></div>
      <div>{{ _("Searching for candidates…") }}</div>
    </div>
    <div id="panel-empty" style="display:none;text-align:center;padding:40px 0;color:#9ca3af;font-size:13px;">{{ _("No guide candidates found.") }}</div>
    <div id="panel-list"></div>
  </div>
</div>
<div id="panel-overlay" style="display:none;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.2);"></div>

<style>
@keyframes spin { to { transform: rotate(360deg); } }
#candidates-panel { display: none; }
#candidates-panel.open { display: flex !important; }
</style>

<script>
(function() {
  var panel = document.getElementById('candidates-panel');
  var overlay = document.getElementById('panel-overlay');
  var panelTitle = document.getElementById('panel-title');
  var panelLoading = document.getElementById('panel-loading');
  var panelEmpty = document.getElementById('panel-empty');
  var panelList = document.getElementById('panel-list');
  var csrfToken = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').content : '';

  var T_TITLE_CONTENT_REQUIRED = {{ _("Title and content required") | tojson }};
  var T_SAVING = {{ _("Saving…") | tojson }};
  var T_SAVE_GUIDE = {{ _("Save guide") | tojson }};
  var T_SAVE_FAILED = {{ _("Save failed") | tojson }};
  var T_REQUEST_FAILED = {{ _("Request failed") | tojson }};
  var T_DISCARDING = {{ _("Discarding…") | tojson }};
  var T_DISCARD = {{ _("Discard") | tojson }};
  var T_DRAFTING_GUIDE = {{ _("Drafting the guide…") | tojson }};
  var T_ERROR = {{ _("Error") | tojson }};
  var T_FAILED_LOAD_CANDIDATES = {{ _("Failed to load candidates.") | tojson }};
  var T_HIDE_CONVERSATION = {{ _("Hide the conversation") | tojson }};
  var T_VIEW_CONVERSATION = {{ _("View the conversation") | tojson }};
  var T_NO_SUMMARY = {{ _("No summary") | tojson }};
  var T_DIFFERENT_CUSTOMERS_ASKED = {{ _("different customers asked this — a recurring topic worth documenting") | tojson }};
  var T_CUSTOMERS_ASKED_THIS = {{ _("customers asked this") | tojson }};
  var T_SPECIFIC_CAPABILITY = {{ _("The specific capability these cases share") | tojson }};
  var T_TOO_BROAD_TITLE = {{ _("These cases share only that the module misbehaves — probably too broad for one article") | tojson }};
  var T_TOO_BROAD_CHIP = {{ _("Too broad?") | tojson }};
  var T_CUSTOMER_ASKED_LABEL = {{ _("Customer asked") | tojson }};
  var T_YOU_REPLIED_LABEL = {{ _("You replied") | tojson }};
  var T_PROPOSE_GUIDE = {{ _("Propose guide") | tojson }};
  var T_NOT_REAL_GUIDE_TITLE = {{ _("Not a real guide — stop suggesting this topic") | tojson }};
  var T_PROPOSED_GUIDE_HEADER = {{ _("Proposed guide — review & edit before saving") | tojson }};
  var T_CANCEL = {{ _("Cancel") | tojson }};
  var T_GUIDE_CANDIDATES_TITLE = {{ _("Guide Candidates") | tojson }};

  // Adjust the amber "N candidates" badge on a product row after propose/discard.
  function adjustCandidateBadge(productId, delta) {
    var countEl = document.querySelector('.guide-count[data-product-id="' + productId + '"]');
    if (!countEl) return;
    var span = countEl.querySelector('span[title*="candidate"]');
    if (!span) return;
    var m = (span.textContent || '').match(/\d+/);
    var next = (m ? parseInt(m[0]) : 0) + delta;
    if (next <= 0) { span.remove(); return; }
    if (/^\s*\+/.test(span.textContent)) { span.textContent = '+' + next; }
    else if (/possible/i.test(span.textContent)) { span.textContent = next + ' possible'; }
    else { span.textContent = String(next); }
  }

  function bumpGuideBadge(productId) {
    var countEl = document.querySelector('.guide-count[data-product-id="' + productId + '"]');
    if (!countEl) return;
    var link = countEl.querySelector('a');
    var cur = link ? (parseInt(link.textContent) || 0) : 0;
    countEl.innerHTML = '<a href="/guides?product=' + productId + '" style="display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:1px 6px;border-radius:20px;font-size:12px;font-weight:600;background:#ede9fe;color:#4f46e5;text-decoration:none;">' + (cur + 1) + '</a>';
  }

  // Show an editable preview of a proposed guide inside its card; save on confirm.
  function renderPreview(card, actions, productId, threadId, title, contentMd) {
    actions.style.display = 'none';
    var conv = card.querySelector('.cand-convo');
    var convToggle = card.querySelector('.cand-toggle');
    if (conv) conv.style.display = 'none';
    if (convToggle) convToggle.style.display = 'none';

    var pv = document.createElement('div');
    pv.className = 'cand-preview';
    pv.style.cssText = 'margin-top:10px;border-top:1px solid #e5e7eb;padding-top:10px;';
    pv.innerHTML =
      '<div style="font-size:10px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;">' + T_PROPOSED_GUIDE_HEADER + '</div>' +
      '<input class="pv-title" style="width:100%;box-sizing:border-box;font-size:13px;font-weight:600;padding:6px 8px;border:1px solid #d1d5db;border-radius:6px;margin-bottom:8px;" />' +
      '<textarea class="pv-content" spellcheck="false" style="width:100%;box-sizing:border-box;height:280px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;line-height:1.5;padding:8px;border:1px solid #d1d5db;border-radius:6px;resize:vertical;"></textarea>' +
      '<div style="margin-top:8px;display:flex;align-items:center;gap:8px;">' +
        '<button class="pv-save" style="font-size:12px;font-weight:600;padding:6px 14px;border:1px solid #16a34a;border-radius:6px;background:#16a34a;color:#fff;cursor:pointer;">' + T_SAVE_GUIDE + '</button>' +
        '<button class="pv-cancel" style="font-size:12px;font-weight:500;padding:6px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151;cursor:pointer;">' + T_CANCEL + '</button>' +
        '<span class="pv-result" style="font-size:12px;"></span>' +
      '</div>';
    card.appendChild(pv);
    pv.querySelector('.pv-title').value = title;
    pv.querySelector('.pv-content').value = contentMd;

    pv.querySelector('.pv-cancel').addEventListener('click', function() {
      pv.remove();
      actions.style.display = 'flex';
      if (convToggle) convToggle.style.display = '';
    });

    pv.querySelector('.pv-save').addEventListener('click', function() {
      var saveBtn = this;
      var pvResult = pv.querySelector('.pv-result');
      var newTitle = pv.querySelector('.pv-title').value.trim();
      var newContent = pv.querySelector('.pv-content').value.trim();
      if (!newTitle || !newContent) { pvResult.style.color = '#dc2626'; pvResult.textContent = T_TITLE_CONTENT_REQUIRED; return; }
      saveBtn.disabled = true; saveBtn.textContent = T_SAVING;
      fetch('/api/products/guide-candidates/save', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': csrfToken },
        body: JSON.stringify({ representative_thread_id: threadId, title: newTitle, content_md: newContent })
      })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.success) {
          card.style.transition = 'opacity .2s'; card.style.opacity = '.55';
          pv.innerHTML = '<div style="font-size:12px;color:#15803d;font-weight:600;padding:6px 0;">✓ Guide saved: ' + escapeHtml(data.title || newTitle) + ' — <a href="/guides?product=' + productId + '" style="color:#4f46e5;">view</a></div>';
          bumpGuideBadge(productId);
          adjustCandidateBadge(productId, -1);
        } else {
          saveBtn.disabled = false; saveBtn.textContent = T_SAVE_GUIDE;
          pvResult.style.color = '#dc2626'; pvResult.textContent = data.error || T_SAVE_FAILED;
        }
      })
      .catch(function() {
        saveBtn.disabled = false; saveBtn.textContent = T_SAVE_GUIDE;
        pvResult.style.color = '#dc2626'; pvResult.textContent = T_REQUEST_FAILED;
      });
    });
  }

  function openPanel(productId, productName) {
    panelTitle.textContent = T_GUIDE_CANDIDATES_TITLE + ' \u2014 ' + productName;
    panelLoading.style.display = 'block';
    panelEmpty.style.display = 'none';
    panelList.innerHTML = '';
    panel.classList.add('open');
    overlay.style.display = 'block';

    fetch('/api/products/' + productId + '/guide-candidates', {
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      panelLoading.style.display = 'none';
      var candidates = data.candidates || [];
      if (!candidates.length) {
        panelEmpty.style.display = 'block';
        return;
      }
      candidates.forEach(function(c) {
        var item = document.createElement('div');
        item.className = 'cand-card';
        item.style.cssText = 'border:1px solid #e5e7eb;border-radius:8px;padding:12px;margin-bottom:12px;';

        var nCust = c.distinct_customers || 0;
        var badge = nCust > 1
          ? '<span title="' + nCust + ' ' + T_DIFFERENT_CUSTOMERS_ASKED + '" style="display:inline-block;background:#ede9fe;color:#7c3aed;font-size:10px;font-weight:600;padding:1px 6px;border-radius:20px;margin-left:6px;white-space:nowrap;">' + nCust + ' ' + T_CUSTOMERS_ASKED_THIS + '</span>'
          : '';

        var summary = c.summary_text ? escapeHtml(c.summary_text) : '<em style="color:#9ca3af">' + T_NO_SUMMARY + '</em>';

        // Title synthesised from several cases in the cluster — the shared
        // question. The representative's own summary stays below as evidence,
        // since it describes one customer's case, not the topic.
        var title = c.title
          ? '<div style="font-size:13px;font-weight:600;color:#111827;line-height:1.4;margin-bottom:4px;">' + escapeHtml(c.title) + '</div>'
          : '';
        var scopeChip = '';
        if (c.scope) {
          scopeChip = '<span title="' + T_SPECIFIC_CAPABILITY + '" style="display:inline-block;background:#f1f5f9;color:#475569;font-size:10px;font-weight:600;padding:1px 6px;border-radius:20px;margin-right:6px;white-space:nowrap;">' + escapeHtml(c.scope) + '</span>';
        }
        // Only flag the unambiguous case: the model found NO shared scope at all.
        // The BROAD/SPECIFIC verdict itself is still too trigger-happy to surface
        // (it called "Module exchange or refund" broad), so it only affects order.
        var broadChip = (c.is_specific === false && !c.scope)
          ? '<span title="' + T_TOO_BROAD_TITLE + '" style="display:inline-block;background:#fef3c7;color:#92400e;font-size:10px;font-weight:600;padding:1px 6px;border-radius:20px;margin-right:6px;white-space:nowrap;">' + T_TOO_BROAD_CHIP + '</span>'
          : '';

        // Expandable real conversation behind the candidate (more info before acting)
        var convo = '';
        if (c.customer_asked || c.we_replied) {
          convo =
            '<button class="cand-toggle" style="margin-top:2px;padding:0;border:none;background:none;cursor:pointer;color:#6366f1;font-size:11px;font-weight:500;">&#9656; ' + T_VIEW_CONVERSATION + '</button>' +
            '<div class="cand-convo" style="display:none;margin-top:8px;border-top:1px dashed #e5e7eb;padding-top:8px;">' +
              '<div style="font-size:10px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.04em;">' + T_CUSTOMER_ASKED_LABEL + '</div>' +
              '<div style="font-size:12px;color:#374151;white-space:pre-wrap;margin:2px 0 8px;">' + escapeHtml(c.customer_asked || '') + '</div>' +
              '<div style="font-size:10px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.04em;">' + T_YOU_REPLIED_LABEL + '</div>' +
              '<div style="font-size:12px;color:#374151;white-space:pre-wrap;margin:2px 0 0;">' + escapeHtml(c.we_replied || '') + '</div>' +
            '</div>';
        }

        item.innerHTML =
          title +
          '<div style="margin-bottom:6px;">' + broadChip + scopeChip + badge + '</div>' +
          '<div style="font-size:12px;color:' + (c.title ? '#6b7280' : '#374151') + ';line-height:1.5;margin-bottom:8px;">' + summary + '</div>' +
          convo +
          '<div style="margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;">' +
            '<button class="btn-generate" data-thread-id="' + c.thread_id + '" data-members="' + escapeHtml(JSON.stringify(c.member_thread_ids || [c.thread_id])) + '" style="font-size:12px;font-weight:500;padding:5px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;color:#374151;transition:all .15s;">' +
            '&#10024; ' + T_PROPOSE_GUIDE + '</button>' +
            '<button class="btn-discard" data-thread-id="' + c.thread_id + '" title="' + T_NOT_REAL_GUIDE_TITLE + '" style="font-size:12px;font-weight:500;padding:5px 10px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;color:#9ca3af;transition:all .15s;">' + T_DISCARD + '</button>' +
            '<span class="gen-result" style="display:none;font-size:12px;"></span>' +
          '</div>';

        panelList.appendChild(item);
      });

      // Expand/collapse the real conversation
      panelList.querySelectorAll('.cand-toggle').forEach(function(tog) {
        tog.addEventListener('click', function() {
          var convoEl = this.nextElementSibling;
          var opening = convoEl.style.display === 'none';
          convoEl.style.display = opening ? 'block' : 'none';
          this.innerHTML = (opening ? '&#9662;' : '&#9656;') + ' ' + (opening ? T_HIDE_CONVERSATION : T_VIEW_CONVERSATION);
        });
      });

      // Wire up "Discard" buttons
      panelList.querySelectorAll('.btn-discard').forEach(function(btn) {
        btn.addEventListener('click', function() {
          var threadId = parseInt(this.dataset.threadId);
          var card = this.closest('.cand-card');
          var self = this;
          self.disabled = true;
          self.textContent = T_DISCARDING;
          fetch('/api/products/guide-candidates/dismiss', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': csrfToken },
            body: JSON.stringify({ thread_id: threadId })
          })
          .then(function(r) { return r.json(); })
          .then(function(data) {
            if (data.success) {
              card.style.transition = 'opacity .2s';
              card.style.opacity = '0';
              setTimeout(function() {
                card.remove();
                adjustCandidateBadge(productId, -1);
                if (!panelList.querySelector('.cand-card')) { panelEmpty.style.display = 'block'; }
              }, 200);
            } else { self.disabled = false; self.textContent = T_DISCARD; }
          })
          .catch(function() { self.disabled = false; self.textContent = T_DISCARD; });
        });
      });

            // Wire up "Propose guide" — draft from the cluster, preview + edit, then save.
      panelList.querySelectorAll('.btn-generate').forEach(function(btn) {
        btn.addEventListener('click', function() {
          var threadId = parseInt(this.dataset.threadId);
          var members;
          try { members = JSON.parse(this.dataset.members || '[]'); } catch (e) { members = [threadId]; }
          var card = this.closest('.cand-card');
          var actions = this.parentNode;
          var resultEl = actions.querySelector('.gen-result');
          var self = this;
          self.disabled = true;
          self.textContent = T_DRAFTING_GUIDE;
          fetch('/api/products/guide-candidates/propose', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': csrfToken },
            body: JSON.stringify({ representative_thread_id: threadId, thread_ids: members })
          })
          .then(function(r) { return r.json(); })
          .then(function(data) {
            self.disabled = false;
            self.innerHTML = '&#10024; ' + T_PROPOSE_GUIDE;
            if (!data.success) {
              resultEl.style.display = 'inline'; resultEl.style.color = '#dc2626';
              resultEl.textContent = data.error || T_ERROR;
              return;
            }
            renderPreview(card, actions, productId, threadId, data.title || '', data.content_md || '');
          })
          .catch(function() {
            self.disabled = false; self.innerHTML = '&#10024; ' + T_PROPOSE_GUIDE;
            resultEl.style.display = 'inline'; resultEl.style.color = '#dc2626';
            resultEl.textContent = T_REQUEST_FAILED;
          });
        });
      });
    })
    .catch(function() {
      panelLoading.style.display = 'none';
      panelEmpty.style.display = 'block';
      panelEmpty.textContent = T_FAILED_LOAD_CANDIDATES;
    });
  }

  // Keep productId accessible in close handler
  var currentProductId = null;

  function closePanel() {
    panel.classList.remove('open');
    overlay.style.display = 'none';
  }

  document.getElementById('panel-close').addEventListener('click', closePanel);
  overlay.addEventListener('click', closePanel);

  document.addEventListener('click', function(e) {
    var btn = e.target.closest('.btn-candidates');
    if (!btn) return;
    currentProductId = btn.dataset.productId;
    openPanel(currentProductId, btn.dataset.productName || {{ _('Product') | tojson }});
  });

  function escapeHtml(s) {
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  }
})();

// ── Slug inline editing ──
(function() {
  var csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
  var T_REFERENCE_SAVED = {{ _("Reference saved") | tojson }};
  var T_SLUG_SAVED = {{ _("Slug saved") | tojson }};
  var T_SAVE_FAILED_PREFIX = {{ _("Save failed:") | tojson }};
  var T_ERROR_PREFIX = {{ _("Error:") | tojson }};

  // Reference inline edit
  document.querySelectorAll('.ref-input').forEach(function(input) {
    var original = input.value;
    var saveBtn = input.parentElement.querySelector('.ref-save');
    input.addEventListener('input', function() {
      saveBtn.classList.toggle('hidden', input.value === original);
    });
    input.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') { e.preventDefault(); saveBtn.click(); }
    });
  });
  document.querySelectorAll('.ref-save').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var pid = btn.dataset.productId;
      var input = btn.parentElement.querySelector('.ref-input');
      var fd = new FormData();
      fd.append('reference', input.value.trim());
      fd.append('csrf_token', csrf);
      fetch('/api/products/' + pid + '/reference', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: fd,
      })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.success) {
          btn.classList.add('hidden');
          showToast(T_REFERENCE_SAVED);
        } else {
          showToast(T_SAVE_FAILED_PREFIX + ' ' + (data.message || ''), 'error');
        }
      })
      .catch(function(err) { showToast(T_ERROR_PREFIX + ' ' + err, 'error'); });
    });
  });

  // Show save button when input changes
  document.querySelectorAll('.slug-input').forEach(function(input) {
    var original = input.value;
    var saveBtn = input.parentElement.querySelector('.slug-save');
    input.addEventListener('input', function() {
      saveBtn.classList.toggle('hidden', input.value === original);
    });
    input.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') { e.preventDefault(); saveBtn.click(); }
    });
  });

  // Save slug via AJAX
  document.querySelectorAll('.slug-save').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var pid = btn.dataset.productId;
      var input = btn.parentElement.querySelector('.slug-input');
      var fd = new FormData();
      fd.append('slug', input.value.trim());
      fd.append('csrf_token', csrf);
      fetch('/api/products/' + pid + '/slug', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: fd,
      })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.success) {
          btn.classList.add('hidden');
          showToast(T_SLUG_SAVED);
        } else {
          showToast(T_SAVE_FAILED_PREFIX + ' ' + (data.message || ''), 'error');
        }
      })
      .catch(function(err) { showToast(T_ERROR_PREFIX + ' ' + err, 'error'); });
    });
  });
})();
</script>

{# ── Module Knowledge Panel ── #}
<div id="knowledge-panel" style="position:fixed;right:0;top:0;width:480px;height:100vh;z-index:50;background:#fff;border-left:1px solid #e5e7eb;box-shadow:-4px 0 24px rgba(0,0,0,.10);flex-direction:column;">
  <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e5e7eb;flex-shrink:0;">
    <h3 id="knowledge-panel-title" style="font-size:14px;font-weight:600;color:#111827;margin:0;">{{ _("Module Knowledge") }}</h3>
    <button id="knowledge-panel-close" style="border:none;background:none;cursor:pointer;color:#6b7280;font-size:20px;line-height:1;padding:4px;">&#x2715;</button>
  </div>
  <div id="knowledge-panel-body" style="flex:1;overflow-y:auto;padding:16px 20px;">
    <div id="knowledge-loading" style="display:none;text-align:center;padding:40px 0;color:#6b7280;font-size:13px;">
      <div style="display:inline-block;width:20px;height:20px;border:2px solid #e5e7eb;border-top-color:#0d9488;border-radius:50%;animation:spin .7s linear infinite;margin-bottom:8px;"></div>
      <div>{{ _("Loading knowledge…") }}</div>
    </div>
    <div id="knowledge-content" style="display:none;">

      {# Section A — Seller notes #}
      <div style="margin-bottom:24px;">
        <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;">
          <h4 style="font-size:13px;font-weight:600;color:#111827;margin:0;">{{ _("Your notes") }}</h4>
          <span id="knowledge-notes-updated" style="font-size:11px;color:#9ca3af;"></span>
        </div>
        <p style="font-size:12px;color:#6b7280;margin:0 0 10px;">{{ _("Write the real fixes, versions, config paths and gotchas for this module. The AI uses these first — ahead of anything it infers — when drafting replies.") }}</p>
        <textarea id="knowledge-notes-textarea" rows="8"
                  style="width:100%;box-sizing:border-box;border:1px solid #d1d5db;border-radius:8px;padding:10px 12px;font-size:13px;color:#374151;resize:vertical;font-family:inherit;line-height:1.5;outline:none;transition:border-color .15s;"
                  placeholder="{{ _('e.g. v2.3+ requires overrides cleared after install. Config at Modules → Settings → API tab. Known conflict with PS 8.1.4 — see issue #42.') }}"></textarea>
        <div style="display:flex;align-items:center;gap:10px;margin-top:8px;">
          <button id="knowledge-notes-save"
                  style="font-size:12px;font-weight:500;padding:5px 14px;border:1px solid #0d9488;border-radius:6px;background:#f0fdfa;color:#0f766e;cursor:pointer;transition:all .15s;">
            {{ _("Save") }}
          </button>
          <span id="knowledge-notes-status" style="font-size:12px;color:#6b7280;"></span>
        </div>
      </div>

      {# Section B — Auto-mined issues #}
      <div style="border-top:1px solid #f3f4f6;padding-top:20px;">
        <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;">
          <h4 style="font-size:13px;font-weight:600;color:#374151;margin:0;">{{ _("Auto-mined from past tickets") }}</h4>
          <span id="knowledge-issues-meta" style="font-size:11px;color:#9ca3af;"></span>
        </div>
        <div id="knowledge-issues-body" style="margin-bottom:12px;"></div>
        <button id="knowledge-regenerate"
                style="font-size:12px;font-weight:500;padding:5px 14px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151;cursor:pointer;transition:all .15s;">
          &#8635; {{ _("Regenerate") }}
        </button>
        <span id="knowledge-regen-status" style="display:none;font-size:12px;color:#6b7280;margin-left:8px;"></span>
      </div>

      {# Section C — Linked documentation #}
      <div id="knowledge-linked-docs" style="border-top:1px solid #f3f4f6;padding-top:20px;margin-top:4px;">
        <h4 style="font-size:13px;font-weight:600;color:#374151;margin:0 0 10px;">{{ _("Linked documentation") }}</h4>
        <div id="knowledge-linked-docs-body"></div>
      </div>

    </div>
  </div>
</div>
<div id="knowledge-panel-overlay" style="display:none;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.2);"></div>

<style>
#knowledge-panel { display: none; }
#knowledge-panel.open { display: flex !important; }
#knowledge-notes-textarea:focus { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,.15); }
</style>

<script>
(function() {
  var kPanel    = document.getElementById('knowledge-panel');
  var kOverlay  = document.getElementById('knowledge-panel-overlay');
  var kTitle    = document.getElementById('knowledge-panel-title');
  var kLoading  = document.getElementById('knowledge-loading');
  var kContent  = document.getElementById('knowledge-content');
  var kTextarea = document.getElementById('knowledge-notes-textarea');
  var kUpdated  = document.getElementById('knowledge-notes-updated');
  var kSaveBtn  = document.getElementById('knowledge-notes-save');
  var kSaveSt   = document.getElementById('knowledge-notes-status');
  var kIssuesBd = document.getElementById('knowledge-issues-body');
  var kIssuesMt = document.getElementById('knowledge-issues-meta');
  var kRegenBtn = document.getElementById('knowledge-regenerate');
  var kRegenSt  = document.getElementById('knowledge-regen-status');

  var T_MINED_FROM = {{ _("Mined from") | tojson }};
  var T_RESOLVED_TICKET_SINGULAR = {{ _("resolved ticket") | tojson }};
  var T_RESOLVED_TICKET_PLURAL = {{ _("resolved tickets") | tojson }};
  var T_UPDATED = {{ _("updated") | tojson }};
  var T_NO_AUTOMINED_ISSUES = {{ _("No auto-mined issues yet — click Regenerate (needs ~10 resolved tickets for this module).") | tojson }};
  var T_NO_DOCS_LINKED = {{ _("No documentation linked to this module yet. Link a source in Settings → Documentation Sources.") | tojson }};
  var T_PAGES = {{ _("pages") | tojson }};
  var T_MODULE_KNOWLEDGE_TITLE = {{ _("Module Knowledge") | tojson }};
  var T_LAST_EDITED = {{ _("Last edited") | tojson }};
  var T_SAVING2 = {{ _("Saving…") | tojson }};
  var T_SAVED_OK = {{ _("Saved") | tojson }};
  var T_SAVE_FAILED2 = {{ _("Save failed") | tojson }};
  var T_ERROR_SAVING = {{ _("Error saving") | tojson }};
  var T_MINING = {{ _("Mining…") | tojson }};
  var T_NOT_ENOUGH_DATA = {{ _("Not enough data to mine issues yet.") | tojson }};
  var T_REGENERATION_FAILED = {{ _("Regeneration failed.") | tojson }};
  var T_KNOWLEDGE_REQUEST_FAILED = {{ _("Request failed.") | tojson }};
  var T_FAILED_LOAD_KNOWLEDGE = {{ _("Failed to load knowledge data.") | tojson }};

  var csrfToken = document.querySelector('meta[name="csrf-token"]')
                    ? document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    : '';

  var currentProductId = null;

  function fmtDate(iso) {
    if (!iso) return '';
    try {
      var d = new Date(iso);
      return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
    } catch(e) { return iso; }
  }

  function renderIssuesSection(data) {
    if (data.common_issues) {
      kIssuesMt.textContent =
        T_MINED_FROM + ' ' + (data.common_issues_thread_count || 0) + ' ' +
        (data.common_issues_thread_count !== 1 ? T_RESOLVED_TICKET_PLURAL : T_RESOLVED_TICKET_SINGULAR) +
        (data.common_issues_updated_at ? ' · ' + T_UPDATED + ' ' + fmtDate(data.common_issues_updated_at) : '');
      kIssuesBd.innerHTML =
        '<pre style="white-space:pre-wrap;word-break:break-word;font-size:12px;color:#4b5563;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:10px 12px;margin:0;font-family:inherit;line-height:1.5;">' +
        escapeHtml(data.common_issues) + '</pre>';
    } else {
      kIssuesMt.textContent = '';
      kIssuesBd.innerHTML =
        '<p style="font-size:12px;color:#9ca3af;margin:0;">' + T_NO_AUTOMINED_ISSUES + '</p>';
    }
  }

  function renderLinkedDocs(docs) {
    var el = document.getElementById('knowledge-linked-docs-body');
    if (!el) return;
    if (!docs || docs.length === 0) {
      el.innerHTML =
        '<p style="font-size:12px;color:#9ca3af;margin:0;">' + T_NO_DOCS_LINKED + '</p>';
      return;
    }
    var html = '<ul style="list-style:none;margin:0;padding:0;">';
    docs.forEach(function(doc) {
      html +=
        '<li style="margin-bottom:6px;font-size:12px;">' +
        '<a href="' + escapeHtml(doc.url) + '" target="_blank" rel="noopener" ' +
        'style="color:#0d9488;text-decoration:none;font-weight:500;">' +
        escapeHtml(doc.label) + '</a>' +
        (doc.page_count ? '<span style="color:#9ca3af;margin-left:4px;">&middot; ' + doc.page_count + ' ' + T_PAGES + '</span>' : '') +
        '</li>';
    });
    html += '</ul>';
    el.innerHTML = html;
  }

  function openKnowledgePanel(productId, productName) {
    currentProductId = productId;
    kTitle.textContent = T_MODULE_KNOWLEDGE_TITLE + ' — ' + productName;
    kLoading.style.display = 'block';
    kContent.style.display = 'none';
    kSaveSt.textContent = '';
    kRegenSt.style.display = 'none';
    kPanel.classList.add('open');
    kOverlay.style.display = 'block';

    fetch('/api/products/' + productId + '/knowledge', {
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      credentials: 'same-origin'
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      kLoading.style.display = 'none';
      kContent.style.display = 'block';

      // Section A
      kTextarea.value = data.seller_notes || '';
      kUpdated.textContent = data.seller_notes_updated_at
        ? T_LAST_EDITED + ' ' + fmtDate(data.seller_notes_updated_at)
        : '';

      // Section B
      renderIssuesSection(data);

      // Section C — Linked docs
      renderLinkedDocs(data.linked_docs);
    })
    .catch(function() {
      kLoading.style.display = 'none';
      kContent.style.display = 'block';
      kTextarea.value = '';
      kUpdated.textContent = '';
      kIssuesMt.textContent = '';
      kIssuesBd.innerHTML = '<p style="font-size:12px;color:#dc2626;margin:0;">' + T_FAILED_LOAD_KNOWLEDGE + '</p>';
      renderLinkedDocs(null);
    });
  }

  function closeKnowledgePanel() {
    kPanel.classList.remove('open');
    kOverlay.style.display = 'none';
  }

  // Open on .btn-knowledge click
  document.addEventListener('click', function(e) {
    var btn = e.target.closest('.btn-knowledge');
    if (!btn) return;
    openKnowledgePanel(btn.dataset.productId, btn.dataset.productName || {{ _('Product') | tojson }});
  });

  // Close
  document.getElementById('knowledge-panel-close').addEventListener('click', closeKnowledgePanel);
  kOverlay.addEventListener('click', closeKnowledgePanel);
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && kPanel.classList.contains('open')) closeKnowledgePanel();
  });

  // Save seller notes
  kSaveBtn.addEventListener('click', function() {
    if (!currentProductId) return;
    kSaveBtn.disabled = true;
    kSaveSt.textContent = T_SAVING2;
    kSaveSt.style.color = '#6b7280';

    fetch('/api/products/' + currentProductId + '/knowledge', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken,
        'X-Requested-With': 'XMLHttpRequest'
      },
      credentials: 'same-origin',
      body: JSON.stringify({ content: kTextarea.value })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      kSaveBtn.disabled = false;
      if (data.success) {
        kSaveSt.textContent = T_SAVED_OK + ' \u2713';
        kSaveSt.style.color = '#0f766e';
        kUpdated.textContent = T_LAST_EDITED + ' ' + fmtDate(new Date().toISOString());
      } else {
        kSaveSt.textContent = T_SAVE_FAILED2;
        kSaveSt.style.color = '#dc2626';
      }
    })
    .catch(function() {
      kSaveBtn.disabled = false;
      kSaveSt.textContent = T_ERROR_SAVING;
      kSaveSt.style.color = '#dc2626';
    });
  });

  // Clear save status when user types again
  kTextarea.addEventListener('input', function() {
    kSaveSt.textContent = '';
  });

  // Regenerate common issues
  kRegenBtn.addEventListener('click', function() {
    if (!currentProductId) return;
    kRegenBtn.disabled = true;
    kRegenSt.style.display = 'inline';
    kRegenSt.style.color = '#6b7280';
    kRegenSt.textContent = T_MINING;

    fetch('/api/products/' + currentProductId + '/knowledge/regenerate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken,
        'X-Requested-With': 'XMLHttpRequest'
      },
      credentials: 'same-origin'
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      kRegenBtn.disabled = false;
      kRegenSt.style.display = 'none';
      if (data.success) {
        renderIssuesSection({
          common_issues: data.common_issues,
          common_issues_thread_count: data.common_issues_thread_count,
          common_issues_updated_at: data.common_issues_updated_at
        });
      } else if (data.error === 'not_enough_data') {
        kIssuesMt.textContent = '';
        kIssuesBd.innerHTML =
          '<p style="font-size:12px;color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:6px;padding:8px 12px;margin:0;">' +
          escapeHtml(data.message || T_NOT_ENOUGH_DATA) + '</p>';
      } else {
        kIssuesBd.innerHTML =
          '<p style="font-size:12px;color:#dc2626;margin:0;">' +
          escapeHtml(data.error || T_REGENERATION_FAILED) + '</p>';
      }
    })
    .catch(function() {
      kRegenBtn.disabled = false;
      kRegenSt.style.display = 'none';
      kIssuesBd.innerHTML = '<p style="font-size:12px;color:#dc2626;margin:0;">' + T_KNOWLEDGE_REQUEST_FAILED + '</p>';
    });
  });

  function escapeHtml(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  }
})();
</script>

{# ── Module Upload Modal ── #}
<div id="upload-module-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
  <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md mx-4">
    <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
      <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100">{{ _("Upload Module ZIP") }}</h2>
      <button type="button" onclick="closeUploadModal()"
              class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
        <span class="material-symbols-outlined">close</span>
      </button>
    </div>
    <div class="px-6 py-5 space-y-4">
      <div>
        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _("Version") }}</label>
        <input type="text" id="upload-version" placeholder="{{ _('e.g. 2.1.4') }}"
               class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _("ZIP file") }}</label>
        <input type="file" id="upload-file" accept=".zip"
               class="block w-full text-sm text-gray-600 dark:text-gray-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-brand-50 file:text-brand-700 dark:file:bg-brand-500/10 dark:file:text-brand-400 hover:file:bg-brand-100">
      </div>
      <div id="upload-progress" class="hidden">
        <div class="h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <div id="upload-progress-bar" class="h-full bg-brand-500 rounded-full transition-all" style="width:0%"></div>
        </div>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _("Uploading…") }}</p>
      </div>
    </div>
    <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-2">
      <button type="button" onclick="closeUploadModal()"
              class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600">{{ _("Cancel") }}</button>
      <button type="button" onclick="submitUpload()"
              class="px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700">{{ _("Upload") }}</button>
    </div>
  </div>
</div>

<script>
(function() {
  var _uploadProductId = null;
  var _csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
  var T_SELECT_ZIP_FILE = {{ _("Please select a ZIP file") | tojson }};
  var T_ZIP_ONLY = {{ _("Only .zip files are allowed") | tojson }};
  var T_ZIP_UPLOADED = {{ _("Module ZIP uploaded") | tojson }};
  var T_UPLOAD_FAILED = {{ _("Upload failed:") | tojson }};
  var T_DOWNLOAD = {{ _("Download") | tojson }};
  var T_REPLACE_ZIP = {{ _("Replace ZIP") | tojson }};

  window.openUploadForm = function(productId, currentVersion) {
    _uploadProductId = productId;
    document.getElementById('upload-version').value = currentVersion || '';
    document.getElementById('upload-file').value = '';
    document.getElementById('upload-progress').classList.add('hidden');
    document.getElementById('upload-progress-bar').style.width = '0%';
    document.getElementById('upload-module-modal').classList.remove('hidden');
  };

  window.closeUploadModal = function() {
    document.getElementById('upload-module-modal').classList.add('hidden');
  };

  window.submitUpload = function() {
    var file = document.getElementById('upload-file').files[0];
    if (!file) { showToast(T_SELECT_ZIP_FILE, 'error'); return; }
    if (!file.name.toLowerCase().endsWith('.zip')) { showToast(T_ZIP_ONLY, 'error'); return; }

    var version = document.getElementById('upload-version').value.trim();
    var fd = new FormData();
    fd.append('file', file);
    if (version) fd.append('version', version);
    fd.append('csrf_token', _csrf);

    document.getElementById('upload-progress').classList.remove('hidden');
    var bar = document.getElementById('upload-progress-bar');
    bar.style.width = '30%';

    fetch('/api/products/' + _uploadProductId + '/upload-release', {
      method: 'POST',
      headers: { 'X-CSRFToken': _csrf },
      body: fd,
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      bar.style.width = '100%';
      if (data.error) { showToast(data.error, 'error'); return; }
      var rel = data.release;
      var cell = document.getElementById('release-cell-' + _uploadProductId);
      if (cell) {
        cell.innerHTML =
          '<div class="flex items-center gap-1.5">' +
          '<span class="text-xs text-gray-700 dark:text-gray-300 font-medium" title="' + rel.original_filename + '">v' + (rel.version || '?') + '</span>' +
          '<a href="/api/products/' + _uploadProductId + '/download-latest" title="' + T_DOWNLOAD + ' ' + rel.original_filename + '" class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300"><span class="material-symbols-outlined text-sm">download</span></a>' +
          '<button type="button" onclick="openUploadForm(' + _uploadProductId + ', \'' + (rel.version || '') + '\')" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" title="' + T_REPLACE_ZIP + '"><span class="material-symbols-outlined text-sm">upload</span></button>' +
          '</div>';
      }
      closeUploadModal();
      showToast(T_ZIP_UPLOADED);
    })
    .catch(function(err) { showToast(T_UPLOAD_FAILED + ' ' + err, 'error'); });
  };
})();
</script>
{% endblock %}