<p style="font-size:0.8125rem;color:#64748B;margin-bottom:1rem">
  {% if total != 1 %}{{ t.dir_results_count_plural | tformat(shown=suppliers|length, total=total) }}{% else %}{{ t.dir_results_count_singular | tformat(shown=suppliers|length, total=total) }}{% endif %}
  {% if page > 1 %} (page {{ page }}){% endif %}
</p>

{# Category abbrev for placeholder label #}
{% set ph_labels = {
  'manufacturer': 'Mfr',
  'turnkey': 'Turn',
  'turf': 'Turf',
  'lighting': 'Lgts',
  'software': 'Sftw',
  'hall_builder': 'Hall',
  'consultant': 'Cons',
  'franchise': 'Frch',
  'industry_body': 'Ind',
} %}

{# Logo placeholder background/color by category #}
{% set logo_ph_styles = {
  'manufacturer': 'background:#DBEAFE;color:#1e40af',
  'turnkey':      'background:#D1FAE5;color:#065f46',
  'turf':         'background:#FEF3C7;color:#78350f',
  'lighting':     'background:#FEE2E2;color:#991b1b',
  'software':     'background:#EDE9FE;color:#4c1d95',
  'hall_builder': 'background:#FFEDD5;color:#7c2d12',
  'consultant':   'background:#CCFBF1;color:#134e4a',
  'franchise':    'background:#FCE7F3;color:#831843',
} %}

{% if suppliers %}
<div class="dir-grid">

  {# Example card on first page with no active filters #}
  {% if page == 1 and not q and not country and not category %}
  <a href="{{ url_for('public.suppliers') }}" class="dir-card dir-card--example">
    <div class="dir-card__media dir-card__media--example">
      <div class="ph-grid"></div>
      <div class="example-icon">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
        <p>{{ t.dir_ex_photo }}</p>
      </div>
      <div class="dir-card__featured" style="background:#3B82F6">{{ t.dir_ex_badge }}</div>
      <div class="dir-card__cat dir-card__cat--example">{{ t.dir_ex_category }}</div>
    </div>
    <div class="dir-card__body">
      <div class="dir-card__logo-wrap">
        <div class="dir-card__logo-ph">?</div>
      </div>
      <h3 class="dir-card__name">{{ t.dir_ex_company }}</h3>
      <p class="dir-card__loc">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
        {{ t.dir_ex_location }}
      </p>
      <div class="dir-card__stats">
        <span class="dir-card__stat dir-card__stat--verified">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
          {{ t.dir_card_verified }}
        </span>
        <span class="dir-card__stat">12 projects · 8 yrs</span>
      </div>
      <p class="dir-card__desc">{{ t.dir_ex_desc }}</p>
      <div class="dir-card__foot">
        <span></span>
        <span class="dir-card__action dir-card__action--example">{{ t.dir_ex_cta }}</span>
      </div>
    </div>
  </a>
  {% endif %}

  {% for s in suppliers %}
  {% set logo_ph_style = logo_ph_styles.get(s.category, 'background:#EFF6FF;color:#1e40af') %}
  {% set ph_label = ph_labels.get(s.category, s.category[:4] | upper) %}

  {# ---- Pro tier ---- #}
  {% if s.tier == 'pro' %}
  <a href="{{ url_for('directory.supplier_detail', slug=s.slug) }}"
     class="dir-card dir-card--pro{% if s.sticky_until and s.sticky_until > now %} dir-card--sticky{% endif %}{% if s.highlight %} dir-card--highlight{% endif %}"{% if card_colors.get(s.id) %} style="border-color:{{ card_colors[s.id] }}"{% endif %}>
    {% if s.cover_image %}
    <div class="dir-card__media">
      <img src="{{ s.cover_image }}" alt="{{ s.name }}">
      {% if s.sticky_until and s.sticky_until > now %}<div class="dir-card__featured">{{ t.dir_card_featured }}</div>{% endif %}
      <div class="dir-card__cat dir-card__cat--{{ s.category }}">{{ category_labels.get(s.category, s.category) }}</div>
    </div>
    {% else %}
    <div class="dir-card__media dir-card__media--court">
      <div class="court-lines"></div>
      {% if s.sticky_until and s.sticky_until > now %}<div class="dir-card__featured">{{ t.dir_card_featured }}</div>{% endif %}
      <div class="dir-card__cat dir-card__cat--{{ s.category }}">{{ category_labels.get(s.category, s.category) }}</div>
    </div>
    {% endif %}
    <div class="dir-card__body">
      <div class="dir-card__logo-wrap">
        {% if s.logo_file or s.logo_url %}
        <img src="{{ s.logo_file or s.logo_url }}" alt="" class="dir-card__logo">
        {% else %}
        <div class="dir-card__logo-ph" style="{{ logo_ph_style }}">{{ s.name[0] | upper }}</div>
        {% endif %}
      </div>
      <h3 class="dir-card__name">{{ s.name }}</h3>
      <p class="dir-card__loc">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
        {{ country_labels.get(s.country_code, s.country_code) }}{% if s.city %}, {{ s.city }}{% endif %}
      </p>
      <div class="dir-card__stats">
        <span class="dir-card__stat dir-card__stat--verified">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
          {{ t.dir_card_verified }}
        </span>
        {% if s.project_count %}
        <span class="dir-card__stat">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
          {{ s.project_count }} projects
        </span>
        {% endif %}
        {% if s.years_in_business %}
        <span class="dir-card__stat">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          {{ s.years_in_business }} yrs
        </span>
        {% endif %}
        {% if s.service_area %}
        <span class="dir-card__stat">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
          {{ s.service_area.split(',')[0] }}{% if s.service_area.split(',')|length > 1 %} +{{ s.service_area.split(',')|length - 1 }}{% endif %}
        </span>
        {% endif %}
      </div>
      {% if s.short_description or s.description %}
      <p class="dir-card__desc">{{ s.short_description or s.description }}</p>
      {% endif %}
      <div class="dir-card__foot">
        <span class="dir-card__web">{{ s.website or '' }}</span>
        <span class="dir-card__action dir-card__action--quote">{{ t.dir_card_quote_btn }}</span>
      </div>
    </div>
  </a>

  {# ---- Growth tier ---- #}
  {% elif s.tier == 'growth' %}
  <a href="{{ url_for('directory.supplier_detail', slug=s.slug) }}"
     class="dir-card{% if s.sticky_until and s.sticky_until > now %} dir-card--sticky{% endif %}"{% if card_colors.get(s.id) %} style="border-color:{{ card_colors[s.id] }}"{% endif %}>
    {% if s.cover_image %}
    <div class="dir-card__media">
      <img src="{{ s.cover_image }}" alt="{{ s.name }}">
      {% if s.sticky_until and s.sticky_until > now %}<div class="dir-card__featured">{{ t.dir_card_featured }}</div>{% endif %}
      <div class="dir-card__cat dir-card__cat--{{ s.category }}">{{ category_labels.get(s.category, s.category) }}</div>
    </div>
    {% else %}
    <div class="dir-card__media dir-card__media--placeholder">
      <div class="ph-grid"></div>
      <div class="ph-label">{{ ph_label }}</div>
      {% if s.sticky_until and s.sticky_until > now %}<div class="dir-card__featured">{{ t.dir_card_featured }}</div>{% endif %}
      <div class="dir-card__cat dir-card__cat--{{ s.category }}">{{ category_labels.get(s.category, s.category) }}</div>
    </div>
    {% endif %}
    <div class="dir-card__body">
      <div class="dir-card__logo-wrap">
        {% if s.logo_file or s.logo_url %}
        <img src="{{ s.logo_file or s.logo_url }}" alt="" class="dir-card__logo">
        {% else %}
        <div class="dir-card__logo-ph" style="{{ logo_ph_style }}">{{ s.name[0] | upper }}</div>
        {% endif %}
      </div>
      <h3 class="dir-card__name">{{ s.name }}</h3>
      <p class="dir-card__loc">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
        {{ country_labels.get(s.country_code, s.country_code) }}{% if s.city %}, {{ s.city }}{% endif %}
      </p>
      <div class="dir-card__stats">
        <span class="dir-card__tier-chip dir-card__tier-chip--growth">{{ t.dir_card_growth }}</span>
        {% if s.project_count %}
        <span class="dir-card__stat">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
          {{ s.project_count }} projects
        </span>
        {% elif s.years_in_business %}
        <span class="dir-card__stat">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          {{ s.years_in_business }} yrs
        </span>
        {% endif %}
      </div>
      {% if s.short_description or s.description %}
      <p class="dir-card__desc">{{ s.short_description or s.description }}</p>
      {% endif %}
      <div class="dir-card__foot">
        <span class="dir-card__web">{{ s.website or '' }}</span>
        <span class="dir-card__action dir-card__action--quote">{{ t.dir_card_quote_btn }}</span>
      </div>
    </div>
  </a>

  {# ---- Basic tier ---- #}
  {% elif s.tier == 'basic' %}
  <a href="{{ url_for('directory.supplier_detail', slug=s.slug) }}"
     class="dir-card{% if s.sticky_until and s.sticky_until > now %} dir-card--sticky{% endif %}">
    {% if s.cover_image %}
    <div class="dir-card__media">
      <img src="{{ s.cover_image }}" alt="{{ s.name }}">
      {% if s.sticky_until and s.sticky_until > now %}<div class="dir-card__featured">{{ t.dir_card_featured }}</div>{% endif %}
      <div class="dir-card__cat dir-card__cat--{{ s.category }}">{{ category_labels.get(s.category, s.category) }}</div>
    </div>
    {% else %}
    <div class="dir-card__media dir-card__media--placeholder">
      <div class="ph-grid"></div>
      <div class="ph-label">{{ ph_label }}</div>
      {% if s.sticky_until and s.sticky_until > now %}<div class="dir-card__featured">{{ t.dir_card_featured }}</div>{% endif %}
      <div class="dir-card__cat dir-card__cat--{{ s.category }}">{{ category_labels.get(s.category, s.category) }}</div>
    </div>
    {% endif %}
    <div class="dir-card__body">
      <div class="dir-card__logo-wrap">
        {% if s.logo_file or s.logo_url %}
        <img src="{{ s.logo_file or s.logo_url }}" alt="" class="dir-card__logo">
        {% else %}
        <div class="dir-card__logo-ph" style="{{ logo_ph_style }}">{{ s.name[0] | upper }}</div>
        {% endif %}
      </div>
      <h3 class="dir-card__name">{{ s.name }}</h3>
      <p class="dir-card__loc">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
        {{ country_labels.get(s.country_code, s.country_code) }}{% if s.city %}, {{ s.city }}{% endif %}
      </p>
      <div class="dir-card__stats">
        <span class="dir-card__stat dir-card__stat--verified">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
          {{ t.dir_card_verified }}
        </span>
      </div>
      {% if s.short_description or s.description %}
      <p class="dir-card__desc">{{ s.short_description or s.description }}</p>
      {% endif %}
      <div class="dir-card__foot">
        <span class="dir-card__web">{{ s.website or '' }}</span>
        <span class="dir-card__action dir-card__action--claim">{{ t.dir_card_view_btn }}</span>
      </div>
    </div>
  </a>

  {# ---- Free / unclaimed tier ---- #}
  {% else %}
  <a href="{{ url_for('directory.supplier_detail', slug=s.slug) }}"
     class="dir-card dir-card--free">
    <div class="dir-card__media dir-card__media--placeholder">
      <div class="ph-grid"></div>
      <div class="ph-label">{{ ph_label }}</div>
      <div class="dir-card__cat dir-card__cat--{{ s.category }}">{{ category_labels.get(s.category, s.category) }}</div>
    </div>
    <div class="dir-card__body">
      <div class="dir-card__logo-wrap">
        <div class="dir-card__logo-ph" style="{{ logo_ph_style }}">{{ s.name[0] | upper }}</div>
      </div>
      <h3 class="dir-card__name">{{ s.name }}</h3>
      <p class="dir-card__loc">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
        {{ country_labels.get(s.country_code, s.country_code) }}{% if s.city %}, {{ s.city }}{% endif %}
      </p>
      <div class="dir-card__stats">
        <span class="dir-card__tier-chip dir-card__tier-chip--unverified">{{ t.dir_card_unverified }}</span>
      </div>
      <div class="dir-card__foot">
        <span></span>
        <span class="dir-card__action dir-card__action--claim">{{ t.dir_card_claim_btn }}</span>
      </div>
    </div>
  </a>
  {% endif %}

  {% endfor %}
</div>

<!-- Pagination -->
{% if total_pages > 1 %}
<nav class="dir-pagination">
  {% if page > 1 %}
  <a href="?q={{ q }}&country={{ country }}&category={{ category }}&region={{ region }}&page={{ page - 1 }}">&laquo;</a>
  {% endif %}
  {% for p in range(1, total_pages + 1) %}
    {% if p == page %}
    <span class="current">{{ p }}</span>
    {% elif p <= 3 or p >= total_pages - 1 or (p >= page - 1 and p <= page + 1) %}
    <a href="?q={{ q }}&country={{ country }}&category={{ category }}&region={{ region }}&page={{ p }}">{{ p }}</a>
    {% elif p == 4 or p == total_pages - 2 %}
    <span style="border:none">&hellip;</span>
    {% endif %}
  {% endfor %}
  {% if page < total_pages %}
  <a href="?q={{ q }}&country={{ country }}&category={{ category }}&region={{ region }}&page={{ page + 1 }}">&raquo;</a>
  {% endif %}
</nav>
{% endif %}

{% else %}
<div class="dir-empty">
  <h3>{{ t.dir_empty_heading }}</h3>
  <p>{{ t.dir_empty_sub }}</p>
  <a href="/directory/" style="color:#1D4ED8">{{ t.dir_empty_clear }}</a>
</div>
{% endif %}
