<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Onboarding{% endblock %} - LinkedIn Posts</title>
    <link rel="icon" type="image/png" href="/static/favicon.png">
    <link rel="stylesheet" href="/static/tailwind.css">
    <style>
        body { background-color: #3d4848; }
        .card-bg { background-color: #4a5858; border-color: #5a6868; }
        .input-bg { background-color: #3d4848; border-color: #5a6868; }
        .input-bg:focus { border-color: #ffc700; outline: none; }
        .btn-primary { background-color: #ffc700; color: #2d3838; }
        .btn-primary:hover { background-color: #e6b300; }
        .btn-secondary { background-color: #5a6868; color: #fff; }
        .btn-secondary:hover { background-color: #6a7878; }
        .step-active { background-color: #ffc700; color: #2d3838; }
        .step-done { background-color: #22c55e; color: white; }
        .step-pending { background-color: #5a6868; color: #999; }
    </style>
    {% block head %}{% endblock %}
</head>
<body class="text-gray-100 min-h-screen">
    <div class="max-w-4xl mx-auto px-4 py-8">
        <!-- Header -->
        <div class="text-center mb-8">
            <img src="/static/logo.png" alt="Logo" class="h-12 w-auto mx-auto mb-4">
        </div>

        <!-- Progress Steps -->
        {% if steps %}
        <div class="mb-8">
            <div class="flex items-center justify-center">
                {% for step in steps %}
                <div class="flex items-center">
                    <div class="flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium
                        {% if step.status == 'done' %}step-done
                        {% elif step.status == 'active' %}step-active
                        {% else %}step-pending{% endif %}">
                        {% if step.status == 'done' %}
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        {% else %}
                        {{ loop.index }}
                        {% endif %}
                    </div>
                    <span class="ml-2 text-sm {% if step.status == 'active' %}text-white{% else %}text-gray-500{% endif %}">
                        {{ step.name }}
                    </span>
                </div>
                {% if not loop.last %}
                <div class="w-12 h-0.5 mx-2 {% if step.status == 'done' %}bg-green-500{% else %}bg-gray-600{% endif %}"></div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Content Card -->
        <div class="card-bg rounded-xl border p-8">
            {% block content %}{% endblock %}
        </div>
    </div>

    {% block scripts %}{% endblock %}
</body>
</html>
