<template>
  <div
    class="h-full flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100"
  >
    <div class="w-full sm:max-w-md px-6 py-4 bg-white shadow-md rounded">
      <a-form
        layout="horizontal"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
        @keypress.enter.native="submit"
        class="py-8"
      >
        <a-form-item
          :label="trans('Email')"
          :validateStatus="formStatus('email')"
          :help="formHelp('email')"
        >
          <a-input v-model="form.email" :placeholder="trans('Email')" auto-focus />
        </a-form-item>
        <a-form-item
          :label="trans('Password')"
          :validateStatus="formStatus('password')"
          :help="formHelp('password')"
        >
          <a-input-password v-model="form.password" :placeholder="trans('Password')" />
        </a-form-item>
        <div class="text-right">
          <a-button type="primary" :loading="form.processing" @click="submit">{{ trans('Login') }}</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
export default {
  metaInfo() {
    return {
      title: this.trans('Login'),
    }
  },

  data() {
    return {
      form: this.$inertia.form({
        email: undefined,
        password: undefined,
        remember: true,
      }),
    };
  },

  methods: {
    submit() {
      this.form
        .transform((data) => ({
          ...data,
          remember: 'on'
        }))
        .post(this.route("login"), {
          onFinish: () => this.form.reset("password"),
          onError: (error) => console.log(error),
          onSuccess: (res) => console.log(res),
        });
    },
  },
};
</script>
