{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <div class="card mt-3">
            <span class="badge rounded-pill">Transcript Browser</span>
            <table id="browse_table" class="display table table-striped"  style="width: 100%; padding: auto;">
                <thead>
                </thead>
                <tbody>           
                </tbody>
            </table>
        </div>
    </div>
</main>
<script>
    let urlParts = window.location.pathname.split('/');
    let project_id = urlParts[urlParts.indexOf("browse") + 1]; 
    console.log("Project ID:", project_id);

    const browseList = JSON.parse('{{ browse_list|safe|escapejs }}');
    const selectedColumn = '{{ selected_column|safe }}';
        
    $(document).ready(function() {
        let tableColumns = [
            { 
                data: 'gene_id', 
                title: 'Transcript / Contig ID',
                render: function(data) {
                    return `<a href="/analysis/gene_search_info/${project_id}/?GeneID=${data}">${data}</a>`;
                }
            }
        ];
        // 如果有 selectedColumn (且不為 None 或空)，才加入 Description 欄位
        if (selectedColumn && selectedColumn !== 'None' && selectedColumn !== '') {
            tableColumns.push({ 
                data: 'description', 
                title: selectedColumn,
                className: 'description-column'
            });
        }

        tableColumns.push({ 
            data: 'ko_id', 
            title: 'KO ID',
            className: 'kegg-column'
        });
        tableColumns.push({ 
            data: 'mapdef', 
            title: 'Pathway annotation',
            className: 'kegg-column'
        });
        $('#browse_table').empty();

        $('#browse_table').DataTable({
            data: browseList,
            columns: tableColumns,
            order: [],
            deferRender: true,
            pageLength: 25,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            searching: true,
            ordering: true,
            info: true,
            autoWidth: true,
            responsive: true,
            mark: true,
            language: {
                search: "Keyword search:",
                zeroRecords: "No matching genes found"
            },
        });
    });

</script>
<style>
    mark {
        background-color: #ffc107;
        color: black;
        padding: 0.1em 0.2em;
        border-radius: 3px; 
    }
</style>
{% endblock %}