<template>
  <div class="stats">
    <h1>Login Stats</h1>
    <b-card no-body>
      <b-tabs card>
        <b-tab title="Totals">
          <b-card-body>
            <stats-pie statType="total" />
          </b-card-body>
        </b-tab>
        <b-tab title="Usernames">
          <b-card-body>
            <stats-pie statType="username" />
          </b-card-body>
        </b-tab>
        <b-tab title="Passwords">
          <b-card-body>
            <stats-pie statType="password"></stats-pie>
          </b-card-body>
        </b-tab>
        <b-tab title="Countries">
          <b-card-body>
            <stats-pie statType="country"></stats-pie>
          </b-card-body>
        </b-tab>
        <b-tab title="IPs">
          <b-card-body>
            <stats-pie statType="ip"></stats-pie>
          </b-card-body>
        </b-tab>
      </b-tabs>
    </b-card>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import StatsUsername from '@/components/StatsUsername.vue';
import StatsPie from '@/components/StatsPie.vue';

@Component({
  components: {
    StatsUsername,
    StatsPie,
  },
})
export default class Stats extends Vue {}
</script>
<style lang="scss" scoped>
</style>
