Vue.component('app-toolbar', {
  props: ['is_whitelabel','settings'],
  template: 
`<v-app-bar
  :color="is_whitelabel?(settings.white_label_color):'primary'"
  class="app-toolbar"
  fixed
  :dark="is_whitelabel?(settings.white_label_mode=='dark'):true"
  app
  height="40"
  style="z-index: 5"
  >
    <div>
      <v-app-bar
        :color="is_whitelabel?(settings.white_label_color):'primary'"
        class="app-toolbar flex sm12 lg8 offset-lg2"
        fixed
        flat
        :dark="is_whitelabel?(settings.white_label_mode=='dark'):true"
        app
        dense
        height="40"
      >
        <h1 class="headline" v-if="is_whitelabel && settings.white_label_name">{{settings.white_label_name}}</h1>
        <h1 class="v-toolbar__title ml-0" style="height: 60%;" v-else-if="is_whitelabel && settings.white_label_logo">
          <img v-bind:src="settings.white_label_logo" height="100%" :alt="settings.white_label_name" :title="settings.white_label_name">
        </h1>
        <h1 class="headline" v-else-if="is_whitelabel && settings.white_label_name">{{settings.white_label_name}}</h1>
        <h1 v-else class="v-toolbar__title ml-0" style="height: 60%;">
          <img v-bind:src="'./static/logo_white.png'" height="100%" alt="1TICKS" title="1TICKS">
        </h1>  
        <v-spacer></v-spacer>
      </v-app-bar>
    </div>
</v-app-bar>`
});