<template lang="pug">
  tr.data-sheet-column-titles
    th.data-sheet-title.text-align-center.vertical-align-middle.is-narrow(v-if="showCheckbox")
      label.checkbox
        input(
          type="checkbox"
          @change="select.toggleAll()"
          :checked="select.isSelectAll"
        )
    th.data-sheet-title(
      v-for="column in columns"
      :key="columns.key"
      :class="[columnar.alignment[column.key], columnar.whitespace[column.key]]"
    )
      slot(
        :name="`${column.key}-title`"
        :column="column"
      )
        a(
          :title="column.title"
          @click.prevent.stop="columnar.toggleSortDirection(column)"
        )
          slot(
            :name="`${column.key}-title-text`"
            :column="column"
          )
            span {{ column.heading || column.title }}
          slot(
            :name="`${column.key}-title-sort`"
            :column="column"
          )
            span.icon.is-small.is-text-dark-grey(v-if="column.orderBy.direction.length")
              i.fa(:class="{'fa-caret-down': column.orderBy.direction === 'desc', 'fa-caret-up': column.orderBy.direction === 'asc'}")
</template>

<script>
export default {
  name: 'DataSheetColumnTitle',
  props: {
    columns: {
      type: Array,
      required: true
    },
    columnar: {
      type: Object,
      required: true
    },
    select: {
      type: Object,
      required: true
    },
    showCheckbox: {
      type: Boolean,
      required: false,
      default: false
    }
  }
}
</script>

<style>
</style>
