<template>
	<div id="api">
		<h1>API</h1>
		<p>
			API prípojny bod je dostupný na adrese
			<a href="{{ api_endpoint }}">{{ api_endpoint }}</a
			>.
		</p>
		<h2>Zoznam akcii</h2>
		<ul>
			<li v-for="action in help.actions" :key="action.name">
				<a :href="'#' + action.name">{{ action.name }}</a>
			</li>
		</ul>
		<h2>Prehľad parametrov akcií</h2>
		<div v-for="action in help.actions" :key="action.name" class="action">
			<h3 :id="action.name">{{ action.name }}</h3>
			<p>
				{{ action.description }} <br />
				<a :href="api_endpoint + '?action=' + action.name" target="_blank">{{
					api_endpoint + "?action=" + action.name
				}}</a>
			</p>
			<h4>Parametre</h4>
			<p v-if="Object.keys(action.params).length == 0">
				<font-awesome-icon :icon="['fas', 'circle-info']" />
				&nbsp;
				Ziadne parametre
			</p>
			<ul>
				<li v-for="(param_desc, param_name) in action.params" :key="param_name">
					<strong>{{ param_name }}</strong>
					&ndash;
					{{ param_desc }}
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import { backend } from "../backend";

export default {
	name: "API",
	components: {},
	data() {
		return {
			api_endpoint: backend.endpont,
			help: {
				actions: {
					help: {
						name: "help",
						description: "This help",
						params: {
							foo: "bar",
						},
					},
				},
			},
		};
	},
	mounted() {
		this.loadHelp();
	},
	methods: {
		loadHelp() {
			backend.help().then((response) => {
				this.help = response;
			});
		},
	},
};
</script>
