<template>
  <div style="background-image: url(./images/bg-left.jpg);">
    <v-container class="h-100 w-100">
      <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-6 bg-surface-variant">
            <v-img
              class="bg-white"
              height="86px"
              aspect-ratio="16/9"
              src="../globalimages/logo.png"
            ></v-img>
          </div>
          <div class="d-flex mb-6">
            <v-sheet class="">
              <h2 class="text-h6 font-weight-black">
                {{ $t("message.title") }}
              </h2>
              <p class="text-subtitle-1" style="color: #637381;">
                {{ $t("message.sublogin") }}
              </p>
            </v-sheet>
          </div>
          <v-alert
            color="primary"
            density="compact"
            type="info"
            style="width: 100% !important;"
            class="bg-primary-lighten text-primary mt-4 mb-3 w-100"
            text="Enter the registered account"
          >
          </v-alert>
          <v-text-field
            class="mt-3"
            v-model="email"
            :label="$t('message.email')"
            :placeholder="$t('message.placeholderEmail')"
            variant="outlined"
          ></v-text-field>
          <!-- <div
                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
                  >
                    {{ $t("message.password") }}
                    <a
                      class="text-caption text-decoration-none text-blue"
                      href="#"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      {{ $t("message.forgotPassword") }}</a
                    >
                  </div> -->
          <v-text-field
            :label="$t('message.password')"
            v-model="password"
            :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
            :type="visible ? 'text' : 'password'"
            :placeholder="$t('message.placeholderPassword')"
            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
            >
              {{ $t("message.login") }}
              <template v-slot:loader>
                <v-progress-linear indeterminate></v-progress-linear>
              </template>
            </v-btn>
          </div>
        </v-card>
      </v-col>
    </v-container>
  </div>
</template>

<script type="module">
  export default {
    name: "mobile",
    data() {
      return {
        visible: false,
      };
    },
    computed: {
      // Akses state dari store
      count() {
        return this.$store.state.login.count;
      },
      email: {
        get() {
          return this.$store.state.login.email;
        },
        set(val) {
          this.$store.commit("login/setEmail", val);
        },
      },
      password: {
        get() {
          return this.$store.state.login.password;
        },
        set(val) {
          this.$store.commit("login/setPassword", val);
        },
      },
    },
    methods: {
      // Dispatch action ke store
      increment() {
        this.$store.dispatch("increment");
      },
    },
  };
</script>

<style scoped></style>
