<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { useAuthApi } from 'src/modules/auth/composables/use-auth-api';

    const auth_api = useAuthApi();

    const email = defineModel<string>('email', { default: '', });
    const is_remembered = ref<boolean>(false);
    const is_employee_email = computed( () => email.value.includes('@targ'));
</script>

<template>
    <q-card class="rounded-15">
        <q-card-section class="text-center bg-primary q-pa-lg">
            <q-img src="/src/assets/logo-targo-white.svg" ratio="4.6" fit="contain" />
        </q-card-section>

        <div class="q-pt-sm q-px-xl q-pb-lg">
            <q-card-section class="text-center text-uppercase">
                <div class="text-h6 text-weight-bold">
                    {{ $t('login.page_header') }}
                </div>
            </q-card-section>

            <q-form @submit="auth_api.login">
                <q-input 
                    v-model="email" 
                    dense 
                    outlined 
                    label-color="primary" 
                    :label="$t('login.email')" 
                />

                <q-card-section class="q-ma-none q-pa-none text-uppercase text-caption text-weight-medium">
                    <q-toggle 
                        v-model="is_remembered" 
                        color="primary" 
                        :label="$t('login.button.remember_me')" 
                    />
                </q-card-section>
                
                <q-card-actions>
                    <q-btn 
                        push 
                        rounded 
                        disabled 
                        type="submit" 
                        color="primary" 
                        :label="$t('login.button.connect')" 
                        class="full-width" 
                    />
                </q-card-actions>
                
                <!-- A implémenter plus tard sans doute, pour les clients. A revoir avec Authentik API pour création de users -->
                <!-- <q-card-section class="text-center q-pa-none q-mt-none">
                    <RouterLink disabled class="text-primary" to="/signup">{{ $t('loginPage.signUp') }}</RouterLink>
                </q-card-section> -->
            </q-form>

            <q-card-section class="row q-pt-sm">
                <q-separator color="primary" class="col self-center"/>
                <span class="col text-primary text-weight-bolder text-center text-uppercase self-center">{{ $t('shared.misc.or') }}</span>
                <q-separator color="primary" class="col self-center"/>
            </q-card-section>

            <q-card-section class="column q-px-sm q-pt-none">
                <q-btn 
                    rounded 
                    push 
                    disabled 
                    color="fb-blue" 
                    icon="img:src/assets/Facebook-f_Logo-White-Logo.wine.svg"
                    :label="$t('login.button.facebook')" 
                    class="full-width row q-mb-sm" 
                >
                    <q-tooltip anchor="top middle" class="bg-primary">{{$t('login.tooltip.coming_soon')}}</q-tooltip>
                </q-btn>
                <q-slide-transition>
                    <div v-if="is_employee_email">
                        <transition 
                            slow 
                            enter-active-class="animated zoomIn" 
                            leave-active-class="animated zoomOut"
                        >
                            <q-btn 
                                push 
                                rounded 
                                color="primary" 
                                icon="img:src/assets/logo-targo-simple.svg" 
                                :label="$t('login.button.employee')" 
                                class="full-width row" 
                                @click="auth_api.oidcLogin" 
                            /> 
                        </transition>
                    </div>
                </q-slide-transition>
            </q-card-section>
        </div>
    </q-card>
</template>