<div>
    <h1 id="{{ datatable.table_id }}"></h1>
</div>
<script>
    (function () {
        var table = {{ datatable.model_table_setup }};
        var link_index = -1;
        var link_details;
        var indexes = table.initsetup.tableOptions.indexes;
        var heading_index = indexes.indexOf('heading')

        var description_index = indexes.indexOf('description')
        var background_colour_index = indexes.indexOf('background_colour')
        var heading_colour_index = indexes.indexOf('heading_colour')

        if(table.initsetup.tableOptions.row_href) {
            link_details = table.initsetup.tableOptions.row_href[0];
            link_index = table.initsetup.field_ids.indexOf(link_details.column);
        }
        $.each(table.data, function( index, card ) {
            var html = '';
            var link = '';
            var styles = '';
            if(link_index >= 0) {
                link = link_details.html.replace(link_details.var, card[link_index]);
                styles += 'cursor:pointer;';
            }
            console.log(card[background_colour_index])
            if(background_colour_index >= 0){
                var background_colour = card[background_colour_index];
                if (!background_colour.startsWith('#')) {
                    background_colour = '#' + background_colour;
                }
                styles += 'background-color:' +background_colour + ';'
            }
            html += '<div class="kanban_item"';
            if(styles !== ''){
                html += ' style="' + styles + '"';
            }
            if(link !== ''){
                html += ' onclick="location.href=\'' + link + '\'"'
            }
            html += '>'
            if(heading_index >= 0) {
                if(heading_colour_index >= 0) {
                    var heading_colour = card[heading_colour_index];
                    if (!heading_colour.startsWith('#')) {
                        heading_colour = '#' + heading_colour;
                    }
                    html += '<h5 style="color: ' + heading_colour + '">' + card[heading_index] + '</h5>';
                } else {
                    html += '<h5>' + card[heading_index] + '</h5>';
                }
            }
            if(description_index >= 0) {
                html += '<h6>' + card[description_index] + '</h6>';
            }
            html += '</div>';

            $('#' + table.table_id).append(html);
        })
    })();
</script>
