<template>
  <div
    class="layout layout-horizontal"
    :class="[
      display ? `layout-horizontal--${display}` : '',
      getRolesClass,
      hasModal && getMobile ? 'scroll-disabled' : ''
    ]"
  >
    <ScaffoldedData
      v-if="getTablet & showNotifications"
      :data="notifications"
      class="layout-notifications"
    />

    <div v-if="hasSlotContent('header')" class="layout-horizontal__header">
      <slot v-if="!getTablet" name="header" />

      <slot name="mobile-header" />
    </div>

    <div
      :class="{ sticky: getStickNavStatus && !getTablet }"
      class="layout-horizontal__content"
    >
      <div>
        <MainActions />

        <slot name="content" />

        <component
          :is="extraComponent"
          v-if="$_getConfig('extraComponent', 'inside-layouts')"
        />
      </div>
    </div>

    <slot v-if="hasSlotContent('footer')" name="footer" />

    <MobileNav v-if="getTablet" />
  </div>
</template>

<script>
import Voca from 'voca'

import HorizontalLayouts from '@inside-layouts/displays/HorizontalLayouts'
import ScaffoldedData from '@inside-library/components/commons/components/ScaffoldedData'
import HeaderNotifications from '@inside-notifications/components/lib/Header'
import MobileNav from '@inside-layouts/displays/sub-components/MobileNav'

export default {
  name: 'horizontal-layouts',
  components: {
    ScaffoldedData,
    HeaderNotifications,
    MobileNav
  },
  extends: HorizontalLayouts,
  computed: {
    getRolesClass() {
      if (this.getUserInfos && this.getUserInfos.permissions.roles) {
        const roles = this.getUserInfos.permissions.roles
        let classes = ''

        for (let y = 0; y < roles.length; y++) {
          classes = `${classes} role--${Voca.slugify(roles[y])}`
        }

        return classes
      }

      return ''
    },
    getStickNavStatus() {
      return !!this.$store.getters.getInsideSettings('general.header_general')
    }
  }
}
</script>
