<template>
  <v-toolbar color="primary" prominent dark>
    <v-row class="d-flex">
      <v-col
        cols="3"
        class="d-flex flex-grow-1 flex-shrink-1 justify-start text-left"
      >
        LOGO
      </v-col>

      <v-col
        cols="6"
        class="d-flex flex-grow-0 flex-shrink-1 justify-center text-center"
      >
        TITLE
      </v-col>

      <v-col
        cols="3"
        class="d-flex flex-grow-1 flex-shrink-1 justify-end text-right"
      >
        <div class="flex-column">
          <Clock class="d-flex justify-end" format="DDD" />
          <Clock class="d-flex justify-end" format="T" />
        </div>
      </v-col>
    </v-row>
  </v-toolbar>
</template>

<script>
import { Component, Vue } from "vue-property-decorator";
import Clock from "./Clock.vue";

@Component({
  components: {
    Clock,
  },
})
export default class TitleBar extends Vue {}
</script>

<style>
</style>