{% extends "base.html" %}

{% block title %}{{ t.sup_waitlist_page_title }} - {{ config.APP_NAME }}{% endblock %}

{% block content %}
<main class="container-page py-12">
  <div class="card max-w-md mx-auto mt-8">
    {% set plan_info = plans.get(plan, plans['supplier_growth']) %}

    <h1 class="text-2xl mb-1">{{ t.sup_waitlist_h1 }}</h1>
    <p class="text-slate mb-6">{{ t.sup_waitlist_intro | tformat(plan_name=plan_info.name) }}</p>

    <div class="bg-slate-50 border border-slate-200 rounded-lg p-4 mb-6">
      <h3 class="font-semibold text-navy text-sm mb-2">{{ t.sup_waitlist_plan_h3 | tformat(name=plan_info.name) }}</h3>
      <ul class="text-sm text-slate-dark space-y-1">
        {% for key in plan_info.feature_keys[:4] %}
        <li class="flex items-start gap-2">
          <svg class="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span>{{ t[key] }}</span>
        </li>
        {% endfor %}
      </ul>
    </div>

    <form method="post" action="{{ url_for('suppliers.signup_waitlist') }}" class="space-y-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="plan" value="{{ plan }}">

      <div>
        <label for="email" class="form-label">{{ t.sup_waitlist_email_label }}</label>
        <input
          type="email"
          id="email"
          name="email"
          class="form-input"
          placeholder="you@company.com"
          required
          autofocus
        >
        <p class="form-hint">{{ t.sup_waitlist_hint }}</p>
      </div>

      <button type="submit" class="btn w-full">{{ t.sup_waitlist_submit }}</button>
    </form>

    <p class="text-center text-sm text-slate mt-6">
      {{ t.sup_waitlist_signin_text }}
      <a href="{{ url_for('auth.login') }}">{{ t.sup_waitlist_signin_link }}</a>
    </p>
  </div>
</main>
{% endblock %}
