<template lang="pug">
  .table-header.flex.w-full.pr-2
    .flex.items-center.justify-center.pl-11(
      :style="{width: 'calc(25% + 43px)'}"
    )
      .text.font-bold(
        :style="{color: 'var(--btn-blue-color)'}"
      ) Сотрудник
    .column-wrapper.flex
      .flex.flex-col.items-center.justify-center.w-11(
        v-for="day in result",
        :class="{'column-color': changelColumnColor(day)}",
        :style="{width: `calc(100% / ${result.length})`}"
      )
        .text.flex.font-bold(
          :style="{opacity: changeOpacity(day)}"
        ) {{day.format("D")}}
        .text.flex.font-bold(
          :style="{opacity: changeOpacity(day)}"
        ) {{day.format("ddd")}}
</template>

<script>
export default {
  name: "ScheduleTableHeader",
  props: { result: Array },
  methods: {
    changelColumnColor(day) {
      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
        ? true
        : false;
    },
    changeOpacity(day) {
      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
        ? "0.6"
        : "1";
    },
  },
};
</script>

<style lang="sass" scoped>
.table-header
  height: 50px
  background-color: #D7D9FF
  border-bottom: 1.5px solid var(--border-light-grey-color-1)
  border-top-left-radius: 2px
  border-top-right-radius: 2px

.column-wrapper
  overflow: auto
  overflow-x: hidden
  width: calc(75% - 44px)

.column-color
  background-color: var(--bg-white-color-1)

.text
  color: var(--btn-blue-color)
</style>
