<template>


  <router-view></router-view>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import TheTwoColumnsLayout from '@/layouts/TheTwoColumnsLayout.vue';



@Options({
  created() {
  //  this.$store.dispatch("autoSignIn");
    console.log(this.$store)
  },
  components: {
    TheTwoColumnsLayout
  },
  computed: {
    token() {
      return this.$store.getters.token;
    }
  },


  async beforeCreate() {
    console.log("beforeCreate", this.$store.getters.isInitialized);
    if(!this.$store.getters.isInitialized) {
      console.log("Not yet initialized")
      await this.$store.dispatch("initialize", {seed: true});
    }
  },

})
export default class App extends Vue {}
</script>

<style>
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~@fortawesome/fontawesome-pro/css/all.min.css';
@import '~animate.css/animate.min.css';

.bg-vue {
  background-color: rgb(52, 73, 94);
  color: white
}

.bg-vue2 {
  background-color: rgb(65, 184, 131);
  color: white
}

.text-vue {
  color:  rgb(52, 73, 94);
}
.text-vue2 {
  color:  rgb(65, 184, 131);
}

.billi-primary {
  background-color: #21ae0e;
}

.billi-secondary {
  background-color: #b2b1b1;
}

.billi-primary-50 {
  background-color: #21ae0e75;
}

.billi-secondary-50 {
  background-color: #b2b1b175;
}

.billi-bg {
  background-color: #2a67dc;
}
.billi-bg-50 {
  background-color: #2a67dc75
}

.billi-bg-transparent {
  background-color: white;
  background-color: rgb(255 255 255 / 40%);
}

.billi-read-detail {
  background-color: transparent;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 33% 66%;
  grid-template-areas:
  "seite haupt"
;

}
.billi-read-detail aside {
  margin-right: 1rem;

  grid-area: seite
}

.billi-read-detail section {
  padding-left: 1rem;
  border-left: 1px solid grey;
  z-index: 0;
  grid-area: haupt
}

.billi-icon-as-bg {
  height: 600px;
  position: absolute;
  bottom: -50px;
  left: -50px;
}

.billi-icon-filter {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  padding: 1em;
}
.billi-filter-grid {
  display: grid;
  margin-top: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
}


</style>
