{% extends "base.html" %}

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

{% block content %}
<main class="container-page py-12">
  <div class="card max-w-md mx-auto mt-8">
    <h1 class="text-2xl mb-2">{{ t.waitlist_markets_title }}</h1>
    <p class="text-slate mb-6">{{ t.waitlist_markets_sub }}</p>

    <ul class="list-disc pl-5 space-y-1 text-sm text-slate-dark mb-6">
      <li>{{ t.waitlist_markets_feature1 }}</li>
      <li>{{ t.waitlist_markets_feature2 }}</li>
      <li>{{ t.waitlist_markets_feature3 }}</li>
    </ul>

    {% if confirmed %}
    <div class="alert alert--success mb-4">
      <p class="font-semibold">{{ t.waitlist_markets_confirmed_title }}</p>
      <p class="text-sm">{{ t.waitlist_markets_confirmed_body }}</p>
    </div>
    {% else %}
    <form method="post" class="space-y-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

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

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

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