<template>
    <v-app id="inspire">
        <v-row no-gutters>
            <v-col lg="8" md="7">
                <v-img
                    min-height="100vh"
                    cover
                    style="background-repeat: repeat-y;"
                    class="bg-white"
                    src="./images/bg-left.jpg"
                ></v-img>
            </v-col>
            <v-col lg="4" md="5">
                <v-container class="fill-height" fluid>
                    <v-col align-self="center">
                        <v-card
                            class="mx-auto px-5 py-12"
                            elevation="0"
                            rounded="lg"
                            width="75%"
                        >
                            <div class="d-flex justify-center mb-16 bg-surface-variant">
                                <v-img
                                    class="bg-white"
                                    height="86px"
                                    aspect-ratio="16/9"
                                    src="../globalimages/logo.png"
                                ></v-img>
                            </div>
                            <v-alert
                                density="compact"
                                :text="alert.message"
                                :type="alert.type"
                                class="mt-4 mb-3 w-100"
                                variant="tonal"
                            >
                            </v-alert>
                            <v-text-field
                                :label="$t('message.authtext')"
                                v-model="password"
                                :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
                                :type="visible ? 'text' : 'password'"
                                :placeholder="$t('message.authtext')"
                                variant="outlined"
                                @click:append-inner="visible = !visible"
                            ></v-text-field>
                            <div class="text-center">
                                <v-btn
                                    :loading="loading"
                                    @click="login"
                                    class="mt-5 text-none"
                                    color="blue"
                                    size="large"
                                    variant="elevated"
                                    block
                                >
                                    SUBMIT
                                    <template v-slot:loader>
                                        <v-progress-circular indeterminate></v-progress-circular>
                                    </template>
                                </v-btn>
                            </div>
                        </v-card>
                    </v-col>
                </v-container>
            </v-col>
        </v-row>
    </v-app>
</template>

<script type="module">
    export default {
        name: "dekstop",
        data() {
            return {
                visible: false
            };
        },
        computed: {
            alert() {
                return this.$store.state.auth.alert
            },
            authcode: {
                get() {
                    return this.$store.state.auth.authcode;
                },
                set(val) {
                    this.$store.commit("auth/setAuthcode", val);
                }
            }
        },
        methods: {
            submit() {
                this.$store.dispatch("auth/submit")
            }
        },
    };
</script>

<style scoped></style>