<script lang="ts">
  import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
  import Translations from "../src/UI/i18n/Translations"
  import Tr from "../src/UI/Base/Tr.svelte"
  import LanguagePicker from "../src/UI/InputElement/LanguagePicker.svelte"

  const t = Translations.t.app
</script>

<head>
  <link rel="stylesheet" href="./assets/index-tailwind-output.css" />
  <title><Tr t={t.title} /></title>
</head>

<div class="flex flex-col p-2 sm:p-4 md:p-8">
  <div class="self-end" style="max-width: calc( 100vw - 4rem );">
    <LanguagePicker availableLanguages={t.title.SupportedLanguages()} />
  </div>
  <div class="flex justify-around">
    <div class="max-w-128 m-8 flex flex-col">
      <h1>
        <Tr t={t.title} />
      </h1>
      <Tr t={t.intro} />

      <a
        class="button primary flex justify-center"
        href="https://builds.mapcomplete.org/apk/mapcomplete-latest.apk"
      >
        <DownloadIcon class="h-8 w-8" />
        <Tr t={t.download} />
      </a>
      <a class="button" href="https://mapcomplete.org">
        <Tr t={t.back} />
      </a>
      <a class="link-underline w-fit self-end" href="https://builds.mapcomplete.org/apk/">
        <Tr t={t.older} />
      </a>
    </div>
  </div>
</div>
