<script type="text/javascript">
  const resizeIframe = () => {
    const combinedPadding = 16;
    const previewIframe = document.getElementById("previewIframe");
    const previewIFrameCard = document.getElementById("previewIFrameCard");
    const templateInPreviewContainer = previewIframe.contentWindow.document.querySelector('.np-certificate-container');
    const previewIframeContentHeight = templateInPreviewContainer.offsetHeight;
    const previewIframeContentWidth = templateInPreviewContainer.offsetWidth;
    const certificateRatio = previewIframeContentHeight / previewIframeContentWidth;

    templateInPreviewContainer.style.margin = 0;
    previewIFrameCard.style.height = `${previewIFrameCard.offsetWidth * certificateRatio}px`;

    const scaledIframeWidth = previewIFrameCard.offsetWidth - combinedPadding;
    const scaledIframeHeight = scaledIframeWidth * certificateRatio;
    const scale = scaledIframeHeight / previewIframeContentHeight;

    previewIframe.style.transform = `scale(${scale})`;
  }

  window.onresize = resizeIframe;
</script>

<div class="col-xs-12 col-md-8 np-certificate-iframe-container">
  <div class="np-card spacing-clear">
    <div id="previewIFrameCard" class="np-card-container np-certificate-card">
      <iframe
        id="previewIframe"
        onload="resizeIframe()"
        class="np-certificate-iframe-preview fs-exclude"
        srcdoc="{{ certificate.certificate_template_html }}"
      ></iframe>
    </div>
  </div>
</div>
