<script setup lang="ts">
import { BASE_URL } from '@/api/classroom_compliance';
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore()

async function downloadExport() {
  const resp = await fetch(BASE_URL + '/export', {
    headers: {
      'Authorization': 'Basic ' + authStore.getBasicAuth()
    }
  })
  if (!resp.ok) return
  const url = window.URL.createObjectURL(await resp.blob())
  const tempLink = document.createElement('a')
  tempLink.href = url
  tempLink.download = "classroom-compliance-export.csv"
  document.body.appendChild(tempLink)
  tempLink.click()
  tempLink.remove()
}
</script>
<template>
  <main class="app-header">
    <h1>Classroom Compliance</h1>

    <div class="button-bar">
      <RouterLink class="link" to="/classroom-compliance">View My Classes</RouterLink>
      <RouterLink class="link" to="/classroom-compliance/guide">Guide</RouterLink>
      <a class="link" @click.prevent="downloadExport()" href="#">Export All Data</a>
    </div>
    <hr />

    <div class="align-left">
      <RouterView :key="$route.fullPath" />
    </div>
  </main>
</template>
