<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"
  import { ariaLabel } from "../src/Utils/ariaLabel"
  import Locale from "../src/UI/i18n/Locale"
  import AccordionSingle from "../src/UI/Flowbite/AccordionSingle.svelte"
  const t = Translations.t.app
  const lng = Locale.language
  let fdroid = t.downloadOnFDroid.current

  let supportedVersions: { version: number, codename: string } = [
    { version: 9, codename: "pie" },
    { version: 10, codename: "quince-tart" },
    { version: 11, codename: "red-velvet-cake" },
    { version: 12, codename: "snow-cone" },
    { version: 13, codename: "tiramisu" },
  ]
</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} />

      <Tr cls="subtle" t={t.noPlayServices} />
      <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>

      <AccordionSingle>
        <div slot="header">
          <Tr t={t.legacyHeader} />
        </div>
        <div class="flex flex-col">
          <Tr t={t.legacyExplanation} />
          {#each supportedVersions as v}
            <a
              class="button"
              href={`https://builds.mapcomplete.org/apk/mapcomplete-latest-${v.version}-${v.codename.toUpperCase()}.apk`}>
              Android {v.version} ({v.codename})
            </a>
          {/each}

        </div>
      </AccordionSingle>

      <a class="link-underline w-fit self-end" href="https://builds.mapcomplete.org/apk/">
        <Tr t={t.older} />
      </a>


      <div class="flex flex-col items-center my-4">

        <a href="https://f-droid.org/packages/org.mapcomplete">
          <img src={`https://f-droid.org/badge/get-it-on-${$lng}.png`}
               onerror="if (this.src !== 'fdroid.png') this.src = 'fdroid.png';"
               alt={$fdroid}
               style="width: 17rem">
        </a>


        <a
          rel="noopener"
          href="https://apps.obtainium.imranr.dev/redirect?r=obtainium://add/https://source.mapcomplete.org/MapComplete/android-wrapper/releases">
          <img style="width: 15rem" class="p-4" src="./badge_obtainium.png" alt="Get on obtainium" use:ariaLabel={t.getOnObtanium} />

        </a>
      </div>
    </div>
  </div>
</div>
