<template>
    <div style="background-image: url(./images/bg-left.jpg); height: 100vh;">
        <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="90%"
                >
                    <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>
    </div>
</template>

<script type="module">
    export default {
        name: "mobile",
        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() {
                
            }
        },
    };
</script>

<style scoped></style>