<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex bg-image flex-center">
        <q-card
          v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }"
        >
          <q-card-section>
            <q-img fit="scale-down" src="~assets/oysqn_logo.png" />
          </q-card-section>
          <q-card-section>
            <div class="text-center q-pt-sm">
              <div class="col text-h6">Log in</div>
            </div>
          </q-card-section>
          <q-card-section>
            <q-form class="q-gutter-md">
              <q-input
                v-model="email"
                label="E-Mail"
                type="email"
                color="darkblue"
                filled
              ></q-input>
              <q-input
                v-model="password"
                label="Password"
                type="password"
                color="darkblue"
                filled
              ></q-input>
              <q-btn
                type="submit"
                @click="login($router, email, password)"
                label="Login"
                color="primary"
              ></q-btn>
              <!-- <q-btn
                type="button"
                @click="register"
                color="secondary"
                label="Register"
                flat
              ></q-btn> -->
            </q-form>
          </q-card-section>
          <q-card-section><GoogleOauthComponent /></q-card-section>
        </q-card>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<style>
.bg-image {
  background-image: url('/src/assets/oys_lighthouse.jpg');
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: cover;
  /* background-image: linear-gradient(
    135deg,
    #ed232a 0%,
    #ffffff 75%,
    #14539a 100%
  ); */
}
</style>

<script setup lang="ts">
import { ref } from 'vue';
import { login } from 'boot/appwrite';
import GoogleOauthComponent from 'src/components/GoogleOauthComponent.vue';

const email = ref('');
const password = ref('');
</script>
