{{< LucidityLayout}}

{{$content}}

<article class="card">
	<span class="badge">
		{{exceptionType}}
	</span>
	<h2>
		{{exception.getMessage}}
	</h2>
	<section class="info">
		<span>PHP {{phpVersion}}</span>
		<span>lucidity {{lucidityVersion}}</span>
	</section>
</article>

<article class="card edgeless grid thirty-seventy">
	<aside class=list>
	{{#trace}}
		<article class="list-item" data-id="{{id}}">
			{{#class}}
				<span class="file">{{.}}:<code>{{line}}<code></span>
			{{/class}}
			{{^class}}
				{{#file}}
					<span class="file">{{.}}:{{line}}</span>
				{{/file}}
			{{/class}}
			<h3>{{function}}</h3>
		</article>
	{{/trace}}
	</aside>
	<main class=code>
		{{#exception.getFile}}
			<a href="zed://file/{{.}}:{{exception.getLine}}" class="file" id=file>{{.}}:{{exception.getLine}}</a>
		{{/exception.getFile}}
		<pre><code class=language-php id=code>{{initialContent}}</code></pre>
	</main>
</article>

{{> LucidityHighlight}}

<script>
	let lastItem = null;

	const convert = string => {
		const textarea = document.createElement("textarea");
		textarea.innerHTML = string;
		return textarea.textContent.replace(/(^"|"$)/gm, "");
	};

	const $ = selector => {
		const nodeList = document.querySelectorAll(selector);

		return nodeList.length === 1 ? nodeList[0] : nodeList;
	};

	const files = Object.freeze({
		{{#trace}}
			{{#file}}
				{{id}} : {
					file    : "{{.}}",
					line    : {{line}},
					content : "{{content}}"
				},
			{{/file}}
		{{/trace}}
	});

	document.addEventListener("DOMContentLoaded", () => {
		hljs.highlightAll();
		hljs.initLineNumbersOnLoad();

		const code = $("#code");
		const file = $("#file");

		let first = true;
		for (const item of $(".list-item")) {
			item.addEventListener("click", event => {
				const id = item.getAttribute("data-id");

				if (lastItem)
					lastItem.classList.remove("active");
				lastItem = item;
				item.classList.add("active");

				code.removeAttribute("data-highlighted");
				code.textContent = convert(files[id]?.content ?? "");
				file.innerHTML = `${files[id]?.file}:<code>${files[id]?.line}</code>`;
				hljs.highlightAll();
				hljs.initLineNumbersOnLoad();
				hljs.highlightLinesAll([
					[{start: files[id]?.line, end: files[id]?.line, color: '#ef444433'}]
				]);
			});
			if (first) {
				item.click();
				first = false;
			}
		}
	});
</script>

{{/content}}

{{/LucidityLayout}}