<template>
  <div>
    <FtCard class="card">
      <h2>
        <FontAwesomeIcon
          :icon="['fas', 'info-circle']"
          class="headingIcon"
        />
        {{ $t("About.About") }}
      </h2>
      <section class="brand">
        <FtLogoFull class="logo" />
        <div class="version">
          {{ versionNumber }} {{ $t("About.Beta") }}
        </div>
      </section>
      <section class="about-chunks">
        <figure
          v-for="chunk in chunks"
          :key="chunk.title"
          class="chunk"
        >
          <FontAwesomeIcon
            class="icon"
            :icon="chunk.icon"
          />
          <h3 class="title">
            {{ chunk.title }}
          </h3>
          <div
            v-safer-html="chunk.content"
            class="content"
          />
        </figure>
      </section>
    </FtCard>
  </div>
</template>

<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import FtCard from '../../components/ft-card/ft-card.vue'
import FtLogoFull from '../../components/FtLogoFull/FtLogoFull.vue'
import { vSaferHtml } from '../../directives/vSaferHtml.js'

import { ABOUT_BITCOIN_ADDRESS } from '../../../constants'
import packageDetails from '../../../../package.json'

const { t } = useI18n()

const versionNumber = `v${packageDetails.version}`

const chunks = computed(() => [
  {
    icon: ['fab', 'github'],
    title: t('About.Source code'),
    content: `<a href="https://github.com/MarmadileManteater/FreeTubeCordova">GitHub: FreeTubeAndroid</a><br>${t('About.Licensed under the')} <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">${t('About.AGPLv3')}</a>.<br/> This is a fork of the official <a href="https://github.com/FreeTubeApp/FreeTube">FreeTube</a> repository with modifications to work better in a browser and on phones.`
  },
  {
    icon: ['fas', 'file-download'],
    title: t('About.Downloads / Changelog'),
    content: `<a href="https://github.com/MarmadileManteater/FreeTubeCordova/releases">${t('About.GitHub releases')}</a>`
  },
  {
    icon: ['fas', 'question-circle'],
    title: t('About.Help'),
    content: [
      `<a href="https://docs.freetubeapp.io/">${t('About.FreeTube Wiki')}</a>`,
      `<a href="https://docs.freetubeapp.io/faq/">${t('About.FAQ')}</a>`,
      `<a href="https://github.com/FreeTubeApp/FreeTube/discussions/">${t('About.Discussions')}</a>`
    ].join(' / '),
  },
  {
    icon: ['fas', 'exclamation-circle'],
    title: t('About.Report a problem'),
    content: `<a href="https://github.com/MarmadileManteater/FreeTubeAndroid/issues">${t('About.GitHub issues')}</a><br>${t('About.Please check for duplicates before posting')}`
  },
  {
    icon: ['fas', 'globe'],
    title: t('About.Website'),
    content: '<a href="https://freetubeapp.io/">https://freetubeapp.io/</a>',
  },
  {
    icon: ['fab', 'mastodon'],
    title: t('About.Mastodon'),
    content: '<a href="https://fosstodon.org/@FreeTube">@FreeTube@fosstodon.org</a>',
  },
  {
    icon: ['fab', 'matrix'],
    title: t('About.Chat on Matrix'),
    content: [
      '<a href="https://matrix.to/#/#freetube:matrix.org">#freetube:matrix.org</a>',
      t('About.Please read the {roomRulesLink}', {
        roomRulesLink: `<a href="https://docs.freetubeapp.io/community/matrix/">${t('About.room rules')}</a>`,
      }),
    ].join('<br>'),
  },
  {
    icon: ['fas', 'language'],
    title: t('About.Translate'),
    content: '<a href="https://hosted.weblate.org/engage/free-tube/">https://hosted.weblate.org/engage/free-tube/</a>',
  },
  {
    icon: ['fas', 'users'],
    title: t('About.Credits'),
    content: t('About.FreeTube is made possible by {creditsPageLink}', {
      creditsPageLink: `<a href="https://docs.freetubeapp.io/credits/">${t('About.these people and projects')}</a>`,
    }),
  },
  {
    icon: ['fas', 'money-check-dollar'],
    title: `${t('About.Donate')}`,
    content: '<a href="https://liberapay.com/MarmadileManteater/">Liberapay</a>'
  },
  {
    icon: ['fab', 'bitcoin'],
    title: `${t('About FTA.Donate Upstream')} - BTC`,
    content: `<a href="bitcoin:${ABOUT_BITCOIN_ADDRESS}">${ABOUT_BITCOIN_ADDRESS}</a>`
  }
])
</script>

<style scoped src="./About.css" />
