@@include("../partials/knbase-entry-form.html")
@@include("../partials/edit-knentry.html")

<div class="container">
	<div class="row">
		<div class="col select-knbase-cat">
			@@include("../partials/knbase-cat.html")
		</div>

		<div class="col knbase-search">
			@@include("../partials/knbase-search.html")
		</div> 

		<div class="col">
			<div class="mt-1">
				Новий запис
			</div>
			<button type="button" class="btn btn-primary btn-sm" data-coreui-toggle="modal" data-coreui-target="#knbaseEntryForm"><span class="mdi mdi-plus"></span> Створити</button>
		</div>
	</div>
	<div class="row">
		<div class="col">
			<table class="table table-striped-columns entries">
				<thead>
					<tr>
						<th>Заголовок</th>
						<th>Тип запису</th>
						<th>Додано</th>
						<th>Редагувати</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
</div>		

<script>
	document.addEventListener("DOMContentLoaded", e => {
		const table = document.querySelector("table.entries");
		const tbody = table.querySelector("tbody");
		const knbaseSelector = document.querySelector("#pills-knbase .select-knbase-cat .form-select.knbase");
		const knbaseSearch = document.querySelector("#pills-knbase .knbase-search input");

		table.rendering = function(resp) {
			this.querySelector("tbody").innerHTML = "";

			for(let item of resp.entries) {
				const create_at = formattedTimestamp(item.create_at);
				const entry_type = entryTypeToView(item.type);
				const keywords = [`id${item.id}`, item.title, item.content, create_at, item.include_to, item.hlink].join(" ").toLowerCase().replaceAll('"', "");

				let entry = `
					<td>${item.title}</td>
					<td>${entry_type}</td>
					<td>${create_at}</td>
					<td>
						<button type="button" class="btn btn-link btn-sm" data-coreui-toggle="modal" data-coreui-target="#knbaseEditEntryForm" data-entry-id="${item.id}">Редагувати</button>
					</td>
				`;

				let row = document.createElement("tr");
				row.dataset.keywords = keywords;
				row.innerHTML = entry;
				row.querySelector("button[data-entry-id]").addEventListener("click", e => {
					const entryId = e.currentTarget.dataset.entryId;

					doAction("knbase.entry", {"entry_id": entryId}, resp => {
						document.getElementById("knbaseEditEntryForm").viewEntryData(resp.entry);
					});
				});

				this.querySelector("tbody").appendChild(row);
			}
		};

		table.loadDataFromServer = function(){
			doAction("knbase.entries", {
				"type": knbaseSelector.value
			}, resp => {
				table.rendering(resp);
				knbaseSearch.value = "";
			});
		}

		knbaseSelector.addEventListener("change", e => {
			table.loadDataFromServer();
		});

		knbaseSearch.addEventListener("input", e => {
			let query = e.currentTarget.value.trim().toLowerCase().split(/\s+/);
  		const regex = new RegExp(query.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join(".*?"), "i");

			const rows = tbody.querySelectorAll("tr");
			for(let i in rows) {
				if(!regex.test(rows[i].dataset.keywords)) {
					rows[i].style.display = "none";
				} else {
					rows[i].removeAttribute("style");
				}
			}
		});

		table.loadDataFromServer();
	});
</script>