<template>
  <div class="container-fluid d-flex h-100 flex-column px-0">
    <app-header id="app_header" style="z-index: 5000;"></app-header>
    <div class="row no-gutters" style="z-index: 2000; background-color: #FFFFFF">
      <side-navigation v-if="show_side_navigation" :class="side_navigation_class_ob" :style="side_navigation_style_ob">
      </side-navigation>
      <div v-if="show_route_wrapper" :class="route_wrapper_class_ob" :style="route_wrapper_style_ob">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
const app_mixin = require("./su_client_js/mixins/AppMixin.vue").default
const height_changes_mixin = require("./su_client_js/mixins/HeightChangesMixin.vue").default
const lists_route_changes_mixin = require("./su_score_clock_js/mixins/RouteChangesMixin.vue").default

module.exports = {
  mixins: [app_mixin, height_changes_mixin, lists_route_changes_mixin],

  props: [],

  components: {
    "app-header": require("./su_score_clock_js/components/app_header/AppHeader.vue").default,
    "app-background": require("./su_client_js/components/background/AppBackground.vue").default,
    "side-navigation": () => import("./su_score_clock_js/components/side_navigation/SideNavigation.vue"),
  },

  data: function () {
    return {}
  },

  methods: {},

  computed: {
    show_side_navigation: function () {
      if (this.$store.getters.being_kind_to_mobile_mode_restarts) return false
      if (this.$store.getters.in_mobile_mode) return this.$store.getters.is_hamburger_expanded

      return this.$store.getters.is_hamburger_expanded
    },

    show_route_wrapper: function () {
      if (this.$store.getters.being_kind_to_mobile_mode_restarts) return false
      if (this.$store.getters.in_mobile_mode) return !this.$store.getters.is_hamburger_expanded

      return true
    },

    side_navigation_class_ob: function () {
      var _ob = {}
      // _ob["mh-100"] = true
      _ob[this.side_navigation_col_class] = true
      return _ob
    },

    route_wrapper_class_ob: function () {
      var _ob = {}
      //  _ob["mh-100"] = true
      _ob["col-12"] = !this.show_side_navigation && this.show_route_wrapper
      _ob["col-9"] = this.show_side_navigation && this.show_route_wrapper
      return _ob
    },

    side_navigation_col_class: function () {
      if (this.$store.getters.in_mobile_mode) if (this.$store.getters.is_hamburger_expanded) return "col-12"

      return "col-3"
    },

    route_wrapper_col_class: function () {
      if (this.$store.getters.in_mobile_mode) if (this.$store.getters.is_hamburger_expanded) return "col-12"

      return "col-3"
    },

    side_navigation_style_ob: function () {
      var _ob = {}

      if (this.show_route_wrapper) {
        _ob["position"] = "fixed"
        _ob["top"] = this.header_height_px + "px"
        _ob["left"] = "0%"
      }

      _ob["z-index"] = 500
      _ob["overflow-y"] = "scroll"
      _ob["height"] = this.window_height_px - this.header_height_px + "px"
      return _ob
    },

    route_wrapper_style_ob: function () {
      var _ob = {}

      if (this.show_side_navigation) {
        _ob["position"] = "fixed"
        _ob["top"] = this.header_height_px + "px"
        _ob["left"] = "25%"
      }

      _ob["z-index"] = 500
      _ob["overflow-y"] = "scroll"
      _ob["height"] = this.window_height_px - this.header_height_px + "px"
      _ob["background-color"] = "#FFFFFF"
      return _ob
    },
  },
}
</script>

<style>
html {
  color: #ffffff;
  background-color: #004181;
}

html,
body {
  background-color: #004181;

  min-width: 500px;
  height: 100%;

  -webkit-touch-callout: none;
}

::-webkit-scrollbar {
  width: 0; /* Remove scrollbar space */
  height: 0; /* Remove scrollbar space */
  background: transparent; /* Optional: just make scrollbar invisible */
}
</style>
