<template>
	<NcContent app-name="mitgliederverwaltung">
		<NcAppNavigation>
			<template #list>
				<NcAppNavigationItem name="Mitglieder"
					:to="{ name: 'members' }"
					:active="currentRoute === 'members' || currentRoute === 'member-detail'">
					<template #icon>
						<AccountGroup :size="20" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="Familien"
					:to="{ name: 'families' }"
					:active="currentRoute === 'families' || currentRoute === 'family-detail'">
					<template #icon>
						<AccountMultiple :size="20" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="Beiträge"
					:to="{ name: 'fees' }"
					:active="currentRoute === 'fees'">
					<template #icon>
						<CurrencyEur :size="20" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="Lager"
					:to="{ name: 'lager' }"
					:active="currentRoute === 'lager' || currentRoute === 'lager-detail'">
					<template #icon>
						<Tent :size="20" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="Inventar"
					:to="{ name: 'inventory' }"
					:active="currentRoute === 'inventory'">
					<template #icon>
						<PackageVariant :size="20" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="Verletzungen"
					:to="{ name: 'injuries' }"
					:active="currentRoute === 'injuries'">
					<template #icon>
						<MedicalBag :size="20" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="Abfragen"
					:to="{ name: 'queries' }"
					:active="currentRoute === 'queries'">
					<template #icon>
						<DatabaseSearch :size="20" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="Berichte"
					:to="{ name: 'reports' }"
					:active="currentRoute === 'reports'">
					<template #icon>
						<FileChart :size="20" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="Import / Export"
					:to="{ name: 'import' }"
					:active="currentRoute === 'import'">
					<template #icon>
						<SwapVertical :size="20" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="Audit-Log"
					:to="{ name: 'audit-log' }"
					:active="currentRoute === 'audit-log'">
					<template #icon>
						<ClipboardText :size="20" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="Backup"
					:to="{ name: 'backup' }"
					:active="currentRoute === 'backup'">
					<template #icon>
						<BackupRestore :size="20" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="Einstellungen"
					:to="{ name: 'settings' }"
					:active="currentRoute === 'settings'">
					<template #icon>
						<Cog :size="20" />
					</template>
				</NcAppNavigationItem>
			</template>
		</NcAppNavigation>
		<NcAppContent>
			<div class="app-search-header">
				<SearchBar />
			</div>
			<router-view />
		</NcAppContent>
	</NcContent>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { NcContent, NcAppContent, NcAppNavigation, NcAppNavigationItem } from '@nextcloud/vue'
import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
import ClipboardText from 'vue-material-design-icons/ClipboardText.vue'
import FileChart from 'vue-material-design-icons/FileChart.vue'
import CurrencyEur from 'vue-material-design-icons/CurrencyEur.vue'
import Cog from 'vue-material-design-icons/Cog.vue'
import DatabaseSearch from 'vue-material-design-icons/DatabaseSearch.vue'
import SwapVertical from 'vue-material-design-icons/SwapVertical.vue'
import MedicalBag from 'vue-material-design-icons/MedicalBag.vue'
import PackageVariant from 'vue-material-design-icons/PackageVariant.vue'
import Tent from 'vue-material-design-icons/Campfire.vue'
import BackupRestore from 'vue-material-design-icons/BackupRestore.vue'
import SearchBar from './components/SearchBar.vue'

const route = useRoute()

const currentRoute = computed(() => route.name)
</script>

<style scoped>
.app-search-header {
	display: flex;
	justify-content: flex-end;
	padding: 8px 16px;
	border-bottom: 1px solid var(--color-border);
}
</style>
