{#
  countries_canvas.html — HTMX partial for the canvas area.
  Returned on every HX-Request to /dashboard/countries.
  Renders chips + chart (or empty state), then runs an IIFE that:
    1. Syncs globals (orderedSel, selectedSet, currentMetric) from server state
    2. Syncs panel row visual state
    3. Applies palette to chips
    4. Initialises Chart.js + rankings table
#}

<!-- ── Chips ── -->
<div class="cc-chips" id="cc-chips">
  {% for code in selected_codes %}
    {% set c = all_countries | selectattr("country_code", "equalto", code) | first %}
    {% if c %}
    <span class="cc-chip" data-code="{{ code }}" onclick="toggleCountry('{{ code }}')">
      {{ c.country_name }}
      <span class="cc-chip-x">×</span>
    </span>
    {% endif %}
  {% endfor %}
  {% if not selected_codes %}
  <span class="cc-chips-empty">No countries selected</span>
  {% endif %}
</div>

<!-- ── Chart card or empty state ── -->
{% if comparison_data %}

<div class="cc-chart-card cc-in">
  <div class="cc-chart-top">
    <div>
      <div class="cc-chart-title">{{ metric.replace("_"," ").title() }} Over Time</div>
      <div class="cc-chart-meta">USDA WASDE · 1000 60-kg bags · click legend to toggle</div>
    </div>
    <span class="cc-chart-unit">1k bags</span>
  </div>
  <div class="cc-chart-body">
    <canvas id="comparisonChart"></canvas>
  </div>
</div>

<div class="cc-table-card cc-in cc-in-2" id="cc-rankings"></div>

{% else %}

<div class="cc-empty cc-in">
  <div class="cc-empty-ring">
    <svg width="22" height="22" fill="none" stroke="var(--color-copper)"
         stroke-width="1.75" stroke-linecap="round" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="9"/>
      <path d="M3 12h18"/>
      <path d="M12 3c-3.5 4.5-3.5 13.5 0 18"/>
      <path d="M12 3c3.5 4.5 3.5 13.5 0 18"/>
    </svg>
  </div>
  <div class="cc-empty-title">Select Origins to Compare</div>
  <p class="cc-empty-body">Choose up to 10 coffee-producing countries from the panel on the left to visualize production, trade flows, and inventory trends.</p>
</div>

{% endif %}

<!-- ── State sync + chart init (runs after HTMX swap) ── -->
<script>
(function () {
  const selected = {{ selected_codes | tojson }};
  const metric   = {{ metric | tojson }};
  const rawData  = {{ comparison_data | tojson }};

  // Sync globals so next click uses correct state
  window.orderedSel    = selected.slice();
  window.selectedSet   = new Set(selected);
  window.currentMetric = metric;

  // Sync panel rows
  document.querySelectorAll('.cc-row').forEach(function (row) {
    row.classList.toggle('selected', window.selectedSet.has(row.dataset.code));
  });

  // Update count badge
  var countEl = document.getElementById('sel-count');
  if (countEl) countEl.textContent = selected.length + '/10';

  // Update status line
  var statusEl = document.getElementById('selection-status');
  if (statusEl) {
    var n = selected.length;
    statusEl.innerHTML = n
      ? 'Showing <strong>' + n + '</strong> ' + (n === 1 ? 'country' : 'countries')
      : 'Select countries to compare';
  }

  // Apply palette to chips
  document.querySelectorAll('#cc-chips .cc-chip').forEach(function (chip, i) {
    chip.style.background = PALETTE[i % PALETTE.length];
  });

  // Chart + rankings
  if (rawData.length > 0) {
    buildRankings(rawData, metric, selected);
    initChart(rawData, metric, selected);
  }
}());
</script>
