<template>
  <IonPage>
    <!-- Splash: unauthenticated -->
    <template v-if="!user">
      <IonContent class="splash-content">
        <div class="splash-center">
          <img src="/oysqn_logo.png" alt="OYS Borrow a Boat" class="splash-logo" />
          <IonButton expand="block" router-link="/login" class="splash-btn">Log In</IonButton>
        </div>
      </IonContent>
    </template>

    <!-- Home: authenticated -->
    <template v-else>
      <IonHeader>
        <IonToolbar color="primary">
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent class="ion-padding">
        <h2>Welcome to OYS Borrow a Boat</h2>
      </IonContent>
    </template>
  </IonPage>
</template>

<script setup lang="ts">
import {
  IonPage, IonHeader, IonToolbar, IonTitle, IonContent,
  IonButtons, IonMenuButton, IonButton,
} from '@ionic/vue'

const user = useSupabaseUser()

definePageMeta({ layout: false })
</script>

<style scoped>
.splash-content {
  --background: var(--ion-color-light);
}

.splash-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  gap: 2rem;
}

.splash-logo {
  max-width: 280px;
  width: 100%;
}

.splash-btn {
  width: 100%;
  max-width: 280px;
}
</style>
