{% extends "base.html" %}
{% block content %}
<div class="container my-4">
  <h2>Podgląd eksportu: {{ backup.file_path|basename }}</h2>
  <hr>
  <textarea id="exportEditor" readonly>{{ content|e }}</textarea>
  <br>
  <a href="{{ next_url }}" class="btn btn-secondary">Powrót</a>
</div>

<!-- CodeMirror CSS -->
{% if session.get('dark_mode', True) %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/darcula.min.css">
{% else %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/neo.min.css">
{% endif %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">

<!-- CodeMirror JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/shell/shell.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var editor = CodeMirror.fromTextArea(document.getElementById("exportEditor"), {
      mode: "text/x-sh",
      theme: "{{ 'darcula' if session.get('dark_mode', True) else 'neo' }}",
      lineNumbers: true,
      readOnly: true
    });
    // Dopasowanie rozmiaru edytora do zawartości
    editor.setSize("100%", "588px");
  });
</script>
{% endblock %}