<template>
	<FullScreenLoader v-if="loading" />

	<div id="archive">
		<h1>Archív</h1>

		<div class="reports">
			<div class="report-row" v-for="report in reports" :key="report.report_id" @click="$router.push('/report/' + report.report_id)">
				<div class="report-id">
					<font-awesome-icon :icon="['fas', 'hashtag']" />
					{{ report.report_id }}
				</div>
				<div class="title">{{ report.report_title }}</div>
				<div class="date">{{ report.created_dt }}</div>
				<div class="group">{{ report.report_group }}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { backend } from "../backend";
import FullScreenLoader from "../components/FullScreenLoader.vue";

const reports = ref([]);
const loading = ref(false);

onMounted(async () => {
	loadReports();
});

function loadReports() {
	loading.value = true;
	backend.getArchived(0).then((data) => {
		console.log(data);
		reports.value = data;
		loading.value = false;
	});
}
</script>
