<script setup lang="ts">
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import HelpModule from 'src/modules/help/components/help-module.vue';
import { onMounted } from 'vue';
import { useHelpStore } from 'src/stores/help-store';

const help_store = useHelpStore();
onMounted(() => {
    help_store.getFilteredModule();
});
</script>

<template>
    <q-page
        flat
        class="bg-secondary q-px-xl no-wrap row justify-center"
    >
        <div class="col-8 q-px-xl">
            <PageHeaderTemplate
                :title="$t('help.label')"
                class="text-accent"
            />
            <help-module
                v-for="(options, help_module, index) in help_store.user_modules"
                :key="help_module"
                :help_module="help_module"
                :module-index="index"
                :options="options"
            />
        </div>
    </q-page>
</template>