<template>
  <div class="home">
    <div v-if="user">
      <div class="account-list-container">
        <account-list />
      </div>
    </div>
    <div v-else>
      <div>
        <img class="logo" src="../assets/logo.svg" title="logo Vaquant" />
        <h2 class="title is-2">Gérer vos budgets de groupe en toute simplicité&nbsp;!</h2>
      </div>
      <br />
      <router-link class="button is-primary" :to="{ name: 'user' }" v-t="'user.loginsignup'"></router-link>
      <div class="account-list-container box">
        <account-list />
      </div>
      <h3 class="title is-3">Fonctionnalités</h3>
      <app-resume />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Getter } from 'vuex-class'
import IUser from '@/models/IUser'
import AccountList from '@/components/AccountList.vue'

@Component({
  components: {
    'account-list': AccountList,
    'app-resume': () => import('@/components/AppResume.vue')
  }
})
export default class Home extends Vue {
  @Getter
  public user!: IUser | null
}
</script>

<style scoped>
.account-list-container {
  margin-top: 15px;
}
</style>
