<style>
  .bst-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1.5rem; }
  .bst-section { background: white; border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.25rem; margin-bottom: 1rem; }
  .bst-section h3 {
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: #94A3B8; margin-bottom: 0.75rem;
  }
  .bst-plan { display: flex; justify-content: space-between; align-items: center; }
  .bst-plan__name { font-size: 1.125rem; font-weight: 700; color: #1E293B; }
  .bst-plan__price { font-size: 1.125rem; font-weight: 700; color: #1D4ED8; }
  .bst-plan__price span { font-size: 0.8125rem; font-weight: 400; color: #94A3B8; }
  .bst-plan__credits { font-size: 0.8125rem; color: #64748B; margin-top: 4px; }

  .bst-boost-card {
    border: 1px solid #E2E8F0; border-radius: 10px; padding: 0.75rem 1rem;
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;
  }
  .bst-boost-card--active { border-color: #BBF7D0; background: #F0FDF4; }
  .bst-boost__name { font-size: 0.8125rem; font-weight: 600; color: #1E293B; }
  .bst-boost__desc { font-size: 0.75rem; color: #64748B; }
  .bst-boost__price { font-size: 0.8125rem; font-weight: 700; color: #1D4ED8; }
  .bst-boost__status { font-size: 0.6875rem; font-weight: 700; color: #16A34A; }

  .bst-credits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; }
  .bst-credit-card {
    border: 1px solid #E2E8F0; border-radius: 10px; padding: 1rem; text-align: center;
  }
  .bst-credit-card__amount { font-size: 1.5rem; font-weight: 800; color: #1E293B; }
  .bst-credit-card__label { font-size: 0.75rem; color: #64748B; }
  .bst-credit-card__price { font-size: 0.9375rem; font-weight: 700; color: #1D4ED8; margin: 0.5rem 0; }
  .bst-buy-btn {
    display: inline-block; padding: 6px 16px; font-size: 0.75rem; font-weight: 600;
    border: 1px solid #1D4ED8; color: #1D4ED8; border-radius: 6px;
    background: white; cursor: pointer; font-family: inherit;
  }
  .bst-buy-btn:hover { background: #EFF6FF; }

  .bst-sidebar { position: sticky; top: 1rem; }
  .bst-summary { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.25rem; }
  .bst-summary h3 { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94A3B8; margin-bottom: 0.75rem; }
  .bst-summary__row { display: flex; justify-content: space-between; font-size: 0.8125rem; padding: 4px 0; }
  .bst-summary__total { border-top: 2px solid #E2E8F0; padding-top: 0.5rem; margin-top: 0.5rem; font-weight: 700; }

  @media (max-width: 768px) {
    .bst-layout { grid-template-columns: 1fr; }
    .bst-credits-grid { grid-template-columns: 1fr; }
  }
</style>

{% set active_boost_types = active_boosts | map(attribute='boost_type') | list %}
{% set plan_info = plan_features.get('supplier_' + supplier.tier, plan_features.get('supplier_growth')) %}
{% set monthly_plan = plan_info.price %}
{% set boost_monthly = 0 %}

<div class="bst-layout">
  <div style="max-width:720px">
    <!-- Current Plan -->
    <div class="bst-section">
      <h3>{{ t.sd_bst_current_plan }}</h3>
      <div class="bst-plan">
        <div>
          <div class="bst-plan__name">{{ plan_info.name }}</div>
          <div class="bst-plan__credits">{{ supplier.monthly_credits }} {{ t.sd_bst_credits_month }}</div>
        </div>
        <div class="bst-plan__price">&euro;{{ plan_info.price }} <span>{{ t.sd_bst_per_mo }}</span></div>
      </div>
    </div>

    <!-- Active Boosts -->
    <div class="bst-section">
      <h3>{{ t.sd_bst_active_boosts }}</h3>
      {% if active_boosts %}
      {% for boost in active_boosts %}
      <div class="bst-boost-card bst-boost-card--active">
        <div>
          <div class="bst-boost__name">{{ boost.boost_type | replace('_', ' ') | title }}</div>
          {% if boost.expires_at %}
          <div class="bst-boost__desc">{{ t.sd_bst_expires }} {{ boost.expires_at[:10] }}</div>
          {% else %}
          <div class="bst-boost__desc">{{ t.sd_bst_active_subscription }}</div>
          {% endif %}
        </div>
        <span class="bst-boost__status">{{ t.sd_bst_active }}</span>
      </div>
      {% endfor %}
      {% else %}
      <p style="color:#94A3B8;font-size:0.8125rem;text-align:center;padding:0.5rem 0">{{ t.sd_bst_no_active_boosts }}</p>
      {% endif %}
    </div>

    <!-- Available Boosts -->
    <div class="bst-section">
      <h3>{{ t.sd_bst_available_boosts }}</h3>
      {% for b in boost_options %}
      {% if b.type not in active_boost_types %}
      <div class="bst-boost-card">
        <div>
          <div class="bst-boost__name">{{ t[b.name_key] }}</div>
          <div class="bst-boost__desc">{{ t[b.desc_key] }}</div>
        </div>
        <div style="text-align:right">
          <div class="bst-boost__price">&euro;{{ b.price }}/mo</div>
          {% if price_ids.get(b.key) %}
          <button type="button" class="bst-buy-btn"
            onclick="buyItem('{{ b.key }}', {supplier_id:'{{ supplier.id }}'}, this)">
            {{ t.sd_bst_activate }}
          </button>
          {% else %}
          <span style="font-size:0.6875rem;color:#94A3B8">{{ t.sd_bst_not_configured }}</span>
          {% endif %}
        </div>
      </div>
      {% endif %}
      {% endfor %}
    </div>

    <!-- Credit Packs -->
    <div class="bst-section">
      <h3>{{ t.sd_bst_buy_credits }}</h3>
      <div class="bst-credits-grid">
        {% for cp in credit_packs %}
        <div class="bst-credit-card">
          <div class="bst-credit-card__amount">{{ cp.amount }}</div>
          <div class="bst-credit-card__label">{{ t.sd_bst_credits }}</div>
          <div class="bst-credit-card__price">&euro;{{ cp.price }}</div>
          {% if price_ids.get(cp.key) %}
          <button type="button" class="bst-buy-btn"
            onclick="buyItem('{{ cp.key }}', {supplier_id:'{{ supplier.id }}'}, this)">
            {{ t.sd_bst_buy }}
          </button>
          {% else %}
          <span style="font-size:0.6875rem;color:#94A3B8">{{ t.sd_bst_not_configured }}</span>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- Summary Sidebar -->
  <div class="bst-sidebar">
    <div class="bst-summary">
      <h3>{{ t.sd_bst_summary }}</h3>
      <div class="bst-summary__row">
        <span>{{ plan_info.name }} {{ t.sd_bst_plan_suffix }}</span>
        <span>&euro;{{ plan_info.price }}/mo</span>
      </div>
      {% for boost in active_boosts %}
      {% if not boost.expires_at %}
      <div class="bst-summary__row">
        <span>{{ boost.boost_type | replace('_', ' ') | title }}</span>
        <span>{{ t.sd_bst_subscription }}</span>
      </div>
      {% endif %}
      {% endfor %}
      <div class="bst-summary__row bst-summary__total">
        <span>{{ t.sd_bst_credits_balance }}</span>
        <span style="color:#1D4ED8">{{ supplier.credit_balance }}</span>
      </div>
    </div>
  </div>
</div>

<script>
function buyItem(priceKey, customData, btn) {
  var label = btn.textContent;
  btn.disabled = true;
  btn.textContent = '...';
  fetch('/billing/checkout/item', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({price_key: priceKey, custom_data: customData}),
  })
  .then(function(r) { return r.json(); })
  .then(function(data) {
    if (data.error) { alert(data.error); }
    else { startCheckout(data); }
    btn.disabled = false;
    btn.textContent = label;
  })
  .catch(function() {
    btn.disabled = false;
    btn.textContent = label;
  });
}
</script>
