<template>
  <div class="footer w-full z-50 flex justify-center">
    <div v-if="!isMobile" class="w-full bg-footer-color flex justify-center">
      <div class="md:w-bodySet flex flex-col items-center pt-20" :class="{'pb-16': $route.path === '/home'}">
        <img src="@/assets/images/footer/yuanlian_logo.png" width="64" alt="yuanlian">
        <ul class="flex items-center justify-center mt-16 mb-16">
          <li class="text-lg text-white px-8">{{ $t('lang.community') }}</li>
          <li class="text-sm text-white px-8"><a href="https://www.8btc.com/" target="_blank">{{ $t('lang.bit') }}</a></li>
          <li class="text-sm text-white px-8"><a href="https://www.reddit.com/user/yuanchain/" target="_blank">Reddit</a></li>
          <li class="text-sm text-white px-8"><a href="https://www.facebook.com/Yuan-Chain-380711552463031/" target="_blank">Facebook</a></li>
          <li class="text-sm text-white px-8"><a href="https://www.linkedin.com/company/yuan-chain/" target="_blank">LinkedIn</a></li>
          <!-- <li class="text-sm text-white px-8"><a href="https://bitcointalk.org/index.php?topic=2741373.msg28028807#msg28028807" target="_blank">Bitcointalk</a></li> -->
        </ul>
      </div>
    </div>
    <div v-else class="h-40 pl-16 pr-6 flex justify-center items-center w-full" :class="{'bg-bgfooter bg-cover bg-bgfootercolor bg-top': $route.path === '/home', ' bg-footer-color': $route.path !== '/home'}">
      <div class="flex-shrink-0">
        <img src="@/assets/images/footer/footer-m.png" width="38" alt="yuanlian">
      </div>
      <div class=" flex flex-col ml-12">
        <div class="text-sm text-white leading-loose">{{ $t('lang.community') }}</div>
        <div class="flex flex-wrap justify-around items-center">
          <div class="text-xs text-white leading-loose flex-50%"><a href="https://www.8btc.com/" target="_blank">{{ $t('lang.bit') }}</a></div>
          <div class="text-xs text-white leading-loose flex-50%"><a href="https://www.reddit.com/user/yuanchain/" target="_blank">Reddit</a></div>
          <div class="text-xs text-white leading-loose flex-50%"><a href="https://www.facebook.com/Yuan-Chain-380711552463031/" target="_blank">Facebook</a></div>
          <div class="text-xs text-white leading-loose flex-50%"><a href="https://www.linkedin.com/company/yuan-chain/" target="_blank">LinkedIn</a></div>
          <!-- <div class="text-xs text-white leading-loose"><a href="https://bitcointalk.org/index.php?topic=2741373.msg28028807#msg28028807" target="_blank">Bitcointalk</a></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { checkIsMobile } from '@/utils/utils'
import Vue from 'vue'
export default Vue.extend({
  computed: {
    isMobile() {
      return checkIsMobile()
    }
  }
})
</script>
