<template>
    <tr>
        <th
            v-if="headerRow.mode === 'span'"
            class="vgt-left-align vgt-row-header"
            :colspan="fullColspan">
            <slot
                :row="headerRow"
                name="table-header-row">
                <span
                    v-if="headerRow.html"
                    v-html="headerRow.label"/>
                <span v-else>
                    {{ headerRow.label }}
                </span>
            </slot>
        </th>
        <!-- if the mode is not span, we display every column -->
        <th
            v-if="headerRow.mode !== 'span' && lineNumbers"
            class="vgt-row-header"/>
        <th
            v-if="headerRow.mode !== 'span' && selectable"
            class="vgt-row-header"/>
        <template v-if="headerRow.mode !== 'span'">
            <th
                v-for="(column, i) in columnsFiltered"
                :key="i"
                class="vgt-row-header"
                :class="getClasses(i, 'td')">
                <slot
                    :row="headerRow"
                    :column="column"
                    :formattedRow="formattedRow(headerRow, true)"
                    name="table-header-row">
                    <span v-if="!column.html">
                        {{ collectFormatted(headerRow, column, true) }}
                    </span>
                    <span
                        v-if="column.html"
                        v-html="collectFormatted(headerRow, column, true)"/>
                </slot>
            </th>
        </template>
    </tr>
</template>

<script>
export default {
    name: 'VgtHeaderRow',
    components: {
    },
    props: {
        headerRow: {
            type: Object,
        },
        columns: {
            type: Array,
        },
        lineNumbers: {
            type: Boolean,
        },
        selectable: {
            type: Boolean,
        },
        collectFormatted: {
            type: Function,
        },
        formattedRow: {
            type: Function,
        },
        getClasses: {
            type: Function,
        },
        fullColspan: {
            type: Number,
        },
    },
    data() {
        return {
        };
    },
    computed: {
        columnsFiltered() {
            return this.columns.filter(col => !col.hidden)
        },
    },
    mounted() {
    },
    methods: {
    },
};
</script>

<style lang="scss">

</style>
