<script>
import MenuList from './MenuList.vue'
import MobileMenu from './MobileMenu.vue'
import LeftPanel from './AppContainerLeftPanel.vue'
import Breadcrumbs from './AppContainerBreadcrumbs.vue'
import RightPanel from './RightPanel.vue'
import AppContainerHeader from './AppContainerHeader.vue'
import {mapGetters} from 'vuex'

export default {
  name: 'AppContainer',
  components: {
    MobileMenu,
    MenuList,
    LeftPanel,
    Breadcrumbs,
    RightPanel,
    AppContainerHeader
  },
  data() {
  },
  computed: {
    ...mapGetters('layout', ["show_menu", 'is_enabled_menu']),
    ...mapGetters('auth',   ['menuList']),
  },
  methods: {
  }
}

</script>

<template>
  <div class="main w-full">
    <!-- BEGIN: TOP BAR -->
    <div
      id="menu"
      class="top-bar-boxed w-full h-[59px] mt-[4px] z-[51] relative justify-center border-b border-white/[0.2] -mx-3 px-3 sm:pl-8 md:pt-0 mb-[4px]"
    >
      <MobileMenu
        v-if="false"
        current_menu_item=""
        current_user=""
        :menu_list="menuList"
      />
      <AppContainerHeader>
        <div class="flex justify-between items-center">
          <LeftPanel />
          <Breadcrumbs
            v-if="false"
            :breadcrumbs="[]"
          />
          <RightPanel
            :current_user="''"
            :page_title="''"
            :notifications="[{from: 'Бот из LM', datetime: '10:00', message: 'Проведен редизайн приложения', readed: false}]"
          />
        </div>
        <div class="sm:hidden flex items-center justify-between" />
      </AppContainerHeader>
    </div>
    <!-- END: TOP BAR -->
    <div class="wrapper">
      <div class="wrapper-box">
        <div v-if="show_menu && is_enabled_menu">
          <MenuList
            :menu_list="menuList"
          />
        </div>
        <div class="content">
          <div class="grid grid-cols-12 gap-6 h-full">
            <slot />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
