<script>

    export let recordGraph;
    export let record;
    export let schema;
    export let isCreateMode;
    export let active = "_default";

    let tabs = schema.fields.filter((f) => f.ui === "tab");
    let mainTab = {
        label: "Main",
        name: "_default",
    };
    let graphTab = {
        label: "Graph",
        name: "_graph",
    };
    if (isCreateMode) {
        tabs = [mainTab, ...tabs];
    } else {
        tabs = [mainTab, ...tabs, graphTab];
    }

    function showGraph(e) {
        e.preventDefault();
        active = "_graph";
    }

    function changeTab(e, tabName) {
        e.preventDefault();
        if (tabName == "_graph") {
            showGraph(e);
        } else {
            active = tabName;
        }
    }
</script>

{#if tabs.length > 1}
    <ul class="nav nav-pills mb-4 justify-content-center">
        {#each tabs as tab}
            <li class="nav-item">
                <button
                    on:click={(e) => changeTab(e, tab.name)}
                    class="nav-link"
                    class:active={active === tab.name}
                    aria-current="page"
                >
                    {tab.label}
                </button>
            </li>
        {/each}
    </ul>
{/if}
