<template>
    <Page>
        <CommunityNav />

        <h2>
            <Icon v="flag" />
            <T>terminology.headerLong</T>
        </h2>

        <section>
            <T>terminology.info</T>
            <Share :title="$t('terminology.headerLong')" />
        </section>

        <ModerationRules type="rulesTerminology" emphasise />

        <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />

        <TermsDictionary ref="termsdictionary" load />
    </Page>
</template>

<script lang="ts">
import { head } from '../src/helpers.ts';
import hash from '../plugins/hash.ts';
import type TermsDictionary from '../components/TermsDictionary.vue';

interface Refs {
    termsdictionary: InstanceType<typeof TermsDictionary> | undefined;
}

export default hash.extend({
    head() {
        return head({
            title: this.$t('terminology.headerLong'),
            description: this.$t('terminology.info')[0],
        }, this.$translator);
    },
    computed: {
        $tRefs(): Refs {
            return this.$refs as unknown as Refs;
        },
    },
    mounted() {
        this.handleHash(this.$config.terminology.hashNamespace || '', (filter) => {
            this.$tRefs.termsdictionary?.setFilter(filter);
        });
    },
});
</script>
