<template>
  <v-app>
    <v-app-bar color="primary" dark flat app>
      <v-container class="d-flex justify-space-between align-center">
        <v-btn text rounded>Kitabu Chain Explorer</v-btn>
        <v-spacer></v-spacer>
        <div>
          <v-btn
            v-for="link in internalLinks"
            :key="link.title"
            text
            :href="link.link"
            target="_blank"
            rounded
            class="my-2"
          >
            {{ link.title }}
          </v-btn>
        </div>
      </v-container>
    </v-app-bar>
    <v-main class="grey lighten-3">
      <v-container>
        <Nuxt />
      </v-container>
    </v-main>
    <v-footer dark color="primary" padless>
      <v-container class="d-flex justify-space-between align-center">
        <div>
          <v-btn
            small
            v-for="link in externalLinks"
            :key="link.title"
            text
            :href="link.link"
            target="_blank"
            rounded
            class="my-2"
          >
            {{ link.title }}
          </v-btn>
        </div>
        <div>
          <v-btn
            v-for="item in social"
            :href="item.link"
            :key="item.icon"
            class="mx-4 white--text"
            icon
          >
            <v-icon>
              {{ item.icon }}
            </v-icon>
          </v-btn>
        </div>
      </v-container>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    externalLinks: [
      { title: 'About', link: '/about' },
      { title: 'Docs', link: '/docs' },
    ],
    internalLinks: [
      { title: 'Transactions', link: '/about' },
      { title: 'Validators', link: '/about' },
      { title: 'Tokens', link: '/docs' },
      { title: 'Blocks', link: '/docs' },
      { title: 'Stats', link: '/about' },
    ],
    social: [
      { icon: 'mdi-discord', link: 'https://grassrootseconomics.org' },
      { icon: 'mdi-gitlab', link: 'https://gitlab.com/grassrootseconomics' },
    ],
  }),
}
</script>
