{% extends "@miyagi/layouts/iframe_default.twig.miyagi" %}
  {% block body %}
    <div class="Wrapper">
      <div id="Component" class="ComponentView">
        <iframe src="{{ standaloneUrl }}" frameborder="0" class="ComponentView-iframe" title="Variation" id="iframe"></iframe>
      </div>
    </div>
    <div class="Component">
      <div class="Component-variationHeader">
				<div class="DeveloperInformation">
					{% if mockValidation %}
						<button class="Component-mockValidation js-openMockData" aria-controls="{{ normalizedVariation }}">
							<span class="Status Status--{% if mockValidation.valid %}valid{% else %}invalid{% endif %}">{% if mockValidation.valid %}Valid{% else %}Invalid{% endif %} mock data</span>
						</button>
					{% else %}
						<button class="Component-mockValidation js-openMockData" aria-controls="{{ normalizedVariation }}">
							Mock data
						</button>
					{% endif %}
				</div>
        <a class="Iframe-newTabLink" href="{{ standaloneUrl }}" target="_blank" rel="noopener">
          Open
        </a>
      </div>
			<dialog class="Component-mockData" id="{{ normalizedVariation }}">
				<div class="Component-mockDataInner">
					<p class="Component-mockDataHeading"><b>{{ variation }}</b> mock data</p>
					<accordion-tabs breakpoint="24rem">
						<details>
							<summary>Raw</summary>
							<div id="json-tree-mock" data-jsontree-js="jsontree_{{ normalizedVariation|replace({ '-': '_' }) }}.raw"></div>
						</details>
						<details>
							<summary>Resolved</summary>
							<div id="json-tree-resolved-mockResolved" data-jsontree-js="jsontree_{{ normalizedVariation|replace({ '-': '_' }) }}.resolved"></div>
						</details>
					</accordion-tabs>
					<form method="dialog">
						<button class="Component-closeMockData">Close</button>
					</form>
				</div>
			</dialog>
    </div>
		<script src="{{ projectName }}/js/jsontree.js"></script>
		<script>
			const jsontree_{{ normalizedVariation|replace({ '-': '_' }) }} = {
				"raw": {
					"data": {{ mockData|default({})|raw }}
				},
				"resolved": {
					"data": {{ mockDataResolved|default({})|replace({'</script>': '<\\/script>'})|raw }}
				}
			};
		</script>
  {% endblock %}