<template>
    <Page v-if="config.links.enabled">
        <LinksNav />

        <section v-if="config.links.blog && !config.links.splitBlog">
            <h2 class="mb-3">
                <Icon v="pen-nib" />
                <T>links.blog</T>
            </h2>
            <BlogEntriesList :posts="posts" details />
        </section>
        <Endorsements />
        <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />
        <Links />
        <AcademicLinks v-if="!config.links.split && Object.keys(config.links.academic).length > 0" />
        <Media v-if="config.links.mediaGuests.length + config.links.mediaMentions.length > 0 && (!config.links.split || config.links.mediaGuests.length + config.links.mediaMentions.length <= 2)" />
        <AdPlaceholder :phkey="['content-1', 'content-mobile-1']" />
        <Recommended />
        <Socials />
        <LanguageVersions />
        <AdPlaceholder :phkey="['content-2', 'content-mobile-2']" />
        <section>
            <h2 class="mb-3">
                <Icon v="home-heart" />
                <T>footer.sibling</T>
            </h2>
            <Siblings />
        </section>
        <Support />
        <section>
            <Share :title="$t('links.headerLong')" />
        </section>
    </Page>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useNuxtApp, useFetch } from 'nuxt/app';
import useSimpleHead from '~/composables/useSimpleHead.ts';
import useConfig from '~/composables/useConfig.ts';

export default defineComponent({
    setup() {
        definePageMeta({
            translatedPaths: (config) => translatedPathByConfigModule(config.links),
        });

        const { $translator: translator } = useNuxtApp();
        useSimpleHead({
            title: translator.translate('links.headerLong'),
        }, translator);

        const { data: posts } = useFetch('/api/blog');

        return {
            config: useConfig(),
            posts,
        };
    },
});
</script>
