<?js
var self = this;

function toShortName(name) {
    return name.startsWith('module:') ? name.split('/').pop() : name;
}

function getItemCssClass(type) {
    if (type === 'module') {
        return 'fa-plus';
    } else if (type === 'class') {
        return 'fa-chevron-right';
    }
    return '';
}

const printListItem = (member) => {
    const shortName = toShortName(member.name); ?>
            <li data-name="<?js= shortName.toLowerCase() ?>"><?js= self.linkto(member.longname, shortName) ?><?js
};
const printListItemWithStability = (member) => {
    const shortName = toShortName(member.name);
    const cls = member.stability && member.stability !== 'stable' ? ' class="unstable"' : ''; ?>
            <li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= self.linkto(member.longname, shortName) ?><?js
};
const printFiresListItem = (eventName) => {
    const ancestor = self.find({longname: eventName})[0] ||
        {longname: eventName, name: eventName.split(/#?event:/)[1]};
    const eventEnum = ancestor.longname.split(/#?event:/)[0];
    if (self.find({longname: eventEnum})[0]) {
        printListItemWithStability(ancestor);
    } else {
        const cls = ancestor.stability && ancestor.stability !== 'stable' ? ' class="unstable"' : '';
        const shortName = toShortName(ancestor.name); ?>
            <li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= shortName ?><?js
    }
};

function listContent(item, title, listItemPrinter) {
    const type = title.toLowerCase();
    if (item[type] && item[type].length) { ?>
    <div class="member-list" data-type="<?js= type ?>">
        <span class="subtitle"><?js= title ?></span>
        <ul><?js
        item[type].forEach((v) => listItemPrinter(v)); ?>
        </ul>
    </div><?js
    }
} ?>
<li class="item item-<?js= item.type ?><?js= obj.classes || '' ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
    <span class="title toggle">
        <span class="fa <?js= getItemCssClass(item.type) ?> me-2 mt-1"></span>
        <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
    </span><?js
listContent(item, 'Members', printListItem);
listContent(item, 'Typedefs', printListItemWithStability);
listContent(item, 'Methods', printListItemWithStability);
listContent(item, 'Fires', printFiresListItem);
?>