<template>
  <div id="app">
    <template v-if="!this.$route.path.includes('login')">
      <header-content data-id="app-header"></header-content>
      <div class="flex-container">
        <nav-content data-id="nav-container"></nav-content>
        <ods-main data-id="main-container">
          <ods-scrollbar wrapClass="ods-scrollbar--main-content">
            <router-view></router-view>
            <footer></footer>
          </ods-scrollbar>
        </ods-main>
      </div>
    </template>
    <template v-else>
      <router-view></router-view>
    </template>
  </div>
</template>

<script>
import {mapMutations} from 'vuex';

import HeaderContent from '@/components/header/HeaderContent';
import NavContent from '@/components/nav/NavContent';

export default {
  name: 'App',
  components: {
    HeaderContent,
    NavContent,
  },
  watch: {
    $route(to) {
      if (to.path === '/map/assets') {
        this.toogleMapIsVisible({mapIsVisible: true});
      }
    },
  },
  methods: {...mapMutations(['toogleMapIsVisible'])},
};
</script>

<style lang="scss">

html,
body {
  font-family: "Soho", Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: none;
  .ods-scrollbar--main-content {
    height: $--main-content-height;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 0 !important;
    box-sizing: border-box;
    padding: $--main-content-padding;
    background: $--color-neutral-4;
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
.ods-scrollbar__bar.is-horizontal,
.ods-scrollbar__bar.is-vertical {
  display: none;
}
.ods-table .cell {
  white-space: nowrap;
}
.ods-select .ods-input__inner:read-only {
  border-radius: 20px;
  background-color: #fff;
  border: 1px solid #666;
  padding-left: 15px;
  font-size: 12px;
}
.ods-input.is-disabled .ods-input__inner {
  background-color: #eaf0f5;
  color: #222;
}

.flex {
  display: flex;
}

.tag {
  padding: 4px 15px;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 9px;
}

.blueTag {
  background-color: #e4e3f0;
  color: #7874b4;
}

.greenTag {
  background-color: #eaf7ec;
  color: #36b348;
}

.assignedTag {
  background-color: #e4eef2;
  color: #2e6c99;
}
.informativeTag {
  background-color: $--color-neutral-1-light;
  color: $--color-neutral-1;
}
.redTag {
  background-color: $--color-danger-light;
  color: #de2f2f;
}

.ods-sub-header {
  z-index: 1001;
}

.ods-tooltip__popper.is-dark {
  background: #FFF;
  color: #222;
  padding: 20px;
  font-size: 12px;
}

.circle-icon {
  border-radius: 50%;
  width: 45px;
  height: 45px;
  border: 1px solid #CCC;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-container {
  align-items: center;
  height: calc(100% - 64px);
  p {
    color: #222;
    font-size: 11px;
  }
}

.capitalize::first-letter {
  text-transform: capitalize;
}
</style>
