App.UI.MultipleInspect = (function() {
	function _LSDDOM(slave, saleDescription, applyLaw) {
		// LSD will reset these globals, so we have to set them every single time
		V.saleDescription = (saleDescription ? 1 : 0);
		V.applyLaw = (applyLaw ? 1 : 0);

		const oldAS = V.activeSlave;
		V.activeSlave = slave;
		const frag = App.UI.DOM.renderPassage("Long Slave Description");
		V.activeSlave = oldAS;
		return frag;
	}

	/**
	 * Provide a mechanism to inspect multiple slaves at once (for example, for Household Liquidators and recETS).
	 * Intended for use from DOM passages.
	 * @param {Array<App.Entity.SlaveState>} slaves
	 * @param {boolean} showFamilyTree
	 * @param {boolean} saleDescription
	 * @param {boolean} applyLaw
	 * @returns {DocumentFragment}
	 */
	function MultipleInspectDOM(slaves, showFamilyTree, saleDescription, applyLaw) {
		const frag = document.createDocumentFragment();
		const tabbar = App.UI.DOM.appendNewElement("div", frag, "", "tabbar");

		for (const slave of slaves) {
			tabbar.append(App.UI.tabbar.tabButtonDOM(`slave${slave.ID}`, slave.slaveName));
			frag.append(App.UI.tabbar.makeTabDOM(`slave${slave.ID}`, _LSDDOM(slave, saleDescription, applyLaw)));
		}

		if (slaves.length > 1 && showFamilyTree) {
			const button = App.UI.tabbar.tabButtonDOM(`familyTreeTab`, "Family Tree");
			button.addEventListener('click', event => {
				renderFamilyTree(slaves, slaves[0].ID);
			});
			tabbar.append(button);
			const ftTarget = document.createElement("div");
			ftTarget.setAttribute("id", "familyTree");
			frag.append(App.UI.tabbar.makeTabDOM(`familyTreeTab`, ftTarget));
		}

		App.UI.tabbar.handlePreSelectedTab(`slave${slaves[0].ID}`);

		return frag;
	}

	return MultipleInspectDOM;
})();

src/gui/multipleInspect.js