{% extends "onboarding/base.html" %}

{% block title %}Profil einrichten{% endblock %}

{% block content %}
<div class="text-center mb-8">
    <h1 class="text-2xl font-bold text-white mb-2">Profil einrichten</h1>
    <p class="text-gray-400">Richte dein Ghostwriter-Profil ein und gib die Daten deines Kunden an.</p>
</div>

{% if error %}
<div class="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded-lg mb-6">
    {{ error }}
</div>
{% endif %}

<form method="POST" action="/onboarding/profile" class="space-y-8">
    <!-- Section: Ghostwriter (You) -->
    <div class="bg-brand-bg border border-gray-600 rounded-xl p-6">
        <h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            <svg class="w-5 h-5 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
            </svg>
            Deine Daten (Ghostwriter)
        </h2>
        <p class="text-gray-400 text-sm mb-4">Diese Informationen werden in deinem Dashboard angezeigt.</p>

        <div class="grid md:grid-cols-2 gap-4">
            <div>
                <label for="ghostwriter_name" class="block text-sm font-medium text-gray-300 mb-1">
                    Dein Name *
                </label>
                <input type="text" id="ghostwriter_name" name="ghostwriter_name" required
                       class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                       placeholder="Max Mustermann"
                       value="{{ prefill.ghostwriter_name or session.linkedin_name or '' }}">
            </div>
            <div>
                <label for="creator_email" class="block text-sm font-medium text-gray-300 mb-1">
                    Deine E-Mail
                </label>
                <input type="email" id="creator_email" name="creator_email"
                       class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                       placeholder="ghostwriter@email.de"
                       value="{{ prefill.creator_email or session.email or '' }}">
                <p class="text-xs text-gray-500 mt-1">Du wirst über Entscheidungen benachrichtigt</p>
            </div>
        </div>
    </div>

    <!-- Section: Client/Customer -->
    <div class="bg-brand-bg border border-gray-600 rounded-xl p-6">
        <h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            <svg class="w-5 h-5 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
            Kunden-Daten (für wen du schreibst)
        </h2>
        <p class="text-gray-400 text-sm mb-4">Die Person/Marke, für die du LinkedIn-Posts erstellst.</p>

        <div class="space-y-4">
            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label for="customer_name" class="block text-sm font-medium text-gray-300 mb-1">
                        Kunden-Name *
                    </label>
                    <input type="text" id="customer_name" name="customer_name" required
                           class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                           placeholder="Lisa Kundin"
                           value="{{ prefill.customer_name or '' }}">
                </div>
                <div>
                    <label for="customer_email" class="block text-sm font-medium text-gray-300 mb-1">
                        Kunden E-Mail
                    </label>
                    <input type="email" id="customer_email" name="customer_email"
                           class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                           placeholder="kunde@email.de"
                           value="{{ prefill.customer_email or '' }}">
                    <p class="text-xs text-gray-500 mt-1">Genehmigt Posts per E-Mail (optional)</p>
                </div>
            </div>

            <div>
                <label for="linkedin_url" class="block text-sm font-medium text-gray-300 mb-1">
                    LinkedIn-Profil des Kunden *
                </label>
                <input type="url" id="linkedin_url" name="linkedin_url" required
                       class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                       placeholder="https://linkedin.com/in/kunde-name"
                       value="{{ prefill.linkedin_url or '' }}">
                <p class="text-xs text-gray-500 mt-1">Wir analysieren die bisherigen Posts, um den Schreibstil zu lernen</p>
            </div>

            <div>
                <label for="company_name" class="block text-sm font-medium text-gray-300 mb-1">
                    Firma des Kunden (optional)
                </label>
                <input type="text" id="company_name" name="company_name"
                       class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                       placeholder="Kunden GmbH"
                       value="{{ prefill.company_name or '' }}">
            </div>
        </div>
    </div>

    <!-- Section: Writing Style Notes -->
    <div class="bg-brand-bg border border-gray-600 rounded-xl p-6">
        <h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            <svg class="w-5 h-5 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
            </svg>
            Schreibstil-Notizen (optional)
        </h2>

        <textarea id="writing_style_notes" name="writing_style_notes" rows="4"
                  class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                  placeholder="Besondere Hinweise zum Schreibstil des Kunden, z.B. 'Duzt immer', 'Nutzt oft Emojis', 'Formeller Ton', etc.">{{ prefill.writing_style_notes or '' }}</textarea>
    </div>

    <div class="flex justify-end pt-4">
        <button type="submit" class="btn-primary font-medium py-3 px-8 rounded-lg transition-colors flex items-center gap-2">
            Weiter
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
            </svg>
        </button>
    </div>
</form>
{% endblock %}