{% extends "base.html" %}
{% block title %}{{ t.sd_lf_page_title }} - {{ config.APP_NAME }}{% endblock %}

{% block head %}
<style>
  .lf-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
  .lf-balance {
    background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 10px;
    padding: 8px 16px; font-size: 0.8125rem; color: #1D4ED8; font-weight: 600;
  }
  .lf-filters { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
  .lf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
  .lf-card {
    background: white; border: 1px solid #E2E8F0; border-radius: 14px;
    padding: 1.25rem; transition: box-shadow 0.15s;
  }
  .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-card__unlocks { font-size: 0.6875rem; color: #94A3B8; }
  .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: 'Inter', sans-serif;
  }
  .lf-unlock-btn:hover { background: #1E40AF; }
  /* Unlocked card extras */
  .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-error { color: #DC2626; font-size: 0.8125rem; padding: 8px; background: #FEF2F2; border-radius: 8px; text-align: center; }
</style>
{% endblock %}

{% block content %}
<main class="container-page py-12">
  <div class="lf-header">
    <div>
      <h1 class="text-2xl">{{ t.sd_lf_h1 }}</h1>
      <p class="text-sm text-slate">{{ t.sd_lf_subtitle }}</p>
    </div>
    <div class="lf-balance">
      {{ supplier.credit_balance }} {{ t.sd_lf_credits_available }}
    </div>
  </div>

  <div class="lf-filters">
    <select onchange="window.location='?country='+this.value+'&heat={{ current_heat }}'" class="form-input" style="min-width:120px">
      <option value="">{{ t.sd_lf_all_countries }}</option>
      {% for c in countries %}
      <option value="{{ c }}" {% if c == current_country %}selected{% endif %}>{{ c }}</option>
      {% endfor %}
    </select>
    <select onchange="window.location='?country={{ current_country }}&heat='+this.value" class="form-input" style="min-width:100px">
      <option value="">{{ t.sd_lf_all_heat }}</option>
      <option value="hot" {% if current_heat == 'hot' %}selected{% endif %}>HOT</option>
      <option value="warm" {% if current_heat == 'warm' %}selected{% endif %}>WARM</option>
      <option value="cool" {% if current_heat == 'cool' %}selected{% endif %}>COOL</option>
    </select>
  </div>

  {% if leads %}
  <div class="lf-grid">
    {% for lead in leads %}
    <div id="lead-card-{{ lead.id }}">
      {% if lead.is_unlocked %}
      {% include "suppliers/partials/lead_card_unlocked.html" %}
      {% else %}
      {% include "suppliers/partials/lead_card.html" %}
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="card text-center" style="padding:3rem">
    <h3 style="color:#64748B">{{ t.sd_lf_no_match }}</h3>
    <p style="color:#94A3B8;font-size:0.875rem">{{ t.sd_lf_no_match_hint }}</p>
  </div>
  {% endif %}
</main>
{% endblock %}
