{% extends "base.html" %}
{% block content %}
<div class="container my-4">
  <div class="card border-0 shadow-sm">
    <div class="card-header bg-light">
      <h4 class="mb-0">
        Porównanie: {{ backup1.file_path|basename }} vs {{ backup2.file_path|basename }}
      </h4>
    </div>
    <div class="card-body">
      <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>
  </div>
</div>

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

<script>
  document.addEventListener("DOMContentLoaded", function() {
    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;

    // Dark mode styl dla diff2html, jeśli potrzebne
    if(document.body.classList.contains('dark-mode')) {
      var darkStyle = document.createElement('style');
      darkStyle.textContent = `
        .d2h-wrapper { background-color: #1e1e1e; color: #fff; }
        .d2h-file-header { background-color: #2e2e2e; color: #fff; }
        .d2h-diff-table { background-color: #1e1e1e; color: #fff; }
        .d2h-code-line { background-color: #1e1e1e; color: #fff; }
        .d2h-code-line-ctn { color: #fff; }
      `;
      document.head.appendChild(darkStyle);
    }
  });
</script>
{% endblock %}