{% extends "base.html" %}
{% block title %}Podgląd Backupu - /etc/hosts Manager{% endblock %}
{% block extra_css %}
  {{ super() }}
  <!-- Link do arkusza Highlight.js z identyfikatorem do dynamicznej zmiany -->
  <link id="hljs-style" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
  <style>
    /* Dodatkowy styl dla karty podglądu backupu */
    .card-backup {
      margin-top: 20px;
    }
    .card-backup pre {
      max-height: 500px;
      overflow-y: auto;
    }
  </style>
{% endblock %}
{% block content %}
<div class="card card-backup shadow-sm">
  <div class="card-header">
    <h2 class="mb-0">Podgląd Backupu</h2>
  </div>
  <div class="card-body">
    <p><strong>Data:</strong> {{ backup.created_at.strftime("%Y-%m-%d %H:%M:%S") }}</p>
    <p><strong>Opis:</strong> {{ backup.description }}</p>
    <pre><code class="plaintext">{{ backup.content | e }}</code></pre>
    <a href="{{ url_for('backups') }}" class="btn btn-secondary mt-3">Powrót do listy backupów</a>
  </div>
</div>
{% endblock %}
{% block extra_js %}
  {{ super() }}
  <!-- Highlight.js JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  <script>
    // Inicjalizacja podświetlania
    hljs.highlightAll();
    
    // Funkcja aktualizująca motyw podświetlania w zależności od motywu aplikacji
    function updateHighlightTheme() {
      var hljsStyle = document.getElementById('hljs-style');
      if (document.documentElement.getAttribute('data-bs-theme') === 'dark') {
        hljsStyle.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css';
      } else {
        hljsStyle.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css';
      }
    }
    
    // Aktualizacja przy starcie
    updateHighlightTheme();
    
    // Aktualizacja przy zmianie trybu (zakładamy, że w base.html mamy przełącznik trybu)
    const darkModeToggle = document.getElementById('darkModeToggle');
    if (darkModeToggle) {
      darkModeToggle.addEventListener('change', function() {
        // Mały delay, aby zmiana motywu została zastosowana
        setTimeout(updateHighlightTheme, 100);
      });
    }
  </script>
{% endblock %}