function sidebarNav(items) {
	let listItems = "";

	for(let item of items) {
		let aOpen = "";
		let aClose = "";
		if(item.route) {
			aOpen = `<a class="list-action" href="${item.route}">`;
			aClose = `</a>`;
		}

		listItems += `
			<li class="list-item ${item.is_active ? "list-item-active" : ""}">
				${aOpen}${item.content}${aClose}
			</li>
		`;
	}

	return `
		<div class="sidebar block">
			<ul class="list list-nav">
				${listItems} 
			</ul>
		</div>
	`;
}

function table(caption, columns, data, tfoot) {
	let head = `<tr class="table-row">`;
	for(let key in columns) {
		head += `<th scope="col">${columns[key]}</th>`;
	}
	head += "</tr>";

	let body = ``;
	for(let item of data) {
		body += `<tr class="table-row">`;
		for(let column in columns) {
			body += `<td>${item[column]}</td>`;
		}
		body += `</tr>`;
	}

	let foot = "";
	if(typeof tfoot != "undefined") {
		foot = `
			<tfoot class="table-foot">
				<tr class="table-row">
					<td colspan="${columns.length}">
						${tfoot}
					</td>
				</tr>
			</tfoot>
		`
	}

	return `
		<table class="table devices-lists">
			<caption class="table-caption">${caption}</caption>
			<thead class="table-head">${head}</thead>
			<tbody class="table-body">${body}</tbody>
			${foot}
		</table>
	`;
}

export default {
	template: {
		sidebarNav,
		table
	}
}