{% extends "base.html" %}
{% block title %} — Step 2: Opret Bruger{% endblock %}

{% block stepper %}
<div class="bg-slate-900/60 border-b border-slate-800">
  <div class="max-w-6xl mx-auto px-4 py-3">
    <div class="flex items-center gap-1 overflow-x-auto">
      {% set step_names = ["Auth", "Opret Bruger", "Tilslut Bank", "Konti", "Transaktioner", "Webhooks"] %}
      {% for i in range(1, 7) %}
        <a href="/demo/step/{{ i }}"
           class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm whitespace-nowrap transition
                  {% if i == 2 %}bg-violet-600 text-white font-semibold
                  {% elif i < 2 %}text-slate-300 hover:text-white
                  {% else %}text-slate-600 hover:text-slate-400{% endif %}">
          <span class="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center
                       {% if i < 2 %}bg-slate-700 text-slate-300
                       {% elif i == 2 %}bg-violet-500 text-white
                       {% else %}bg-slate-800 text-slate-600{% endif %}">{{ i }}</span>
          {{ step_names[i-1] }}
        </a>
        {% if i < 6 %}
          <span class="text-slate-700">›</span>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}

{% block content %}
<div class="mb-6">
  <div class="flex items-center gap-2 mb-1">
    <span class="w-8 h-8 rounded-full bg-violet-600 text-white text-sm font-bold flex items-center justify-center">2</span>
    <div>
      <h2 class="text-xl font-bold text-white">Opret Bruger</h2>
      <p class="text-slate-400 text-sm">Create Test Customer</p>
    </div>
    <span class="ml-2 text-xs px-2 py-0.5 rounded-full font-mono font-semibold bg-slate-800 text-slate-400 border border-slate-700">v1</span>
  </div>
  <p class="text-slate-400 text-sm mt-2 max-w-2xl">
    Opret en Tink-bruger med dit eget <code class="text-violet-300">external_user_id</code> — 
    dette er dit interne kunde-ID som du kan søge på i Tink Console. 
    Tink returnerer et <code class="text-violet-300">user_id</code> som bruges i efterfølgende kald.
  </p>
</div>

{% if error %}
<div class="bg-red-950/50 border border-red-800/50 rounded-xl p-4 mb-6">
  <pre class="text-red-400 text-sm font-mono whitespace-pre-wrap">{{ error }}</pre>
</div>
{% endif %}

{% if existing_user_id %}
<!-- Already created this session -->
<div class="bg-emerald-950/30 border border-emerald-800/40 rounded-xl p-5 mb-6">
  <div class="flex items-center gap-3 mb-3">
    <span class="w-8 h-8 rounded-full bg-emerald-600/20 border border-emerald-600/40 flex items-center justify-center text-emerald-400 text-lg">✓</span>
    <div>
      <p class="text-white font-semibold">Bruger allerede oprettet i denne session</p>
      <p class="text-slate-400 text-sm">Du kan fortsætte til Step 3, eller oprette en ny bruger nedenfor.</p>
    </div>
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-3">
    <div class="bg-slate-900 rounded-lg p-3">
      <p class="text-xs text-slate-500 uppercase tracking-wider mb-1">external_user_id</p>
      <code class="text-emerald-300 font-mono text-sm font-semibold">{{ existing_external_id }}</code>
    </div>
    <div class="bg-slate-900 rounded-lg p-3">
      <p class="text-xs text-slate-500 uppercase tracking-wider mb-1">Tink user_id</p>
      <code class="text-slate-300 font-mono text-xs">{{ existing_user_id }}</code>
    </div>
  </div>
  <div class="mt-4">
    <a href="/demo/step/3"
       class="inline-flex items-center gap-2 px-5 py-2.5 bg-violet-600 hover:bg-violet-500 text-white rounded-xl text-sm font-semibold transition">
      Fortsæt til Step 3 — Tilslut Bank →
    </a>
  </div>
</div>
<details class="mb-6">
  <summary class="cursor-pointer text-sm text-slate-500 hover:text-slate-300 transition">Opret en ny bruger i stedet</summary>
  <div class="mt-4">
{% else %}
<div>
{% endif %}

  <!-- Create user form -->
  <div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden max-w-xl">
    <div class="px-5 py-4 border-b border-slate-800">
      <p class="text-sm font-semibold text-white">Hvem opretter vi?</p>
      <p class="text-xs text-slate-400 mt-0.5">external_user_id bruges til at identificere kunden i Tink Console</p>
    </div>
    <form method="POST" action="/demo/step/2" class="p-5 space-y-4">
      <div>
        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Kundenavn</label>
        <input type="text" name="customer_name"
               placeholder="fx. Henrik Jess, Kunde A, Test User 1"
               value="Henrik Jess"
               class="w-full bg-slate-950 border border-slate-700 rounded-lg px-4 py-2.5 text-white text-sm font-mono
                      placeholder-slate-600 focus:outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500/30 transition">
        <p class="text-xs text-slate-600 mt-1.5">→ bliver til <code class="text-violet-300/70">moneycapp-henrik-jess</code></p>
      </div>
      <div>
        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Marked</label>
        <select name="market"
                class="w-full bg-slate-950 border border-slate-700 rounded-lg px-4 py-2.5 text-white text-sm
                       focus:outline-none focus:border-violet-500 transition">
          <option value="DK" selected>DK — Danmark</option>
          <option value="SE">SE — Sverige</option>
          <option value="NO">NO — Norge</option>
          <option value="GB">GB — United Kingdom</option>
          <option value="DE">DE — Deutschland</option>
        </select>
      </div>
      <button type="submit"
              {% if not app_token_ok %}disabled{% endif %}
              class="w-full py-3 bg-violet-600 hover:bg-violet-500 disabled:bg-slate-700 disabled:cursor-not-allowed
                     text-white rounded-xl text-sm font-semibold transition">
        {% if app_token_ok %}Opret bruger i Tink →{% else %}Kør Step 1 først{% endif %}
      </button>
    </form>
  </div>

{% if existing_user_id %}
  </div>
</details>
{% else %}
</div>
{% endif %}

<!-- API info -->
<div class="mt-6 bg-slate-900/50 border border-slate-800 rounded-xl p-4">
  <p class="text-xs text-slate-500 uppercase tracking-wider mb-3">API endpoint</p>
  <code class="text-emerald-400 font-mono text-sm">POST https://api.tink.com/api/v1/user/create</code>
  <div class="mt-3 bg-slate-950 rounded-lg p-3 overflow-x-auto">
    <pre class="text-xs text-amber-300 font-mono whitespace-pre"># Request body
{
  "external_user_id": "moneycapp-&lt;kundenavn&gt;",  ← dit interne ID
  "market": "DK",
  "locale": "da_DK"
}

# Response
{
  "user_id": "abc123..."  ← Tinks interne ID, brug dette fremadrettet
}</pre>
  </div>
</div>

<!-- Navigation -->
<div class="mt-6 flex justify-start">
  <a href="/demo/step/1"
     class="px-4 py-2.5 border border-slate-700 text-slate-300 hover:text-white hover:border-slate-500 rounded-xl text-sm transition">
    ← Step 1
  </a>
</div>
{% endblock %}