<script setup lang="ts">
definePageMeta({
    layout: 'login'
})

const login = () => {
    console.log('login')
    navigateTo('/')
}
</script>

<template>
    <div class="p-6">
        <div class="flex flex-col gap-4 m-6 bg-slate-300 rounded-2xl p-6 shadow-md text-sm">
            <h1 class="text-center font-bold text-lg">Kirjaudu</h1>
            <form @submit.prevent="login" class="">
                <label>Käyttäjätunnus
                    <input class="textfield" type="text" id="username" placeholder="Käyttäjätunnus" />
                </label>
                <label>Salasana
                    <input class="textfield" type="password" id="password" placeholder="Salasana" />
                </label>
                <button type="submit" class="btn-primary">Kirjaudu</button>
            </form>
        </div>
    </div>
</template>

<style>
    .textfield {
        border: none;
        border-bottom: 1px solid #ccc;
        max-width: 80%;
        padding: 6px;
    }
</style>
