<template>
  <div class="lhg-group-container">
    <Banner
      page="lhg"
      introduction-key="text"
      :add="['procedures_categories', 'procedures']"
    />

    <TemplateContainer size="l">
      <TwoColumnsLayout>
        <template #sidebar>
          <ShortcutsProcedures />

          <KeyContacts :users="contacts" />
        </template>

        <template #main>
          <ProceduresList :modal-info="{ name: 'test' }" />
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

<script>
import { storage } from '@inside-library/helpers/Storage'

import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import TwoColumnsLayout from '@inside-commons/components/lib/TwoColumnsLayout'

import KeyContacts from '../components/lhg-group/KeyContacts.vue'
import ShortcutsProcedures from '../components/lhg-group/ShortcutsProcedures.vue'
import ProceduresList from '../components/lhg-group/ProceduresList.vue'

export default {
  name: 'LhgGroupPage',
  components: {
    Banner,
    TemplateContainer,
    TwoColumnsLayout,
    KeyContacts,
    ShortcutsProcedures,
    ProceduresList
  },
  data() {
    return {
      contacts: storage.get('brand').users.data
    }
  }
}
</script>
