<template>
  <header class="top-header bg-white w-100 d-flex align-items-center justify-content-between px-4" :class="{ 'box-shadow': shadow }">
    <portal-target name="top-header-left" tag="div" class="d-flex align-items-center flex-grow-1 mr-4">
      <slot>
        <button v-if="$route.meta.browserBack" @click="$router.go(-1)" class="btn ml-n3" title="Terug naar overzicht"><arrow-left-icon /></button>
        <router-link v-if="!$route.meta.browserBack && $route.meta.back" :to="{ name: $route.meta.back }" class="btn ml-n3" title="Terug naar overzicht"><arrow-left-icon /></router-link>
        <portal-target name="top-header-title" tag="h1" class="top-header-title mb-0 d-flex align-items-center">
          <slot>
            {{ $route.meta.title }}
          </slot>
        </portal-target>
      </slot>
    </portal-target>
    <div class="d-flex align-items-center">
      <portal-target name="top-header-right" tag="div"></portal-target>
      <user-avatar placeholder />
      <language-switch class="ml-2" />
    </div>
  </header>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

import UserAvatar from './user-avatar.vue';
import LanguageSwitch from './language/language-switch.vue';

@Component({
  components: {
    UserAvatar,
    LanguageSwitch
  }
})
export default class TopHeader extends Vue {
  @Prop(Boolean) readonly shadow!: boolean;
}
</script>

<style lang="scss" scoped>
@import '../variables';

.top-header {
  border-bottom: 1px solid $border-color;
  z-index: $z-index-header;
  transition: box-shadow .2s ease-in-out;

  &.box-shadow {
    box-shadow: 4px 2px 10px -3px rgba(0, 0, 0, .3);
  }

  &-title {
    font-size: 20px;
  }
}
</style>
