{% extends "base.html" %}
{% block title %}{{ t.sd_page_title }} - {{ config.APP_NAME }}{% endblock %}
{% block paddle %}{% include "_payment_js.html" %}{% endblock %}

{% block head %}
<style>
  .dash { display: flex; min-height: calc(100vh - 64px); }
  .dash-sidebar {
    width: 240px; flex-shrink: 0; background: #F8FAFC; border-right: 1px solid #E2E8F0;
    padding: 1.5rem 0; display: flex; flex-direction: column;
  }
  .dash-sidebar__header { padding: 0 1.25rem 1.25rem; border-bottom: 1px solid #E2E8F0; }
  .dash-sidebar__name { font-size: 0.9375rem; font-weight: 700; color: #1E293B; }
  .dash-sidebar__tier {
    display: inline-block; font-size: 0.625rem; font-weight: 700; padding: 2px 8px;
    border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px;
  }
  .dash-sidebar__tier--growth { background: #DBEAFE; color: #1D4ED8; }
  .dash-sidebar__tier--pro { background: #DCFCE7; color: #16A34A; }

  .dash-nav { flex: 1; padding: 1rem 0; }
  .dash-nav a {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 1.25rem; font-size: 0.8125rem; color: #64748B;
    text-decoration: none; transition: all 0.1s;
  }
  .dash-nav a svg { width: 16px; height: 16px; flex-shrink: 0; }
  .dash-nav a:hover { background: #EFF6FF; color: #1D4ED8; }
  .dash-nav a.active { background: #EFF6FF; color: #1D4ED8; font-weight: 600; border-right: 3px solid #1D4ED8; }

  .dash-sidebar__footer {
    padding: 1rem 1.25rem; border-top: 1px solid #E2E8F0;
    font-size: 0.8125rem;
  }
  .dash-sidebar__credits {
    background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 8px;
    padding: 8px 12px; color: #1D4ED8; font-weight: 600; text-align: center;
  }

  .dash-main { flex: 1; padding: 2rem; overflow-y: auto; }

  @media (max-width: 768px) {
    .dash { flex-direction: column; }
    .dash-sidebar { width: 100%; flex-direction: row; align-items: center; padding: 0.75rem; overflow-x: auto; }
    .dash-sidebar__header { display: none; }
    .dash-sidebar__footer { display: none; }
    .dash-nav { display: flex; flex: none; padding: 0; gap: 4px; }
    .dash-nav a { padding: 8px 12px; white-space: nowrap; border-right: none !important; border-radius: 6px; }
    .dash-main { padding: 1rem; }
  }
</style>
{% endblock %}

{% block content %}
<div class="dash">
  <!-- Sidebar -->
  <aside class="dash-sidebar">
    <div class="dash-sidebar__header">
      <div class="dash-sidebar__name">{{ supplier.name }}</div>
      <span class="dash-sidebar__tier dash-sidebar__tier--{{ supplier.tier }}">{{ supplier.tier | upper }}</span>
    </div>

    <nav class="dash-nav" id="dash-nav">
      <a href="{{ url_for('suppliers.dashboard', tab='overview') }}"
         hx-get="{{ url_for('suppliers.dashboard_overview') }}"
         hx-target="#dashboard-content"
         hx-push-url="{{ url_for('suppliers.dashboard', tab='overview') }}"
         class="{% if active_tab == 'overview' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"/></svg>
        {{ t.sd_nav_overview }}
      </a>
      {% if supplier.tier in ('growth', 'pro') %}
      <a href="{{ url_for('suppliers.dashboard', tab='leads') }}"
         hx-get="{{ url_for('suppliers.dashboard_leads') }}"
         hx-target="#dashboard-content"
         hx-push-url="{{ url_for('suppliers.dashboard', tab='leads') }}"
         class="{% if active_tab == 'leads' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h2.239a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859M12 3v8.25m0 0-3-3m3 3 3-3"/></svg>
        {{ t.sd_nav_leads }}
      </a>
      {% endif %}
      <a href="{{ url_for('suppliers.dashboard', tab='listing') }}"
         hx-get="{{ url_for('suppliers.dashboard_listing') }}"
         hx-target="#dashboard-content"
         hx-push-url="{{ url_for('suppliers.dashboard', tab='listing') }}"
         class="{% if active_tab == 'listing' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5M3.75 3v18m4.5-18v18M12 3v18m4.5-18v18m4.5-18v18M6 6.75h.008v.008H6V6.75Zm0 3h.008v.008H6V9.75Zm0 3h.008v.008H6v-.008Zm4.5-6h.008v.008H10.5V6.75Zm0 3h.008v.008H10.5V9.75Zm0 3h.008v.008H10.5v-.008Z"/></svg>
        {{ t.sd_nav_listing }}
      </a>
      {% if supplier.tier in ('growth', 'pro') %}
      <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') }}"
         class="{% if active_tab == 'boosts' %}active{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/></svg>
        {{ t.sd_nav_boosts }}
      </a>
      {% endif %}
    </nav>

    {% if supplier.tier == 'basic' %}
    <div style="margin:0.75rem 1.25rem;padding:10px 12px;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;font-size:0.75rem;color:#1D4ED8">
      <strong>{{ t.sd_basic_plan_label }}</strong> — {{ t.sd_basic_plan_desc }}
      <a href="{{ url_for('suppliers.signup') }}" style="display:block;font-weight:600;margin-top:4px;color:#1D4ED8">
        {{ t.sd_upgrade_growth }} &rarr;
      </a>
    </div>
    {% endif %}

    <div class="dash-sidebar__footer">
      <div class="dash-sidebar__credits" id="sidebar-credits">
        {{ supplier.credit_balance }} {{ t.sd_credits }}
      </div>
    </div>
  </aside>

  <script>
    document.getElementById("dash-nav").addEventListener("click", function(e) {
      var link = e.target.closest("a");
      if (!link) return;
      this.querySelectorAll("a").forEach(function(a) { a.classList.remove("active"); });
      link.classList.add("active");
    });
  </script>

  <!-- Main content area -->
  <main class="dash-main" id="dashboard-content"
    hx-get="{% if active_tab == 'leads' and supplier.tier in ('growth', 'pro') %}{{ url_for('suppliers.dashboard_leads') }}{% elif active_tab == 'listing' %}{{ url_for('suppliers.dashboard_listing') }}{% elif active_tab == 'boosts' and supplier.tier in ('growth', 'pro') %}{{ url_for('suppliers.dashboard_boosts') }}{% else %}{{ url_for('suppliers.dashboard_overview') }}{% endif %}"
    hx-trigger="load"
    hx-swap="innerHTML">
    <div style="text-align:center;padding:3rem;color:#94A3B8">{{ t.sd_loading }}</div>
  </main>
</div>
{% endblock %}
