{% if suppliers %}
<div class="card">
  <div style="overflow-x:auto">
  <table class="table">
    <thead>
      <tr>
        <th style="width:32px"><input type="checkbox" id="select-all" onchange="document.querySelectorAll('.supplier-checkbox').forEach(cb => { cb.checked = this.checked; toggleSelect(Number(cb.dataset.id), this.checked); })"></th>
        <th>ID</th>
        <th>Name</th>
        <th>Country</th>
        <th>Category</th>
        <th>Tier</th>
        <th>Credits</th>
        <th>Claimed</th>
        <th>Created</th>
      </tr>
    </thead>
    <tbody>
      {% for s in suppliers %}
      <tr data-href="{{ url_for('admin.supplier_detail', supplier_id=s.id) }}">
        <td onclick="event.stopPropagation()"><input type="checkbox" class="supplier-checkbox" data-id="{{ s.id }}" onchange="toggleSelect({{ s.id }}, this.checked)"></td>
        <td><a href="{{ url_for('admin.supplier_detail', supplier_id=s.id) }}">#{{ s.id }}</a></td>
        <td>
          <span class="text-sm font-semibold">{{ s.name }}</span>
          {% if s.slug %}<br><span class="text-xs text-slate">{{ s.slug }}</span>{% endif %}
        </td>
        <td>{{ s.country_code or '-' }}</td>
        <td>{{ s.category or '-' }}</td>
        <td>
          {% if s.tier == 'pro' %}
          <span class="badge-danger">PRO</span>
          {% elif s.tier == 'growth' %}
          <span class="badge-warning">GROWTH</span>
          {% else %}
          <span class="badge">FREE</span>
          {% endif %}
        </td>
        <td>{{ s.credit_balance or 0 }}</td>
        <td>
          {% if s.claimed_by %}
          <span class="text-xs text-accent">Yes</span>
          {% else %}
          <span class="text-xs text-slate">No</span>
          {% endif %}
        </td>
        <td class="mono text-sm">{{ s.created_at[:10] if s.created_at else '-' }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>
{% else %}
<div class="card text-center" style="padding:2rem">
  <p class="text-slate">No suppliers match the current filters.</p>
</div>
{% endif %}
