<script setup lang="ts">
import type { PageInstance } from "@/utils";
import { modelControllerSignup } from "@/auth";

const page = useTemplateRef<PageInstance>("page");
const { user } = useAuth();

async function openSignup() {
  const modal = await modelControllerSignup(page.value?.$el);
  await modal.present();
}
</script>

<template>
  <IonPage ref="page">
    <IonHeader>
      <IonToolbar>
        <IonTitle>Home</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent :fullscreen="true">
      <IonHeader collapse="condense">
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonButton @click="openSignup">
        Signup
      </IonButton>

      {{ user }}
    </IonContent>
  </IonPage>
</template>
