{#
/**
 * @file
 * Theme override for the installation page content.
 * The current_step variable is set in constructor_preprocess_install_page().
 */
#}
{% set steps = [
    { title: 'Choose Language'|t, desc: 'Select installation language'|t },
    { title: 'Database Setup'|t, desc: 'Configure database connection'|t },
    { title: 'Site Basics'|t, desc: 'Configure basic site settings'|t },
    { title: 'Languages'|t, desc: 'Select languages for your site'|t },
    { title: 'Content Types'|t, desc: 'Define your content structure'|t },
    { title: 'AI Integration'|t, desc: 'Set up AI content generation'|t },
    { title: 'Finalize'|t, desc: 'Complete installation'|t }
] %}
{% set total_steps = steps|length %}

{# current_step is passed from constructor_preprocess_install_page() #}
{% set current = current_step|default(1) %}

<div class="flex min-h-screen">
    <!-- Sidebar -->
    <aside class="w-80 bg-white border-r border-gray-100 p-8 flex flex-col fixed h-full overflow-y-auto">
        <!-- Logo -->
        <div class="flex items-center gap-2 mb-12">
            <div class="w-8 h-8">
                <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="16" cy="16" r="14" stroke="#2563eb" stroke-width="2"/>
                    <circle cx="16" cy="16" r="6" fill="#2563eb"/>
                </svg>
            </div>
            <span class="text-xl font-semibold text-gray-900">Constructor</span>
        </div>

        <!-- Steps -->
        <nav class="flex-1 overflow-y-auto">
            <ol class="relative">
                {% for step in steps %}
                <li class="pb-8 relative">
                    {% if not loop.last %}
                    <div class="absolute left-4 top-8 w-px h-full {{ loop.index < current ? 'bg-blue-600' : 'bg-gray-200' }}"></div>
                    {% endif %}
                    <div class="flex gap-4">
                        {% if loop.index < current %}
                        <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium shrink-0 relative z-10">
                            <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.5" d="M5 13l4 4L19 7"/>
                            </svg>
                        </div>
                        {% elseif loop.index == current %}
                        <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium shrink-0 relative z-10">
                            {{ loop.index }}
                        </div>
                        {% else %}
                        <div class="w-8 h-8 rounded-full border-2 border-gray-200 bg-white text-gray-400 flex items-center justify-center text-sm font-medium shrink-0 relative z-10">
                            {{ loop.index }}
                        </div>
                        {% endif %}
                        <div>
                            <h3 class="font-semibold {{ loop.index <= current ? 'text-gray-900' : 'text-gray-400' }}">{{ step.title }}</h3>
                            <p class="text-sm {{ loop.index <= current ? 'text-gray-500' : 'text-gray-400' }} mt-1">{{ step.desc }}</p>
                        </div>
                    </div>
                </li>
                {% endfor %}
            </ol>
        </nav>

        <!-- Footer -->
        <div class="text-xs text-gray-400 pt-4 border-t border-gray-100 mt-4">
            {{ 'Powered by Drupal 11'|t }}
        </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 ml-80">
        <div class="min-h-screen px-10 py-10">
            <!-- Page Header -->
            <div class="mb-6">
                <p class="text-sm text-gray-500 mb-1">{{ 'Step'|t }} {{ current }}/{{ total_steps }}</p>
                <h1 class="text-4xl font-bold text-gray-900 mb-2">{{ title }}</h1>
            </div>

            <hr class="border-gray-200 mb-8">

            <!-- Messages -->
            {% if messages %}
            <div class="mb-6">
                {{ messages }}
            </div>
            {% endif %}

            <!-- Form Content -->
            <div>
                {{ page.content }}
            </div>
        </div>
    </main>
</div>
