<h1>Blob diff {{ path_new }}</h1>
<p>Project: <a href="/{{ project }}">{{ project }}</a> · <a href="{{ blob_link }}">blob</a></p>
<div id="d2h-container" data-diff-b64="{{ diff_b64 }}" data-has-diff="{{ 'true' if diff_b64 else 'false' }}">
  <div id="d2h-output"></div>
  <p id="d2h-empty" class="text-muted" style="display: none;">No changes between these blobs.</p>
</div>
<script>
(function () {
  var container = document.getElementById('d2h-container');
  var output = document.getElementById('d2h-output');
  var emptyEl = document.getElementById('d2h-empty');
  var diffB64 = container.getAttribute('data-diff-b64');
  var hasDiff = container.getAttribute('data-has-diff') === 'true';

  function render() {
    if (!hasDiff || !diffB64) {
      emptyEl.style.display = 'block';
      return;
    }
    try {
      var raw = atob(diffB64);
      if (!raw) {
        emptyEl.style.display = 'block';
        return;
      }
      var diffStr = (typeof TextDecoder !== 'undefined')
        ? new TextDecoder('utf-8').decode(Uint8Array.from(raw, function (c) { return c.charCodeAt(0); }))
        : raw;
      if (typeof Diff2HtmlUI === 'undefined') {
        output.innerHTML = '<p class="text-warning">Diff2HtmlUI not loaded.</p>';
        return;
      }
      var config = {
        drawFileList: true,
        matching: 'lines',
        outputFormat: 'side-by-side',
        synchronisedScroll: true,
        highlight: true
      };
      var diff2htmlUi = new Diff2HtmlUI(output, diffStr, config);
      diff2htmlUi.draw();
      diff2htmlUi.highlightCode();
    } catch (e) {
      output.innerHTML = '<p class="text-danger">Failed to render diff: ' + (e.message || e) + '</p>';
    }
  }

  var script = document.getElementById('diff2html-script');
  if (script && (typeof Diff2HtmlUI !== 'undefined')) {
    render();
  } else if (script) {
    script.addEventListener('load', render);
  } else {
    render();
  }
})();
</script>