<template>
	<div id="about">
		<div>
			<h1>O aplikácii</h1>
			<img src="/bugreport.svg" height="100" alt="" />
			<h2>Bug Report</h2>
			<p>
				Verzia aplikácie: {{ version }} &nbsp;|&nbsp; Zostavené: {{ build }}
			</p>
			<p>Autor: <a href="mailto:mino@tpsoft.org">Ing. Igor Miňo</a></p>
			<div class="cols">
				<div>
					Backend thanks for <br />
					<a href="https://www.php.net" target="_blank">
						<img :src="php_power_micro" height="20" alt="" /> <br />
						PHP 8.2
					</a>
				</div>
				<div>
					Database thanks for <br>
					<a href="https://www.sqlite.org" target="_blank">
						<img :src="sqlite" height="20" alt="" />  <br>
						SQLite
					</a>
				</div>
				<div>
					Frontend thanks for <br>
					<a href="https://vuejs.org" target="_blank">
						<img :src="vue" height="20" alt="" /> <br>
						Vue 3
					</a>
				</div>
			</div>

			<p>
				Zdrojové kódy:
				<a href="https://gitea.tpsoft.org/TPsoft.org/BugReport" target="_blank"
					>https://gitea.tpsoft.org/TPsoft.org/BugReport</a
				>
			</p>
			<h2>Diagram stavov pre BUG</h2>
			<img :src="flowdiagram" alt="" width="90%" />
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import php_power_micro from '../assets/images/php-power-micro.png';
import sqlite from '../assets/images/SQLite370.svg';
import vue from '../assets/images/vue.svg';
import flowdiagram from '../assets/images/FlowDiagram.drawio.svg';

const version = ref(__APP_VERSION__);
const build = ref(__BUILD_DATE__);

</script>
