<script>
import {mapGetters, mapActions, mapMutations} from "vuex";

export default {
  name: 'LogIn',
  components: {
  },
  data() {
    return {
      login: "",
      password: ""
    }
  },
  computed: {
    ...mapGetters('auth', ['errorMsg', "my_comp"])
  },
  mounted() {
    localStorage.removeItem('token')
  },
  unmounted() {
    this.login = ""
    this.password = ""
  },
  methods: {
    ...mapActions('auth', ['signin']),
    ...mapMutations('auth', ["set_my_comp" ])
  },
}

</script>

<template>
  <main>
    <div
      class="login"
      style="max-height: 100vh"
    >
      <div class="container sm:px-10">
        <div class="block xl:grid grid-cols-2 gap-4">
          <!-- BEGIN: Login Info -->
          <div
            style="z-index: 1;"
            class="hidden relative xl:flex flex-col min-h-screen"
          >
            <div class="my-auto">
              <div class="-intro-x text-white font-medium text-4xl leading-tight">
                <img
                  alt="логотип"
                  class="mb-8"
                  src="/images/illustration.svg"
                >
                <div>
                  <a
                    href="/"
                    class="-intro-x flex items-center gap-2 pt-5 text-white hover:text-white"
                  >
                    <img
                      alt="логотип"
                      style="width: 40px; height: 40px"
                      src="/images/favicon-white.ico"
                    >
                    Live Monitor
                  </a>
                </div>
              </div>
              <div class="-intro-x mt-5 text-lg text-white text-opacity-70 dark:text-slate-400">
                Мониторинг СПС максимально приближенный
                <br>
                к режиму реального времени
              </div>
            </div>
          </div>

          <!-- END: Login Info -->
          <!-- BEGIN: Login Form -->
          <div class="h-screen xl:h-auto flex py-5 xl:py-0 my-10 xl:my-0">
            <div class="my-auto mx-auto xl:ml-20 bg-white dark:bg-darkmode-600 xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto">
              <h2 class="intro-x font-bold text-2xl xl:text-3xl dark:text-gray-100 text-center xl:text-left">
                Вход
              </h2>
              <div class="intro-x mt-2 text-slate-400 xl:hidden text-center">
                Мониторинг СПС максимально приближенный
                к режиму реального времени
              </div>

              <div
                id="login_form"
                phx-update="ignore"
              >
                <div class="space-y-4 bg-white mt-10 dark:bg-darkmode-600">
                  <div phx-feedback-for="user[login]">
                    <label
                      for="user_login"
                      class="block text-sm leading-6 text-zinc-800 dark:text-white"
                    >
                      Логин
                    </label>
                    <input
                      id="user_login"
                      v-model="login"
                      type="text"
                      name="login"
                      class="block w-full rounded-lg border-zinc-300 py-[1px] px-[11px] text-zinc-900 focus:outline-none focus:ring-4 text-sm sm:leading-6 phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5 border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5 "
                      required=""
                    >
                  </div>
                  <div
                    class="relative"
                    phx-feedback-for="user[password]"
                  >
                    <label
                      for="user_password"
                      class="block text-sm leading-6 text-zinc-800 dark:text-white"
                    >
                      Пароль
                    </label>
                    <input
                      id="user_password"
                      v-model="password"
                      type="password"
                      name="password"
                      class="block w-full rounded-lg border-zinc-300 py-[1px] px-[11px] text-zinc-900 focus:outline-none focus:ring-4 text-sm sm:leading-6 phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5 border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5 "
                      required=""
                    >
                    <i
                      id="show_password"
                      class="cursor-pointer transition-all text-slate-500 hover:text-slate-800 absolute ri-eye-line bottom-[4px] right-[7px]"
                    />
                    <i
                      id="hide_password"
                      class="hidden cursor-pointer transition-all text-slate-500 hover:text-slate-800 absolute ri-eye-off-line bottom-[4px] right-[7px]"
                    />
                    <div
                      v-if="errorMsg"
                      class="text-red-600 mt-1 ml-1"
                    >
                      {{ errorMsg }}
                    </div>
                  </div>

                  <div class="intro-x flex text-slate-600 dark:text-slate-500 text-xs sm:text-sm mt-4">
                    <div class="flex items-center mr-auto">
                      <div phx-feedback-for="user[remember_me]">
                        <label class="flex items-center gap-4 text-sm leading-6 text-zinc-600 dark:text-white">
                          <input
                            type="hidden"
                            name="user[remember_me]"
                            value="false"
                          >
                          <input
                            id="user_remember_me"
                            :value="my_comp"
                            type="checkbox"
                            name="user[remember_me]"
                            class="rounded border-zinc-300 text-zinc-900 focus:ring-zinc-900"
                            @input="set_my_comp"
                          >
                          Мой компьютер
                        </label>
                      </div>
                    </div>
                    <span />
                  </div>
                  <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left flex">
                    <button
                      type="button"
                      class="phx-submit-loading:opacity-75 rounded-lg bg-slate-700 hover:bg-slate-800 py-1 px-3 text-sm font-semibold leading-6 text-white active:text-white/80 mr-3 px-4"
                      phx-disable-with="Вход..."
                      style="width: 150px"
                      @click="signin({login, password})"
                    >
                      Войти
                    </button>
                    <button
                      type="button"
                      style="width: 150px"
                      onclick="toggleDark()"
                      class="btn btn-outline-secondary py-1 w-full xl:w-36 mt-3 xl:mt-0 align-top"
                    >
                      Темный режим
                    </button>
                  </div>
                </div>
              </div>
              <div class="text-center my-6">
                <span class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"> Восстановить пароль можно через обращение в НИАЦ АО ВНИИЖТ</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
