{% extends "base.html" %}
{% block content %}
<div class="container my-4">
  <div class="card border-0 shadow">
    <div class="card-header bg-light">
      <h4 class="mb-0">
        Podgląd eksportu: {{ backup.file_path|basename }}
      </h4>
    </div>
    <div class="card-body">
      <textarea id="exportEditor" readonly>{{ content|e }}</textarea>
      <div class="mt-3">
        <a href="{{ next_url }}" class="btn btn-secondary">Powrót</a>
      </div>
    </div>
  </div>
</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
    });
    editor.setSize("100%", "600px");
  });
</script>
{% endblock %}