<script setup lang="ts">
import AppListItem from '@/components/AppListItem.vue';
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore()

</script>

<template>
  <main class="centered-content">
    <h1 class="align-center">My Applications</h1>

    <div v-if="authStore.state">
      <AppListItem name="Classroom Compliance" route="/classroom-compliance">
        Track your students' phone usage and behavior, record notes, and automatically calculate weekly scores for each
        student.
      </AppListItem>
      <p style="text-align: right; font-style: italic;">
        ... and more apps coming soon!
      </p>
    </div>

    <p v-if="!authStore.state" class="align-center">
      Please <RouterLink class="link link-color" to="/login">log in</RouterLink> to view your applications.
    </p>
  </main>
</template>