import { Component } from '../../lib/vues6/vues6.js'

const template = `
<div>
    <h2 class="mb-4" v-if="definition.title">{{ definition.title }}</h2>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col" v-for="col of definition.columns">{{ col.name }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(row, index) of definition.data">
                <th scope="row">{{ index + 1 }}</th>
                <td v-for="col of definition.columns">
                    <span v-if="col.renderer === 'boolean'">{{ col.field ? 'Yes' : 'No' }}</span>
                    <span v-if="col.renderer !== 'boolean'">{{ col.field in row ? row[col.field] : '-' }}</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>
`

export default class ListingComponent extends Component {
    static get selector() { return 'cobalt-listing' }
    static get template() { return template }
    static get props() { return ['definition'] }
}