<template>
  <Calendar :doors="doors" />
  <hr />
  <div class="content" v-html="store.site_config.content" />
  <template v-if="store.next_door_target !== null">
    <hr />
    <div class="content has-text-primary">
      Zeit zum nächsten Türchen: <CountDown :until="store.next_door_target" />
    </div>
  </template>
</template>

<script lang="ts">
import { Door } from "@/lib/door";
import { advent22Store } from "@/plugins/store";
import { Options, Vue } from "vue-class-component";

import Calendar from "./Calendar.vue";
import CountDown from "./CountDown.vue";

@Options({
  components: {
    Calendar,
    CountDown,
  },
})
export default class extends Vue {
  public readonly store = advent22Store();

  public get doors(): Door[] {
    const result = [];

    for (const value of this.store.user_doors) {
      result.push(Door.load(value));
    }

    return result;
  }
}
</script>
