<template lang="pug">
  .calendar-column-wrapper.flex.flex-col(ref="columnRef")
    .header.flex.flex-col.items-center.justify-center.top-0.pt-3.pb-10px
      span.font-bold.text-base.color-black {{ date?.format("D MMMM")}}
      span.text-smm.color-grey {{ transformDayName(date?.format("dddd"))}}
    .body.h-full.px-1.py-1
      calendar-record-card(:column-ref="$refs.columnRef")
    .footer.flex.items-center.justify-center.bg-white.h-9(v-if="!expandedDisplayType")
      span.text-smm.color-grey 0 записей
</template>

<script>
import CalendarRecordCard from "@/pages/newCalendar/components/CalendarRecordCard.vue";
export default {
  name: "CalendarColumn",
  components: { CalendarRecordCard },
  props: {
    date: Object,
    expandedDisplayType: Boolean,
  },
  methods: {
    transformDayName(name) {
      return name[0]?.toUpperCase() + name?.slice(1);
    },
  },
};
</script>

<style lang="sass" scoped>
.calendar-column-wrapper
  border-right: 1px solid var(--border-light-grey-color)
  width: 380px
  &:last-child
    border-right: none

.header
  position: sticky
  z-index: 5
  background-color: var(--default-white)

.body
  position: relative
  z-index: 3

.color-black
  color: var(--font-dark-blue-color)

.color-grey
  color: var(--font-grey-color)

.footer
  border-top: 1px solid var(--border-light-grey-color)
  @media(min-height: 1090px)
    border-bottom: 1px solid var(--border-light-grey-color)
</style>
