{{#extend "iframe_default"}}
  {{#content "body"}}
    <div class="MiyagiWrapper">
      <div id="MiyagiComponent" class="MiyagiComponentView">
        <iframe src="{{standaloneUrl}}" frameborder="0" class="MiyagiComponentView-iframe" title="Variation" id="iframe"></iframe>
      </div>
    </div>
    <script>
      window.validations = {
        html: {{htmlValidation}},
        accessibility: {{accessibilityValidation}},
      }
    </script>
    <div class="MiyagiContent MiyagiComponent">
      <div class="MiyagiComponent-variationHeader">
        {{#if mockValidation}}
          <button class="MiyagiComponent-mockValidation js-openMockData" aria-controls="{{this.normalizedVariation}}">
            <span class="MiyagiStatus MiyagiStatus--{{#if mockValidation.valid}}valid{{else}}invalid{{/if}}">{{#if mockValidation.valid}}Valid{{else}}Invalid{{/if}} mock data</span>
          </button>
        {{else}}
          <button class="MiyagiComponent-mockValidation js-openMockData" aria-controls="{{this.normalizedVariation}}">
            Mock data
          </button>
        {{/if}}
        {{#if standaloneUrl}}
        <a class="MiyagiIframe-newTabLink" href="{{standaloneUrl}}" target="_blank" rel="noopener">
          Open
        </a>
        {{/if}}
      </div>
      <div class="MiyagiComponent-mockData" hidden id="{{this.normalizedVariation}}">
        <div class="MiyagiComponent-mockDataInner">
          <p class="MiyagiComponent-mockDataHeading"><b>{{this.variation}}</b> mock data</p>
          <pre class="Miyagi-code language-{{mocks.type}}"><code>{{this.mockData}}</code></pre>
          <button class="MiyagiComponent-closeMockData js-closeMockData">Close</button>
        </div>
      </div>
    </div>
  {{/content}}
{{/extend}}