<template>
  <div class="room-reservations-container">
    <Banner
      page="room-reservations"
      :back="{
        title: $_tr('back'),
        href: { name: 'ToolsPage' }
      }"
    >
      <template #footer>
        <AllReservationButton />
      </template>
    </Banner>

    <TemplateContainer size="xxl">
      <FullAgendaContainer />
    </TemplateContainer>
  </div>
</template>

<script>
import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

import FullAgendaContainer from '../../components/reservations/FullAgendaContainer'
import AllReservationButton from '../../components/reservations/SeeAllReservationsButton'

export default {
  name: 'RoomReservationPage',
  $_i18nRootPath: 'customs.RESERVATIONS.AGENDA',
  components: {
    AllReservationButton,
    FullAgendaContainer,
    Banner,
    TemplateContainer
  }
}
</script>

<style lang="scss">
.room-reservations-container {
  .banner-container .footer {
    margin-top: var(--spacing-xl);
    text-align: center;
  }
}
</style>
