<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<style>
.hljs{display:block;overflow-x:auto;padding:.5em;color:#abb2bf;background:#2f2f2f}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

.hljs{font-family:Monaco,Menlo,Consolas,"Droid Sans Mono","Inconsolata","Courier New",monospace;border-radius:5px;padding:1em;font-size:14px}.hljs *::selection{background:rgba(255,255,255,0.1);}.hljs-tag{color:unset!important}

.hljs{max-height:400px}


.uc-code .t396__artboard .t396__elem {
  position: static;
}
.uc-code :is(.t396__carrier, .t396__filter) {
  height: 0 !important;
}
.uc-code .t396__artboard {
  height: auto !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
}


.uc-code .copy-btn {
  margin-bottom: 10px;
  user-select: none;
}
.uc-code .copy-btn .tn-atom { cursor: pointer; }
.uc-code .copy-btn.copied .tn-atom {
  background-color: green !important;
  cursor: default;
  pointer-events: none;
}
</style>

<script>
const fallbackCopyToClipboard = (text) => {
  const textArea = document.createElement('textarea');
  textArea.value = text;

  textArea.style.top = '0';
  textArea.style.left = '0';
  textArea.style.position = 'fixed';

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  document.execCommand('copy');
  document.body.removeChild(textArea);
}

const copyToClipboard = async (text) => {
  if (!navigator.clipboard) {
    fallbackCopyToClipboard(text);
    return;
  }

  try {
    await navigator.clipboard.writeText(text);
  } catch(e) {
    fallbackCopyToClipboard(text);
  }
}

const hookArtboard = (artboard) => {
  const $codeText = $(".copy-txt .tn-atom", artboard);
  const codeText = $codeText[0].innerText.trim();

  const $pre = $('<pre></pre>').append(
    $('<code class="language-html"></code>')
      .text( codeText )
  );

  $codeText.replaceWith($pre);

  $container = $("<div></div>")
    .appendTo(artboard)
    .append(
      $(".copy-txt, .copy-btn", artboard)
    );

  hljs.highlightAll();



  const $copyButton = $(".copy-btn", artboard);

  const $copyButtonText = $(".tn-atom", $copyButton);
  const originalText = $copyButtonText.text();

  $copyButton.click(() => {
    copyToClipboard( codeText );

    $copyButtonText.text("Скопировано");
    $copyButton.addClass("copied");
    setTimeout( () => {
      $copyButtonText.text(originalText);
      $copyButton.removeClass("copied");
    }, 3000 );
  })
}

$(() => {
  $(".uc-code .t396__artboard").each((_, artboard) => {
    if(artboard.classList.contains("rendered"))
      hookArtboard(artboard);
    else
      $(artboard).on("artBoardRendered", () => hookArtboard(artboard))
  })

})

</script>