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

{% block title %}Login | Wanted{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}stitch-page{% endblock %}

{% block stylesheets %}
    <style>
        .glass-card {
            background: rgba(38, 38, 38, 0.7);
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
        }
        .kinetic-gradient {
            background: linear-gradient(135deg, #ff9064 0%, #ff7941 100%);
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        input:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 144, 100, 0.2);
        }
        .login-input {
            color: #ffffff !important;
            caret-color: #ff9064;
            -webkit-text-fill-color: #ffffff;
            background: #20201f !important;
            border: 1px solid rgba(118, 117, 117, 0.25) !important;
        }
        .login-input::placeholder {
            color: #767575;
            opacity: 1;
            -webkit-text-fill-color: #767575;
        }
        .login-input:-webkit-autofill,
        .login-input:-webkit-autofill:hover,
        .login-input:-webkit-autofill:focus {
            -webkit-text-fill-color: #ffffff !important;
            caret-color: #ff9064;
            -webkit-box-shadow: 0 0 0 1000px #20201f inset;
            box-shadow: 0 0 0 1000px #20201f inset;
            transition: background-color 9999s ease-in-out 0s;
        }
        .login-field-icon {
            color: #adaaaa !important;
        }
        .login-field-wrap:focus-within .login-field-icon {
            color: #ff9064 !important;
        }
        body {
            min-height: max(884px, 100dvh);
        }
    </style>
{% endblock %}

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

{% block body %}
<section class="bg-background text-on-background font-body min-h-screen flex flex-col items-center selection:bg-primary-container selection:text-on-primary-container">
    <header class="flex justify-center items-center w-full pt-8 pb-4 bg-transparent fixed top-0 z-50">
        <a href="{{ path('app_feed') }}" class="flex items-center space-x-2 cursor-pointer hover:opacity-80 transition-opacity active:duration-150 scale-95 active:scale-90" aria-label="Zum Feed">
            <span class="text-4xl font-extrabold text-[#FF5C00] uppercase tracking-widest font-headline">JI:O</span>
        </a>
    </header>

    <main class="flex-grow flex items-center justify-center w-full px-6 pt-24 pb-12">
        <div class="w-full max-w-md space-y-12">
            <div class="space-y-2 text-center md:text-left">
                <h1 class="font-headline font-bold text-5xl tracking-tight text-on-surface">Willkommen</h1>
                <p class="text-on-surface-variant font-body text-lg">Logge dich ein, um fortzufahren.</p>
            </div>

            <div class="glass-card p-8 rounded-xl space-y-6">
                {% if error %}
                    <div class="mb-1 rounded-xl bg-red-900/40 border border-red-500/30 px-4 py-3 text-sm">
                        Login fehlgeschlagen. Bitte pruefe E-Mail und Passwort.
                    </div>
                {% endif %}

                <form method="post" class="space-y-6">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

                    <div class="space-y-2">
                        <label class="block font-label text-sm font-semibold text-on-surface-variant ml-1" for="email">E-Mail</label>
                        <div class="relative group login-field-wrap">
                            <span class="material-symbols-outlined login-field-icon absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant group-focus-within:text-primary transition-colors">mail</span>
                            <input class="login-input w-full bg-surface-container-high border-none py-4 pl-12 pr-4 rounded-xl text-on-surface placeholder:text-outline focus:bg-surface-variant transition-all font-body" id="email" name="_username" value="{{ last_username }}" placeholder="name@beispiel.de" type="email" required autocomplete="email">
                        </div>
                    </div>

                    <div class="space-y-2">
                        <div class="flex justify-between items-center ml-1">
                            <label class="block font-label text-sm font-semibold text-on-surface-variant" for="password">Passwort</label>
                            <a class="text-primary text-xs font-semibold hover:opacity-80" href="mailto:hello@jio.app?subject=JI:O%20Passwort%20%2F%20Zugang">Passwort vergessen?</a>
                        </div>
                        <div class="relative group login-field-wrap">
                            <span class="material-symbols-outlined login-field-icon absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant group-focus-within:text-primary transition-colors">lock</span>
                            <input class="login-input w-full bg-surface-container-high border-none py-4 pl-12 pr-12 rounded-xl text-on-surface placeholder:text-outline focus:bg-surface-variant transition-all font-body" id="password" name="_password" placeholder="••••••••" type="password" required autocomplete="current-password">
                            <button class="absolute right-4 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-on-surface" type="button" data-toggle-password>
                                <span class="material-symbols-outlined">visibility</span>
                            </button>
                        </div>
                    </div>

                    <div class="flex items-start space-x-3 group cursor-pointer">
                        <div class="relative flex items-center">
                            <input class="h-5 w-5 rounded border-none bg-surface-container-high text-primary focus:ring-0 focus:ring-offset-0 cursor-pointer" id="terms" type="checkbox" required>
                        </div>
                        <label class="text-sm text-on-surface-variant leading-snug cursor-pointer select-none" for="terms">
                            Ich akzeptiere die <a href="{{ path('app_terms') }}" class="text-on-surface font-medium underline underline-offset-4 decoration-primary/30 hover:text-primary" target="_blank" rel="noopener noreferrer">Nutzungsbedingungen</a> und die <a href="{{ path('app_privacy') }}" class="text-on-surface font-medium underline underline-offset-4 decoration-primary/30 hover:text-primary" target="_blank" rel="noopener noreferrer">Datenschutzerklaerung</a>.
                        </label>
                    </div>

                    <button class="w-full kinetic-gradient text-on-primary-container font-headline font-extrabold text-lg py-5 rounded-full shadow-lg shadow-primary/10 hover:opacity-90 active:scale-95 transition-all" type="submit">
                        Login
                    </button>
                </form>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <a class="flex flex-col items-start p-6 bg-surface-container-low rounded-xl hover:bg-surface-container transition-colors group" href="{{ path('app_register', {'role': 'customer'}) }}">
                    <span class="text-primary text-xs font-bold tracking-widest uppercase mb-1">Neukunde</span>
                    <span class="text-on-surface font-headline font-bold text-sm">Als Kunde registrieren</span>
                    <div class="mt-4 flex items-center text-primary-dim group-hover:translate-x-1 transition-transform">
                        <span class="text-xs font-bold mr-1">Starten</span>
                        <span class="material-symbols-outlined text-sm">arrow_forward</span>
                    </div>
                </a>
                <a class="flex flex-col items-start p-6 bg-surface-container-low rounded-xl hover:bg-surface-container transition-colors group" href="{{ path('app_register', {'role': 'provider', 'step': '1'}) }}">
                    <span class="text-tertiary text-xs font-bold tracking-widest uppercase mb-1">Profi</span>
                    <span class="text-on-surface font-headline font-bold text-sm">Als Unternehmen registrieren</span>
                    <div class="mt-4 flex items-center text-tertiary group-hover:translate-x-1 transition-transform">
                        <span class="text-xs font-bold mr-1">Anmelden</span>
                        <span class="material-symbols-outlined text-sm">arrow_forward</span>
                    </div>
                </a>
            </div>
        </div>
    </main>

    <div class="fixed bottom-0 left-0 w-full h-1/3 pointer-events-none opacity-20">
        <div class="absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-primary/20 to-transparent"></div>
    </div>
    <div class="fixed inset-0 -z-10 overflow-hidden">
        <img alt="" class="w-full h-full object-cover opacity-10" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBPEjSQHKlI78Z6izxRhbQEcQHq0Oe5RNLkjSeUpx44Fv7O3U6rVewyREDkj-lIPn8X0XV9KSWeQE2zubSv8xEMZCBpCXYfF-ASUVxopxrrHtBn3AVfZH3yU26Gz61xnwsOnaD0J76hSdh6t2kSz8qd1zbE-EeBpin4F9i-yziFznv--oUQKNFXCrOQdQwPx3D7Q5vL6n60cwOqst_EpgE1BYnYAtcBwg5ggUCvlhqaydEDf4EAk7A2ZfBGE4y2BSB4-MmwE7srZsE">
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const toggleBtn = document.querySelector('[data-toggle-password]');
        const passwordInput = document.getElementById('password');
        if (!toggleBtn || !passwordInput) {
            return;
        }
        toggleBtn.addEventListener('click', () => {
            const isPassword = passwordInput.getAttribute('type') === 'password';
            passwordInput.setAttribute('type', isPassword ? 'text' : 'password');
            const icon = toggleBtn.querySelector('.material-symbols-outlined');
            if (icon) {
                icon.textContent = isPassword ? 'visibility_off' : 'visibility';
            }
        });
    });
</script>
{% endblock %}