<template>
  <v-app>
    <v-main>
      <TitleBar
        :logo_above="logo_above"
        :logo_below="logo_below"
        :title="title_html"
      />
      <Dashboard :message="message_html">
        <CalendarCarousel />
      </Dashboard>
    </v-main>
    <TickerBar
      v-if="ticker_html !== ''"
      :content="ticker_html"
      color="primary"
    />
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import CalendarCarousel from "./components/calendar/CalendarCarousel.vue";
import Dashboard from "./components/Dashboard.vue";
import TitleBar from "./components/title_bar/TitleBar.vue";
import TickerBar from "./components/TickerBar.vue";

@Component({
  components: {
    CalendarCarousel,
    Dashboard,
    TitleBar,
    TickerBar,
  },
})
export default class App extends Vue {
  private logo_above = "Technisches Hilfswerk";
  private logo_below = "OV Musterstadt";
  private title_html = "<h1>changeme</h1>";
  private ticker_html = "<p>changeme</p>";
  private message_html = "<p>changeme</p>";
}
</script>
