<style>
  .dl-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  .dl-balance {
    background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 10px;
    padding: 8px 16px; font-size: 0.8125rem; color: #1D4ED8; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
  }
  .dl-balance a { font-size: 0.75rem; color: #1D4ED8; text-decoration: underline; }
  .dl-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; align-items: center; }
  .dl-pill {
    padding: 6px 14px; font-size: 0.75rem; font-weight: 600; border: 1px solid #E2E8F0;
    border-radius: 999px; background: white; cursor: pointer; color: #64748B;
    text-decoration: none; font-family: inherit;
  }
  .dl-pill:hover { border-color: #1D4ED8; color: #1D4ED8; }
  .dl-pill--active { background: #1D4ED8; color: white; border-color: #1D4ED8; }
  .dl-sep { width: 1px; height: 20px; background: #E2E8F0; margin: 0 4px; }
  .dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
  .dl-badge-region {
    display: inline-block; font-size: 0.5625rem; font-weight: 700; padding: 1px 6px;
    border-radius: 999px; background: #DCFCE7; color: #16A34A; margin-left: 4px;
  }
  .dl-bidders { font-size: 0.6875rem; margin-top: 4px; }
  .dl-bidders--first { color: #16A34A; font-weight: 600; }
  .dl-bidders--many { color: #94A3B8; }
  .dl-search {
    width: 100%; padding: 8px 12px 8px 36px; border: 1px solid #E2E8F0; border-radius: 10px;
    font-size: 0.8125rem; font-family: inherit; margin-bottom: 0.75rem;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E") no-repeat 10px center;
    background-size: 16px;
  }
</style>

<div class="dl-top">
  <h2 style="font-size:1.25rem;margin:0">{{ t.sd_leads_h2 }}</h2>
  <div class="dl-balance" id="dl-credit-balance">
    {{ supplier.credit_balance }} {{ t.sd_leads_credits }}
    <a href="{{ url_for('suppliers.dashboard', tab='boosts') }}"
       hx-get="{{ url_for('suppliers.dashboard_boosts') }}"
       hx-target="#dashboard-content"
       hx-push-url="{{ url_for('suppliers.dashboard', tab='boosts') }}">{{ t.sd_leads_buy_more }}</a>
  </div>
</div>

<input type="search" name="q" class="dl-search" placeholder="{{ t.sd_leads_search_placeholder }}"
       value="{{ current_q if current_q is defined else '' }}"
       hx-get="{{ url_for('suppliers.dashboard_leads') }}"
       hx-trigger="input changed delay:300ms"
       hx-target="#dashboard-content"
       hx-include="[name='heat'],[name='country'],[name='timeline']">

<div class="dl-filters"
     hx-target="#dashboard-content"
     hx-push-url="false">
  <!-- Heat filters -->
  <a class="dl-pill {% if not current_heat %}dl-pill--active{% endif %}"
     hx-get="{{ url_for('suppliers.dashboard_leads', country=current_country, timeline=current_timeline) }}">{{ t.sd_leads_filter_all }}</a>
  <a class="dl-pill {% if current_heat == 'hot' %}dl-pill--active{% endif %}"
     hx-get="{{ url_for('suppliers.dashboard_leads', heat='hot', country=current_country, timeline=current_timeline) }}">{{ t.sd_leads_filter_hot }}</a>
  <a class="dl-pill {% if current_heat == 'warm' %}dl-pill--active{% endif %}"
     hx-get="{{ url_for('suppliers.dashboard_leads', heat='warm', country=current_country, timeline=current_timeline) }}">{{ t.sd_leads_filter_warm }}</a>
  <a class="dl-pill {% if current_heat == 'cool' %}dl-pill--active{% endif %}"
     hx-get="{{ url_for('suppliers.dashboard_leads', heat='cool', country=current_country, timeline=current_timeline) }}">{{ t.sd_leads_filter_cool }}</a>

  <div class="dl-sep"></div>

  <!-- Country filter -->
  <select class="dl-pill" style="appearance:auto;padding-right:24px"
    hx-get="{{ url_for('suppliers.dashboard_leads') }}"
    hx-target="#dashboard-content"
    hx-include="[name='heat'],[name='timeline']"
    name="country">
    <option value="">{{ t.sd_leads_filter_countries }}</option>
    {% for c in countries %}
    <option value="{{ c }}" {% if c == current_country %}selected{% endif %}>{{ c }}</option>
    {% endfor %}
  </select>
  <input type="hidden" name="heat" value="{{ current_heat }}">
  <input type="hidden" name="timeline" value="{{ current_timeline }}">

  <div class="dl-sep"></div>

  <!-- Timeline filters -->
  <a class="dl-pill {% if not current_timeline %}dl-pill--active{% endif %}"
     hx-get="{{ url_for('suppliers.dashboard_leads', heat=current_heat, country=current_country) }}">{{ t.sd_leads_filter_any }}</a>
  <a class="dl-pill {% if current_timeline == 'asap' %}dl-pill--active{% endif %}"
     hx-get="{{ url_for('suppliers.dashboard_leads', heat=current_heat, country=current_country, timeline='asap') }}">{{ t.sd_leads_filter_asap }}</a>
  <a class="dl-pill {% if current_timeline == '3_6_months' %}dl-pill--active{% endif %}"
     hx-get="{{ url_for('suppliers.dashboard_leads', heat=current_heat, country=current_country, timeline='3_6_months') }}">{{ t.sd_leads_filter_3_6mo }}</a>
  <a class="dl-pill {% if current_timeline == '6_12_months' %}dl-pill--active{% endif %}"
     hx-get="{{ url_for('suppliers.dashboard_leads', heat=current_heat, country=current_country, timeline='6_12_months') }}">{{ t.sd_leads_filter_6_12mo }}</a>
</div>

{% if leads %}
<div class="dl-grid">
  {% for lead in leads %}
  <div id="lead-card-{{ lead.id }}">
    {% if lead.is_unlocked %}
    {% include "suppliers/partials/lead_card_unlocked.html" %}
    {% else %}
    {# Locked card with bidder info and region match #}
    <div class="lf-card">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
        <span class="lf-card__heat lf-card__heat--{{ lead.heat_score or 'cool' }}">{{ (lead.heat_score or 'cool') | upper }}</span>
        {% if lead.country in service_area %}
        <span class="dl-badge-region">{{ t.sd_leads_region_badge }}</span>
        {% endif %}
      </div>
      <dl class="lf-card__meta">
        <dt>{{ t.sd_leads_facility }}</dt><dd>{{ lead.facility_type or '-' }}</dd>
        <dt>{{ t.sd_leads_courts }}</dt><dd>{{ lead.court_count or '-' }}</dd>
        <dt>{{ t.sd_leads_country }}</dt><dd>{{ lead.country or '-' }}</dd>
        <dt>{{ t.sd_leads_timeline }}</dt><dd>{{ lead.timeline or '-' }}</dd>
        <dt>{{ t.sd_leads_budget }}</dt><dd>{% if lead.budget_estimate %}&euro;{{ lead.budget_estimate }}{% else %}-{% endif %}</dd>
      </dl>
      {# Bidder count messaging #}
      {% if lead.bidder_count == 0 %}
      <div class="dl-bidders dl-bidders--first">{{ t.sd_leads_be_first }}</div>
      {% else %}
      <div class="dl-bidders dl-bidders--many">{{ lead.bidder_count }} {{ t.sd_leads_already_unlocked }}</div>
      {% endif %}
      <div class="lf-card__foot">
        <div class="lf-card__cost"><strong>{{ lead.credit_cost or '?' }}</strong> {{ t.sd_leads_credits_to_unlock }}</div>
        <form hx-post="{{ url_for('suppliers.unlock_lead', token=lead.token) }}" hx-target="#lead-card-{{ lead.id }}" hx-swap="innerHTML">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="lf-unlock-btn">{{ t.sd_leads_unlock }}</button>
        </form>
      </div>
    </div>
    {% endif %}
  </div>
  {% endfor %}
</div>
{% else %}
<div class="card text-center" style="padding:3rem">
  <h3 style="color:#64748B">{{ t.sd_leads_no_match }}</h3>
  <p style="color:#94A3B8;font-size:0.875rem">{{ t.sd_leads_no_match_hint }}</p>
</div>
{% endif %}

{# Include lead feed styles #}
<style>
  .lf-card {
    background: white; border: 1px solid #E2E8F0; border-radius: 14px;
    padding: 1.25rem; transition: box-shadow 0.15s;
    border-left: 3px solid #E2E8F0;
  }
  .lf-card:has(.lf-card__heat--hot) { border-left-color: #DC2626; }
  .lf-card:has(.lf-card__heat--warm) { border-left-color: #D97706; }
  .lf-card:has(.lf-card__heat--cool) { border-left-color: #94A3B8; }
  .lf-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
  .lf-card__heat {
    display: inline-block; font-size: 0.625rem; font-weight: 700;
    padding: 2px 8px; border-radius: 999px; text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .lf-card__heat--hot { background: #FEE2E2; color: #DC2626; }
  .lf-card__heat--warm { background: #FEF3C7; color: #D97706; }
  .lf-card__heat--cool { background: #E2E8F0; color: #64748B; }
  .lf-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0.75rem 0; font-size: 0.8125rem; }
  .lf-card__meta dt { color: #94A3B8; font-size: 0.6875rem; }
  .lf-card__meta dd { color: #1E293B; font-weight: 500; margin: 0; }
  .lf-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #F1F5F9; }
  .lf-card__cost { font-size: 0.8125rem; color: #64748B; }
  .lf-card__cost strong { color: #1D4ED8; }
  .lf-unlock-btn {
    padding: 8px 20px; font-size: 0.75rem; font-weight: 700; border: none;
    background: #1D4ED8; color: white; border-radius: 8px; cursor: pointer;
    font-family: inherit;
  }
  .lf-unlock-btn:hover { background: #1E40AF; }
  .lf-card--unlocked { border-color: #BBF7D0; background: #F0FDF4; }
  .lf-contact { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 8px; padding: 0.75rem; margin-top: 0.75rem; }
  .lf-contact dt { color: #94A3B8; font-size: 0.6875rem; }
  .lf-contact dd { color: #1E293B; font-weight: 500; margin: 0 0 4px; font-size: 0.8125rem; }
  .lf-section { margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #F1F5F9; }
  .lf-section:last-of-type { border-bottom: none; }
  .lf-section__title { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94A3B8; margin-bottom: 4px; }
  .lf-error { color: #DC2626; font-size: 0.8125rem; padding: 8px; background: #FEF2F2; border-radius: 8px; text-align: center; }
</style>
