{% 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 LinkedIn-Profil ein, um personalisierte Posts zu erstellen.</p>
    {% if session.company_name %}
    <p class="text-brand-highlight text-sm mt-2">Du wirst als Mitarbeiter von {{ session.company_name }} registriert.</p>
    {% endif %}
</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">
    <!-- Hidden field to indicate employee flow -->
    <input type="hidden" name="is_employee" value="true">

    <!-- Section: Your Profile -->
    <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
        </h2>
        <p class="text-gray-400 text-sm mb-4">Diese Informationen werden in deinem Dashboard angezeigt.</p>

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

            <div>
                <label for="linkedin_url" class="block text-sm font-medium text-gray-300 mb-1">
                    Dein LinkedIn-Profil *
                </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/dein-name"
                       value="{{ prefill.linkedin_url or '' }}">
                <p class="text-xs text-gray-500 mt-1">Wir analysieren deine bisherigen Posts, um deinen Schreibstil zu lernen</p>
            </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 zu deinem Schreibstil, z.B. 'Ich duze immer', 'Nutze 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 %}