<template>
	<modal @close="close()">
		<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
			<template v-for="(s, i) in shortcuts" :key="i">
				<h3>{{ $t(s.title) }}</h3>

				<div class="message is-primary" v-if="s.available($route) === null">
					<div class="message-body">
						{{ $t('keyboardShortcuts.allPages') }}
					</div>
				</div>
				<div class="message is-primary" v-if="s.available($route)">
					<div class="message-body">
						{{ $t('keyboardShortcuts.currentPageOnly') }}
					</div>
				</div>

				<p v-for="(sc, si) in s.shortcuts" :key="si">
					<strong>{{ $t(sc.title) }}</strong>
					<shortcut
						:keys="sc.keys"
						:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
				</p>
			</template>
		</card>
	</modal>
</template>

<script>
import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
import Shortcut from '@/components/misc/shortcut.vue'
import {KEYBOARD_SHORTCUTS} from './shortcuts'

export default {
	name: 'keyboard-shortcuts',
	components: {Shortcut},
	data() {
		return {
			shortcuts: KEYBOARD_SHORTCUTS,
		}
	},
	methods: {
		close() {
			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
		},
	},
}
</script>