{{#extend "iframe_default"}}
  {{#content "body"}}
    <div class="MiyagiWrapper">
      <div class="MiyagiContent">
        <div class="MiyagiDocumentation">
          <h1>{{ name }}</h1>
          {{#if documentation}}
            {{{documentation}}}
          {{/if}}
        </div>
        {{#if renderInformation}}
          <h2 class="Miyagi-sectionTitle">Information</h2>
          <dl class="MiyagiInformation">
            <div class="MiyagiInformation-wrapper">
              <dt class="MiyagiInformation-attr">Folder</dt>
              <dd class="MiyagiInformation-val"><code>{{ folder }}</code></dd>
            </div>
          </dl>
        {{/if}}
        {{#if renderFileTabs}}
          <h2 class="Miyagi-sectionTitle">Files</h2>
          <div class="MiyagiTabs">
            {{#if schema}}
              <details class="MiyagiTabs-tab">
                <summary>Schema</summary>
                <pre class="Miyagi-code language-{{schema.type}}"><span class="token comment">// {{schema.file}}</span>

<code>{{schema.string}}</code></pre>
              </details>
            {{/if}}
            {{#if mocks}}
              <details class="MiyagiTabs-tab">
                <summary>Mocks</summary>
                <pre class="Miyagi-code language-{{mocks.type}}"><span class="token comment">// {{mocks.file}}</span>

<code>{{mocks.string}}</code></pre>
              </details>
            {{/if}}
            {{#if template}}
              <details class="MiyagiTabs-tab">
                <summary>Template</summary>
                <pre class="Miyagi-code language-{{template.type}}"><span class="token comment">// {{template.file}}</span>

<code>{{template.string}}</code></pre>
              </details>
            {{/if}}
          </div>
          {{#if schemaError}}
            <p class="MiyagiErrorMessage">{{schemaError}}</p>
          {{/if}}
        {{/if}}
        {{#if variations}}
          <h2 class="Miyagi-sectionTitle">Variants</h2>
        {{/if}}
      </div>
      {{#each variations}}
        <div class="MiyagiComponent">
          <div class="MiyagiContent">
            <div class="MiyagiComponent-head">
              <a href="{{ this.url }}" class="MiyagiComponent-file">{{this.variation}}</a>
              <div class="MiyagiComponent-headMeta">
                {{#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}}
                <a class="MiyagiIframe-newTabLink" href="{{standaloneUrl}}" target="_blank" rel="noopener">
                  Open
                </a>
              </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>
          </div>
          {{#if ../renderInIframe}}
            <div class="MiyagiComponent-iframeWrapper" id="{{this.normalizedVariation}}-iframe">
              <iframe class="MiyagiComponent-iframe" src="{{this.standaloneUrl}}" frameborder="0" title="{{this.variation}}" id="iframe"></iframe>
            </div>
          {{else}}
            <div class="MiyagiComponent-html" dir="{{../componentTextDirection}}" lang="{{../componentLanguage}}">
              {{{html}}}
              {{#if error}}
                <p class="MiyagiError">{{error}}</p>
              {{/if}}
            </div>
          {{/if}}
        </div>
      {{/each}}
    </div>
    {{#if renderInIframe}}
      <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>
    {{else}}
      {{{jsFilesBody}}}
      {{#if theme.css}}
        <script>
          {{{theme.js}}}
        </script>
      {{/if}}
    {{/if}}
  {{/content}}
  {{#content "componentAssets"}}
    {{#unless renderInIframe}}
      {{#if assets.css}}
      <link href="{{ assets.css }}" rel="stylesheet">
      {{/if}}
      {{#if assets.js}}
        <script src="{{ assets.js }}"></script>
      {{/if}}
      {{#if theme.css}}
        <style>
          {{{theme.css}}}
        </style>
      {{/if}}
    {{/unless}}
  {{/content}}
{{/extend}}