<template>
  <v-app-bar dark dense absolute app color="keen_dark_grey">
    <img class="pr-4" src="/static/img/keen_logo.svg" width="100">
    <v-toolbar-title color="primary" class="headline">
      <span>ProCatalog</span>
      <span class="font-weight-light">&nbsp;{{ pageTitle }}</span>
    </v-toolbar-title>
    <v-spacer/>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn text small href="/">Dashboard</v-btn>

      <v-menu open-on-hover bottom offset-y>
        <template v-slot:activator="{ on }">
          <v-btn text small v-on="on">Support</v-btn>
        </template>
        <v-list class="navbar-menu ma-0 pa-0">
          <v-list-item dense class="navbar-menu-item">
            <v-btn
              text
              small
              href="mailto:support@procatalog.io?Subject=Keen%20ProCatalog%20support%20request"
              class="navbar-menu-button">Email Support</v-btn>
          </v-list-item>
          <v-list-item dense class="navbar-menu-item">
            <v-btn
              text
              small
              href="https://keenfootwear.wistia.com/medias/ld970jfi9o"
              target="_blank"
              class="navbar-menu-button">Catalog making tutorial</v-btn>
          </v-list-item>
          <v-list-item dense class="navbar-menu-item">
            <v-btn
              text
              small
              href="/static/Markup Tool Setup.pdf"
              target="_blank"
              class="navbar-menu-button">Markup tool setup guide</v-btn>
          </v-list-item>
          <v-list-item dense class="navbar-menu-item">
            <v-btn
              text
              small
              href="/static/Quick Start.pdf"
              target="_blank"
              class="navbar-menu-button">Markup tool quick start</v-btn>
          </v-list-item>
        </v-list>
      </v-menu>

      <v-menu open-on-hover bottom offset-y>
        <template v-slot:activator="{ on }">
          <v-btn text small v-on="on">
            Account
          </v-btn>
        </template>
        <v-list class="navbar-menu ma-0 pa-0">
          <v-list-item dense class="navbar-menu-item">
            <v-btn text small href="/account/settings" class="navbar-menu-button">Profile</v-btn>
          </v-list-item>
          <v-list-item dense class="navbar-menu-item">
            <v-btn text small href="/account/logout" class="navbar-menu-button">Log Out</v-btn>
          </v-list-item>
        </v-list>
      </v-menu>

    </v-toolbar-items>
  </v-app-bar>
</template>

<script>
export default {
  props: {
    pageTitle: {
      type: String,
      default: 'Title',
    },
  },
  data: () => ({
    foo: true
  })
}
</script>

<style scoped>
.navbar-menu {
  background-color: #373737;
  margin: 0;
  padding: 0;
}

.navbar-menu-item {
  margin: 0;
  padding: 0;
}

.navbar-menu-button {
  color: white;
}
</style>
