{% extends 'base.html.twig' %}

{% block title %}Anbieter Registrierung abschliessen | Wanted{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}stitch-page{% endblock %}

{% block javascripts %}
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
{% endblock %}

{% block body %}
<section class="bg-[#0e0e0e] text-white min-h-screen pb-32">
    <header class="fixed top-0 w-full z-50 bg-neutral-900/80 backdrop-blur-xl flex items-center justify-center px-6 h-16">
        <div class="flex items-center gap-2">
            <a href="{{ path('app_feed') }}"><img alt="Logo" class="h-8 w-8 object-contain" src="{{ asset('assets/img/top_logo.png') }}"/></a>
            <span class="text-2xl font-bold tracking-tighter text-white">JI:O</span>
        </div>
    </header>

    <main class="pt-24 pb-32 px-6 max-w-5xl mx-auto">
        {% for message in app.flashes('error') %}
            <div class="mb-4 rounded-xl bg-red-900/40 border border-red-500/30 px-4 py-3 text-sm">{{ message }}</div>
        {% endfor %}

        <div class="mb-12 space-y-2">
            <div class="flex items-center gap-3">
                <span class="text-[#ff9064] font-bold tracking-widest text-xs uppercase">Schritt 3 von 3</span>
                <div class="h-px flex-grow bg-[#262626]"></div>
            </div>
            <h1 class="text-4xl md:text-6xl font-extrabold tracking-tighter text-white">Pruefen &amp; abschliessen</h1>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            <section class="lg:col-span-7 space-y-6">
                <div class="rounded-xl overflow-hidden bg-[#1a1a1a] border border-[#484847]/30 p-8">
                    <h2 class="text-3xl font-bold">{{ provider.company_name ?: 'Provider' }}</h2>
                    <p class="text-[#adaaaa]">{{ providerCategoryLabel ?: 'Kategorie' }}</p>
                    <p class="text-[#adaaaa] mt-3">{{ provider.about ?: 'Beschreibung folgt...' }}</p>
                </div>
            </section>

            <aside class="lg:col-span-5 space-y-8">
                <form method="post" class="bg-[#262626]/40 p-8 rounded-xl border border-[#484847]/30 space-y-5">
                    <h3 class="text-xl font-bold">Letzte Bestaetigung</h3>
                    <label class="block">
                        <span class="text-sm text-[#adaaaa]">E-Mail</span>
                        <input class="mt-2 w-full bg-[#20201f] rounded-xl px-4 py-3 text-white" name="email" type="email" required/>
                    </label>
                    <label class="block">
                        <span class="text-sm text-[#adaaaa]">Passwort</span>
                        <input class="mt-2 w-full bg-[#20201f] rounded-xl px-4 py-3 text-white" name="password" type="password" required/>
                    </label>
                    <label class="flex items-start gap-3 text-sm text-[#adaaaa]">
                        <input class="mt-1" type="checkbox" required>
                        <span>Ich stimme den <a href="{{ path('app_terms') }}" class="text-[#ff9064] underline hover:no-underline" target="_blank" rel="noopener noreferrer">Nutzungsbedingungen</a> und der <a href="{{ path('app_privacy') }}" class="text-[#ff9064] underline hover:no-underline" target="_blank" rel="noopener noreferrer">Datenschutzerklaerung</a> von JI:O zu.</span>
                    </label>
                    <button class="w-full bg-gradient-to-r from-[#ff9064] to-[#ff7941] text-black font-extrabold text-lg py-4 rounded-full flex items-center justify-center gap-3">
                        Profil absenden <span class="material-symbols-outlined">rocket_launch</span>
                    </button>
                    <div class="grid grid-cols-3 gap-2 pt-3">
                        <div class="h-1.5 rounded-full bg-[#ff9064]"></div>
                        <div class="h-1.5 rounded-full bg-[#ff9064]"></div>
                        <div class="h-1.5 rounded-full bg-[#ff9064]"></div>
                    </div>
                </form>
            </aside>
        </div>
    </main>
</section>
{% endblock %}