{% extends "base.html" %}
{% block content %}
<div class="container my-4">
  <h2>Porównanie: {{ backup1.file_path|basename }} vs {{ backup2.file_path|basename }}</h2>
  <hr>
  <div id="diffContainer"></div>
  <a href="{{ url_for('router_details', router_id=backup1.router_id) }}" class="btn btn-secondary mt-3">Powrót</a>
</div>

<!-- Dodajemy diff2html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
<script src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
      // Upewnij się, że diff_text jest poprawnie escapowany
      var diffText = `{{ diff_text|e }}`;
      var targetElement = document.getElementById("diffContainer");
      var configuration = {
          drawFileList: true,
          matching: 'lines',
          outputFormat: 'line-by-line'
      };
      var diffHtml = Diff2Html.html(diffText, configuration);
      targetElement.innerHTML = diffHtml;
  });
</script>
{% endblock %}