PageTabs

/**
 * Page Tabs Control
 * @TODO guerrics: overflowing tabs
 *
 * @param array pages - array of pages (default: map.values(page.subpages))
 * @param str tab - name of the selected tab (default: __request.args.tab)
 */
var pages = $pages ?? map.values(page.subpages);
let pages = [ (p is str) ? wiki.getpage(p) : p foreach var p in pages];
var selectedTab = $tab ?? __request.args.tab;

// find the active tab page
var activeTab = [ tabpage foreach var tabpage in pages where tabpage.name == selectedTab ][0];

// no selected tab found, use first tab
if (!activeTab) {
    let activeTab = pages[0];
}
    <div class="mt-tabs ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            foreach(var tabpage in pages) {
                <li id=('tab-'..tabpage.name) class=('ui-state-default ui-corner-top'..(tabpage.name == activeTab.name ? " ui-tabs-selected ui-state-active " : ""))>
                    <a href=(page.uri & {tab: tabpage.name})>
                        tabpage.title ?? "#" .. (__count + 1)
                    </a><span></span>
                </li>
            }
        </ul>
        <div class=("ui-tabs-panel ui-widget-content ui-corner-bottom"..(#pages > 0 ? "" : "ui-state-empty"))>
            if (activeTab) {
                var contents = activeTab.contents;
                if (contents) {
                    contents;
                } else {
                    wiki.page(activeTab.path);
                }
            }
        </div>
    </div>