{% extends "@miyagi/layouts/iframe_default.twig.miyagi" %}
	{% block body %}
		<main class="Wrapper">
			<div class="Documentation">
				{% if name %}
					<h1>{{ name }}</h1>
				{% endif %}
				{% if documentation %}
					{{ documentation }}
				{% endif %}
			</div>
			<div class="DeveloperInformation">
				{% if renderInformation %}
					<h2 class="SectionTitle">Information</h2>
					<dl class="Information">
						<div class="Information-wrapper">
							<dt class="Information-attr">Folder</dt>
							<dd class="Information-val"><code>{{ folder }}</code></dd>
						</div>
					</dl>
				{% endif %}
				{% if perfSection %}
					<h2 class="SectionTitle">Performance</h2>
					<dl class="Information PerfSection">
						<div class="Information-wrapper">
							<dt class="Information-attr">CSS</dt>
							<dd class="Information-val">
								<span class="PerfChip PerfChip--{{ perfSection.css.status }}">{{ perfSection.css.bytesLabel }}{% if perfSection.css.budgetLabel %} / {{ perfSection.css.budgetLabel }}{% else %} (no budget){% endif %}</span>
							</dd>
						</div>
						<div class="Information-wrapper">
							<dt class="Information-attr">JS</dt>
							<dd class="Information-val">
								<span class="PerfChip PerfChip--{{ perfSection.js.status }}">{{ perfSection.js.bytesLabel }}{% if perfSection.js.budgetLabel %} / {{ perfSection.js.budgetLabel }}{% else %} (no budget){% endif %}</span>
							</dd>
						</div>
					</dl>
				{% endif %}
				{% if renderFileTabs %}
					<h2 class="SectionTitle">Files</h2>
					<div class="Tabs">
						{% if schema %}
							<details class="Tabs-tab">
								<summary>Schema</summary>
								<div id="json-tree-resolved-schema" data-jsontree-js="jsontree.schema"></div>
							</details>
						{% endif %}
						{% if mocks %}
							<details class="Tabs-tab">
								<summary>Mocks</summary>
								<div id="json-tree-resolved-mocks" data-jsontree-js="jsontree.mocks"></div>
							</details>
						{% endif %}
						{% if dataJson %}
							<details class="Tabs-tab">
								<summary>Data</summary>
								<div id="json-tree-resolved-data" data-jsontree-js="jsontree.data"></div>
							</details>
						{% endif %}
						{% if template %}
							<details class="Tabs-tab">
								<summary>Template</summary>
								<pre class="Code language-{{ template.type }}"><span class="token comment">// {{ template.file }}</span>

<code>{{ template.string|escape }}</code></pre>
							</details>
						{% endif %}
					</div>
					{% if schemaError %}
						<p class="ErrorMessage">{{ schemaError }}</p>
					{% endif %}
				{% endif %}
			</div>
			{% if variations %}
				<h2 class="SectionTitle">Variants</h2>
			{% endif %}
			{% for variation in variations %}
				<div class="Component">
					<div class="Component-head">
						<a href="{{ variation.url }}" class="Component-file">{{ variation.variation }}</a>
						<div class="Component-headMeta">
							<div class="DeveloperInformation">
								{% if variation.mockValidation %}
									<button class="Component-mockValidation js-openMockData" aria-controls="{{ variation.normalizedVariation }}">
										<span class="Status Status--{% if variation.mockValidation.valid %}valid{% else %}invalid{% endif %}">{% if variation.mockValidation.valid %}Valid{% else %}Invalid{% endif %} mock data</span>
									</button>
								{% else %}
									<button class="Component-mockValidation js-openMockData" aria-controls="{{ variation.normalizedVariation }}">
										Mock data
									</button>
								{% endif %}
							</div>
							<a class="Iframe-newTabLink" href="{{ variation.standaloneUrl }}" target="_blank" rel="noopener">
								Open
							</a>
						</div>
						<dialog class="Component-mockData" id="{{ variation.normalizedVariation }}">
							<div class="Component-mockDataInner">
								<p class="Component-mockDataHeading"><b>{{ variation.variation }}</b> mock data</p>
								<accordion-tabs breakpoint="24rem">
									<details>
										<summary>Raw</summary>
										<div id="json-tree-{{ loop.index }}" data-jsontree-js="jsontree_{{ variation.normalizedVariation|replace({ '-': '_' }) }}.raw"></div>
									</details>
									<details>
										<summary>Resolved</summary>
										<div id="json-tree-resolved-{{ loop.index }}" data-jsontree-js="jsontree_{{ variation.normalizedVariation|replace({ '-': '_' }) }}.resolved"></div>
									</details>
								</accordion-tabs>
								<form method="dialog">
									<button class="Component-closeMockData">Close</button>
								</form>
							</div>
						</dialog>
					</div>
					<div class="Component-iframeWrapper" id="{{ variation.normalizedVariation }}-iframe">
						<iframe class="Component-iframe" src="{{ variation.standaloneUrl }}" frameborder="0" title="{{ variation.variation }}" id="iframe" loading="lazy"></iframe>
					</div>
				</div>
				<script>
					const jsontree_{{ variation.normalizedVariation|replace({ '-': '_' }) }} = {
						"raw": {
							"data": {{ variation.mockData|default({})|raw }}
						},
						"resolved": {
							"data": {{ variation.mockDataResolved|default({})|replace({'</script>': '<\\/script>'})|raw }}
						}
					};
				</script>
			{% endfor %}
		</main>
		<script src="{{ projectName }}/js/jsontree.js"></script>
		<script>
			const eventMethod = window.addEventListener
				? "addEventListener"
				: "attachEvent";
			const eventer = window[eventMethod];
			const messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
			const windowHeight = window.innerHeight;

			eventer(
				messageEvent,
				function (e) {
					const el = document.getElementById(e.data.id);

					if (el && e.data.height < windowHeight) {
						el.classList.add("has-fixedHeight");
						el.style.height = `${e.data.height}px`;
					}
				},
				false
			);
		</script>
		<script>
			const jsontree = {
				"schema": {
					"data": {{ schema|default({})|raw }}
				},
				"mocks": {
					"data": {{ mocks|default({})|replace({'</script>': '<\\/script>'})|raw }}
				},
				"data": {
					"data": {{ dataJson|default({})|replace({'</script>': '<\\/script>'})|raw }}
				}
			};
		</script>
	{% endblock %}