<script setup>
import GuestLayout from '@/Layouts/GuestLayout.vue';
import { Head, router } from '@inertiajs/vue3';

defineProps({
    canDevLogin: Boolean,
});
</script>

<template>
    <GuestLayout>
        <Head title="Anmelden" />

        <div class="flex flex-col items-center space-y-6">
            <h1 class="text-2xl font-bold text-gray-800">
                Willkommen
            </h1>

            <p class="text-sm text-gray-600 text-center">
                Melde dich mit deinem ChurchTools-Konto an, um fortzufahren.
            </p>

            <a
                :href="route('auth.churchtools')"
                class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                data-testid="login-oauth-button"
            >
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                </svg>
                Mit ChurchTools anmelden
            </a>

            <button
                data-testid="login-test-button"
                v-if="canDevLogin"
                @click="router.post(route('dev-login'))"
                class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-amber-500 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
            >
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                </svg>
                Test-Anmeldung
            </button>
        </div>
    </GuestLayout>
</template>
