<template>
	<div id="header">
		<div class="logo">
			<router-link to="/">
				<img src="/public/bugreport.svg" height="48" width="48" />
			</router-link>
			<router-link to="/">
				<h1>Bug Report</h1>
			</router-link>
		</div>
		<div class="short-bug">
			<input
				type="text"
				placeholder="Rýchly task + <ENTER>"
				v-model="short_bug"
				@keyup.enter="onShortBugEnter"
			/>
			<button @click="shortBugAdd">
				<font-awesome-icon :icon="['fas', 'circle-check']" /> Pridať
			</button>
		</div>
		<div class="menu">
			<router-link to="/add"
				><font-awesome-icon :icon="['fas', 'square-plus']" /> Pridať
				bug</router-link
			>
			<router-link to="/"
				><font-awesome-icon :icon="['fas', 'list-check']" /> Zoznam
				reportov</router-link
			>
			<router-link to="/archive"
				><font-awesome-icon :icon="['fas', 'box-archive']" />
				Archív</router-link
			>
			<router-link to="/api"
				><font-awesome-icon :icon="['fas', 'plug']" /> API</router-link
			>
			<router-link to="/about"
				><font-awesome-icon :icon="['fas', 'address-card']" /> O
				aplikácii</router-link
			>
		</div>
	</div>
	<router-view></router-view>
</template>

<script setup>
import { ref } from "vue";
import { backend } from "./backend";
import events from "./events";

const short_bug = ref("");

function onShortBugEnter(event) {
	if (event.keyCode == 13) {
		shortBugAdd();
	}
}

function shortBugAdd() {
	let content = short_bug.value;
	short_bug.value = "";
	backend.add(content, "", "0", "0", "1").then(() => {
		events.emit("reports-changed");
	});
}
</script>
