<script lang="ts">
    import { Notification, Space } from "@svelteuidev/core"
    import { InfoCircled } from "radix-icons-svelte"

    import HDivider from "@/components/elements/HDivider.svelte"
    import Footer from "@/components/Footer.svelte"
    import { appInfo, translations, translate } from "@/stores"

    $: t = (key: string) => translate($translations, key)

    let pythonForkLink = ""
    let repoLink = ""
    appInfo.subscribe(info => {
        pythonForkLink = info.pythonForkLink
        repoLink = info.repositoryLink
    })
</script>

<Space h="xl" />

<Notification
    title={t('commands-wip-title')}
    icon={InfoCircled}
    color="blue"
    withCloseButton={false}
>
    {t('commands-wip-desc')}<br />
    {t('commands-wip-builder')}
    <a href={pythonForkLink} target="_blank" rel="noopener noreferrer">{t('commands-wip-builder-link')}</a>.
    {t('commands-wip-or-fork')}
    <a href={repoLink} target="_blank" rel="noopener noreferrer">{t('commands-wip-fork-link')}</a>.
</Notification>

<HDivider />
<Footer />
