<script setup>
defineProps({
	report_id: Number,
	title: String,
	description: String,
	date: String,
	priority: Number,
	group: String,
});
</script>
<template>
	<div :class="[ 'report', 'report-priority-' + priority]" @click="goToReport(report_id)">
		<div class="report-header">
			<div class="report-title">
				<h3><font-awesome-icon :icon="['fas', 'bug']" /> {{ title }}</h3>
			</div>
		</div>
		<div class="report-description">
			<p>
				{{ description }}
			</p>
		</div>
		<div class="report-footer">
			<div class="report-group"><font-awesome-icon :icon="['fas', 'diagram-project']" /> {{ group }}</div>
			<div class="report-id"><font-awesome-icon :icon="['fas', 'hashtag']" /> {{ report_id }}</div>
			<div class="report-date"><font-awesome-icon :icon="['fas', 'calendar-days']" /> {{ date }}</div>
		</div>

	</div>
</template>
<script>
export default {
	name: "ReportBox",
	data() {
		return {

		};
	},
	methods: {
		goToReport(report_id) {
			this.$router.push("/report/" + report_id);
		},
	},
};
</script>