<script setup lang="ts">
import { ref } from 'vue';
const { $encodeBase64 } = useNuxtApp();

const loginKeycloack = async () => {
    const cookies = useCookie('user_token');
    try {
        const response = await $fetch('/api/auth/login', { method: 'POST', mode: 'no-cors' }).then((response) => {
            if (response.callbackURL !== null || response.callbackURL !== undefined || response.callbackURL !== '') {
                cookies.value = $encodeBase64('ini_token_user');
                window.location.href = response.callbackURL
            }
        });
    } catch (error) {
        console.error('Login failed:', error);
    }
}

</script>

<template>
    <v-row class="d-flex mb-3">
        <!-- <v-col cols="12">
            <v-label class="font-weight-bold mb-1">Username</v-label>
            <v-text-field variant="outlined" density="compact" hide-details color="primary"></v-text-field>
        </v-col>
        <v-col cols="12">
            <v-label class="font-weight-bold mb-1">Password</v-label>
            <v-text-field variant="outlined" density="compact" type="password" hide-details
                color="primary"></v-text-field>
        </v-col>
        <v-col cols="12" class="pt-0">
            <div class="d-flex flex-wrap align-center">
                <v-checkbox v-model="checkbox" color="primary" hide-details>
                    <template v-slot:label class="text-body-1">Remeber this Device</template>
</v-checkbox>
<div class="ml-sm-auto">
    <NuxtLink to="/" class="text-primary text-decoration-none text-body-1 opacity-1 font-weight-medium">
        Forgot
        Password ?</NuxtLink>
</div>
</div>
</v-col> -->
        <v-col cols="12" class="pt-0">
            <v-btn @click="loginKeycloack" color="primary" size="large" block flat>Sign in</v-btn>
        </v-col>
    </v-row>
</template>
