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

{% block title %}Anbieter Registrierung Schritt 1 | 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="w-full top-0 sticky z-50 bg-[#0e0e0e]">
        <div class="flex items-center justify-between px-6 py-4 w-full">
            <div class="flex items-center gap-4">
                <a href="{{ path('app_register') }}" class="text-[#ff5c00]"><span class="material-symbols-outlined">arrow_back</span></a>
                <h1 class="text-lg font-bold tracking-tight text-[#ff5c00]">Als Anbieter registrieren</h1>
            </div>
            <a href="{{ path('app_feed') }}"><img alt="Wanted Logo" class="h-6" src="{{ asset('assets/img/top_logo.png') }}"/></a>
        </div>
    </header>

    <main class="px-6 pt-8 max-w-md mx-auto">
        <div class="flex gap-2 mb-10">
            <div class="h-1 flex-1 bg-[#1a1a1a] rounded-full"><div class="h-1 w-full rounded-full bg-gradient-to-r from-[#ff5c00] to-[#ff8a00]"></div></div>
            <div class="h-1 flex-1 bg-[#1a1a1a] rounded-full"></div>
            <div class="h-1 flex-1 bg-[#1a1a1a] rounded-full"></div>
        </div>

        <section class="mb-10">
            <h2 class="text-4xl font-extrabold tracking-tight mb-3">Erstelle dein <span class="text-[#ff5c00]">Profil</span></h2>
            <p class="text-[#767575] leading-relaxed">Lege den Grundstein. Dein Profil ist das Erste, was Kunden sehen.</p>
        </section>

        <form method="post" class="space-y-6">
            <label class="block">
                <span class="text-xs uppercase tracking-widest text-[#767575] font-bold mb-2 ml-1 block">Anbietername</span>
                <input class="w-full bg-[#20201f] border-none rounded-xl px-4 py-4 text-white" name="company_name" value="{{ provider.company_name ?? '' }}" placeholder="e.g. Alex Rivera" required type="text"/>
            </label>
            <label class="block">
                <span class="text-xs uppercase tracking-widest text-[#767575] font-bold mb-2 ml-1 block">Service-Kategorie</span>
                <select class="w-full bg-[#20201f] border-none rounded-xl px-4 py-4 text-white" name="category_slug" required>
                    <option value="" disabled {% if not (provider.category_slug ?? '') %}selected{% endif %}>Bitte waehlen</option>
                    {% for cat in categories %}
                        <option value="{{ cat.slug }}" {% if (provider.category_slug ?? '') == cat.slug %}selected{% endif %}>{{ cat.name }}</option>
                    {% endfor %}
                </select>
            </label>
            <label class="block">
                <span class="text-xs uppercase tracking-widest text-[#767575] font-bold mb-2 ml-1 block">Kurzbeschreibung</span>
                <textarea class="w-full bg-[#20201f] border-none rounded-xl px-4 py-4 text-white resize-none" name="about" placeholder="Erzaehl kurz, was dich besonders macht..." rows="4">{{ provider.about ?? '' }}</textarea>
            </label>

            <div class="pt-6">
                <button class="w-full bg-gradient-to-r from-[#ff9064] to-[#ff7941] text-black rounded-full py-4 font-bold">Weiter</button>
            </div>
        </form>
    </main>
</section>
{% endblock %}