<template>
  <div>
    <section id="sub-header">
      <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')">
        <!-- top navigation menu -->
        <b-navbar-nav>
          <b-nav-item
            to="/"
            exact
            data-test-id="appHeader-container-health"
            class="subheader-button"
          >
            {{ $t('subHeader.serverInfo') }}
          </b-nav-item>

          <b-nav-item
            to="/operations/kvm"
            data-test-id="appHeader-container-health"
            class="subheader-button"
            :class="{
              'active-route-top': ''.includes(
                $route.path.split('operations/kvm')[1]
              ),
            }"
          >
            {{ $t('subHeader.console') }}
          </b-nav-item>

          <b-nav-item
            to="/security-and-access/user-management"
            data-test-id="appHeader-container-power"
            class="subheader-button"
            :class="{
              'active-route-top': ''.includes(
                $route.path.split('security-and-access/user-management')[1]
              ),
            }"
          >
            {{ $t('subHeader.administration') }}
          </b-nav-item>
          <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
        </b-navbar-nav>
      </b-navbar>
    </section>
  </div>
</template>

<script>
import BVToastMixin from '@/components/Mixins/BVToastMixin';

export default {
  name: 'AppHeader',
  mixins: [BVToastMixin],
  props: {
    routerKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isNavigationOpen: false,
    };
  },
  computed: {
    isNavTagPresent() {
      return this.assetTag || this.modelType || this.serialNumber;
    },
  },
  mounted() {
    this.$root.$on(
      'change-is-navigation-open',
      (isNavigationOpen) => (this.isNavigationOpen = isNavigationOpen)
    );
  },
  methods: {
    toggleNavigation() {
      this.$root.$emit('toggle-navigation');
    },
    setFocus(event) {
      event.preventDefault();
      this.$root.$emit('skip-navigation');
    },
  },
};
</script>

<style lang="scss">
@mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
  box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color;
}
.sub-header {
  height: 39px;

  .subheader-button {
    margin-left: 10px;
  }

  .active-route-top {
    background-color: $white;
    color: #1a3e5b !important;
    border-radius: 4px;
  }

  .navbar-text,
  .nav-link,
  .btn-link {
    border-radius: 4px;
    padding: 0.68rem 1rem !important;

    &:hover {
      background-color: $white;
      color: #1a3e5b !important;
      border-radius: 4px;
      border-bottom: 5px;
    }
    &:active {
      background-color: $white;
      color: #1a3e5b !important;
      border-bottom: 5px;
      border-radius: 4px;
    }
  }

  .navbar {
    padding: 0;
    background-color: $navbar-color;
    @include media-breakpoint-up($responsive-layout-bp) {
      height: 39px;
    }

    .helper-menu {
      @include media-breakpoint-down(sm) {
        width: 100%;
        justify-content: flex-end;
        .nav-link,
        .btn {
          padding: $spacer / 1.125 $spacer / 2;
          margin-left: 10px;
        }
      }
    }
  }

  .navbar-nav {
    align-items: baseline;
    padding-left: 24px;
    .nav-link {
      color: white;
    }
    .nav-tags {
      @include media-breakpoint-down(xs) {
        @include sr-only;
      }
      .asset-tag {
        @include media-breakpoint-down($responsive-layout-bp) {
          @include sr-only;
        }
      }
    }
  }

  .router-link-active {
    color: #1a3e5b !important;
    background-color: white;
    padding: 0.68rem 1rem !important;
  }
}
</style>
