<script setup lang="ts">
import { useNuxtApp } from 'nuxt/app';

import { PermissionAreas } from '#shared/helpers.ts';
import useSimpleHead from '~/composables/useSimpleHead.ts';

const { $translator: translator } = useNuxtApp();
useSimpleHead({
    title: `${translator.translate('admin.header')} • Moderation rules`,
}, translator);
</script>

<template>
    <Page>
        <NotFound
            v-if="!$multiIsGranted([
                PermissionAreas.Users,
                PermissionAreas.Terms,
                PermissionAreas.Sources,
                PermissionAreas.Community,
            ])"
        />
        <div v-else>
            <p>
                <nuxt-link to="/admin">
                    <Icon v="user-cog" />
                    <T>admin.header</T>
                </nuxt-link>
            </p>
            <h2>
                <Icon v="user-cog" />
                Moderation rules
            </h2>

            <ModerationRules
                v-if="$multiIsGranted([PermissionAreas.Users, PermissionAreas.Community])"
                type="rulesUsers"
                label="Banning accounts"
                open
            />
            <ModerationRules
                v-if="$isGranted(PermissionAreas.Terms)"
                type="rulesTerminology"
                label="Terminology"
                open
            />
            <ModerationRules
                v-if="$isGranted(PermissionAreas.Sources)"
                type="rulesSources"
                label="Sources"
                open
            />
            <ModerationRules
                v-if="$multiIsGranted([PermissionAreas.Users, PermissionAreas.Community])"
                type="susRegexes"
                label="Keywords for automated triggers"
            />
        </div>
    </Page>
</template>
