<script setup lang="ts">
import { useUserStore } from "@/stores/user";
import * as log from "loglevel";
import { reactive } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

log.debug("LoginView.vue created");
log.debug(route.query);

const state = reactive({
  username: "",
  password: "",
});

const userStore = useUserStore();
</script>

<template>
  <main class="bg-gray-200 lg:px-12 lg:py-12">
    <div class="container-medium">
      <h1 class="mb-8">{{ $t("login.welcomeUk") }}</h1>
      <p class="mb-8">
        {{ $t("login.welcomeText") }}
      </p>
      <p>
        <a
          class="link"
          :href="`/static/media/uk/${$t('login.guidelineFile')}`"
          target="_blank"
        >
          {{ $t("login.guidelineText") }}
        </a>
      </p>
    </div>
    <div class="container-medium">
      <h1 class="mb-8">{{ $t("login.login") }}</h1>

      <form
        class="bg-white p-4 lg:p-8"
        @submit.prevent="
          userStore.handleLogin(
            state.username,
            state.password,
            route.query.next as string
          )
        "
      >
        <div class="mb-4">
          <label class="mb-1 block" for="email">{{ $t("Benutzername") }}</label>
          <input
            id="username"
            v-model="state.username"
            type="text"
            name="username"
            autocomplete="username"
            class="mt-1 block w-96 max-w-full border px-3 py-2"
          />
        </div>
        <div class="mb-4">
          <label class="mb-1 block" for="password">{{ $t("Passwort") }}</label>
          <input
            id="password"
            v-model="state.password"
            type="password"
            name="password"
            autocomplete="current-password"
            class="mt-1 block w-96 max-w-full border px-3 py-2"
          />
        </div>

        <div>
          <input
            data-cy="login-button"
            type="submit"
            value="Login"
            class="btn-primary"
          />
        </div>
      </form>
    </div>
    <div class="container-medium">
      <h2 class="mb-8">{{ $t("footer.contact") }}</h2>
      <address class="not-italic">
        <p class="non-italic">
          {{ $t("uk.contact.title") }}
          <br />
          {{ $t("uk.contact.team") }}
          <br />
          {{ $t("uk.contact.address") }}
          <br />
          <a class="link" href="mailto:uek-support@vbv-afa.ch">
            uek-support@vbv-afa.ch
          </a>
        </p>
      </address>
    </div>
  </main>
</template>

<style scoped></style>
