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

{% block title %}Anbieter Registrierung Schritt 2 | 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 justify-between w-full max-w-4xl">
            <div class="flex items-center gap-2">
                <a href="{{ path('app_register', {role: 'provider', step: '1'}) }}"><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>
            <span class="text-neutral-400 text-sm uppercase tracking-widest">Anbieter Registrierung</span>
        </div>
    </header>

    <main class="pt-24 px-6 max-w-5xl mx-auto">
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-4">
            <div>
                <span class="text-[#ff9064] text-sm font-semibold tracking-widest uppercase mb-2 block">Schritt 2 von 3</span>
                <h1 class="text-4xl md:text-6xl font-extrabold tracking-tighter leading-tight">Auftritt &amp;<br/>Erreichbarkeit</h1>
            </div>
            <div class="flex items-center gap-2 mb-2">
                <div class="h-1.5 w-12 rounded-full bg-[#ff9064]"></div>
                <div class="h-1.5 w-12 rounded-full bg-[#ff9064]"></div>
                <div class="h-1.5 w-12 rounded-full bg-[#262626]"></div>
            </div>
        </div>

        <form method="post" class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <label class="block">
                <span class="text-sm uppercase tracking-widest text-[#adaaaa] mb-2 block">Stadt</span>
                <input class="w-full bg-[#20201f] border-none rounded-xl py-4 px-4 text-white" name="city" value="{{ provider.city ?? '' }}" placeholder="Koeln" required type="text"/>
            </label>
            <label class="block">
                <span class="text-sm uppercase tracking-widest text-[#adaaaa] mb-2 block">Adresse</span>
                <input class="w-full bg-[#20201f] border-none rounded-xl py-4 px-4 text-white" name="address" value="{{ provider.address ?? '' }}" placeholder="Strasse, PLZ, Ort" required type="text"/>
            </label>
            <label class="block">
                <span class="text-sm uppercase tracking-widest text-[#adaaaa] mb-2 block">Telefon</span>
                <input class="w-full bg-[#20201f] border-none rounded-xl py-4 px-4 text-white" name="phone" value="{{ provider.phone ?? '' }}" placeholder="+49 ..." type="text"/>
            </label>
            <label class="block">
                <span class="text-sm uppercase tracking-widest text-[#adaaaa] mb-2 block">Webseite</span>
                <input class="w-full bg-[#20201f] border-none rounded-xl py-4 px-4 text-white" name="website" value="{{ provider.website ?? '' }}" placeholder="https://..." type="url"/>
            </label>
            <label class="md:col-span-2 block">
                <span class="text-sm uppercase tracking-widest text-[#adaaaa] mb-2 block">Instagram</span>
                <input class="w-full bg-[#20201f] border-none rounded-xl py-4 px-4 text-white" name="instagram" value="{{ provider.instagram ?? '' }}" placeholder="@profil" type="text"/>
            </label>

            <div class="md:col-span-2 flex justify-between items-center mt-6">
                <a href="{{ path('app_register', {role: 'provider', step: '1'}) }}" class="px-8 py-3 rounded-full bg-[#262626]/70 text-neutral-300">Zurueck</a>
                <button class="px-8 py-3 rounded-full bg-gradient-to-r from-[#ff9064] to-[#ff7941] text-black font-bold">Weiter</button>
            </div>
        </form>
    </main>
</section>
{% endblock %}