<template>
  <BaseCard class="right">
    <template #header-title>
      <b-tabs>
        <b-tab-item>
          <template slot="header">
            <span>Branch Detail</span>
          </template>
          <BranchDetail v-bind="branch" @close-branch="$emit('close-branch')" />
        </b-tab-item>
        <b-tab-item>
          <template slot="header">
            <span>Commit Detail</span>
          </template>
          <CommitDetail v-bind="commit" @switch-to-comparison="$emit('switch-to-comparison')" />
        </b-tab-item>
      </b-tabs>
    </template>
  </BaseCard>
</template>

<script>
import CommitDetail from './CommitDetail.vue'
import BranchDetail from './BranchDetail.vue'
export default {
  components: {
    CommitDetail,
    BranchDetail
  },
  props: {
    commit: {
      type: Object,
      required: true
    },
    branch: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="sass" scoped>
.right
  position: absolute
  height: 18rem
  right: 4rem
  bottom: -5rem

nav.tabs
  li a span
    justify-content: flex-start
    order: 0
    flex-grow: 1
    margin-top: 0.4em
    margin-bottom: 0.2em
    font-weight: 600
    font-size: 0.75rem
    text-transform: uppercase
    letter-spacing: 0.1rem
    color: $mid-gray
  li.is-active a span
    color: $dark-gray
</style>
