<!DOCTYPE html>
<html lang="pl" class="{% if session.dark_mode %}dark-mode{% endif %}">
<head>
  <meta charset="UTF-8" />
  <title>Backup RouterOS App</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">

  <style>
    .dark-mode body {
      background-color: #222;
      color: #ffffff;
    }
    .dark-mode a, .dark-mode a:hover {
      color: #ddd;
    }
    .dark-mode .navbar, .dark-mode .table {
      background-color: #333 !important;
      color: #fff;
    }
    .diff-add { color: green; }
    .diff-rem { color: red; }
  </style>

    <!-- Blok head umożliwiający dołączenie dodatkowych stylów -->
    {% block head %}{% endblock %}
</head>
<body>
  <nav class="navbar navbar-expand navbar-dark bg-dark mb-4">
    <div class="container-fluid">
      <a href="{{ url_for('index') }}" class="navbar-brand">Backup RouterOS</a>
      <div>
        {% if session.user_id %}
          <a href="{{ url_for('dashboard') }}" class="btn btn-secondary me-2">Dashboard</a>
          <a href="{{ url_for('routers_list') }}" class="btn btn-secondary me-2">Urządzenia</a>
          <a href="{{ url_for('diff_selector') }}" class="btn btn-secondary me-2">Diff selector</a>
          <a href="{{ url_for('all_files') }}" class="btn btn-secondary me-2">Wszystkie pliki</a>
          <a href="{{ url_for('logs_page') }}" class="btn btn-secondary me-2">Logi</a>

          <a href="{{ url_for('settings_view') }}" class="btn btn-secondary me-2">Ustawienia</a>
          <a href="{{ url_for('advanced_schedule') }}" class="btn btn-secondary me-2">Harmonogram</a> 

          <a href="{{ url_for('change_password') }}" class="btn btn-secondary me-2">Zmiana hasła</a>
          <a href="{{ url_for('logout') }}" class="btn btn-secondary me-2">Wyloguj</a>
        {% else %}
          <a href="{{ url_for('login') }}" class="btn btn-secondary me-2">Zaloguj</a>
          <a href="{{ url_for('register') }}" class="btn btn-secondary me-2">Utwórz konto</a>
        {% endif %}
         <!--<a href="{{ url_for('toggle_dark_mode') }}" class="btn btn-warning">Toggle Dark Mode</a>-->
      </div>
    </div>
  </nav>
  <div class="container">
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <div class="alert alert-info">
          {% for msg in messages %}
            <div>{{ msg }}</div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}

    {% block content %}{% endblock %}
  </div>


  <!-- Modal Test Połączenia -->
<div class="modal fade" id="testConnectionModal" tabindex="-1" aria-labelledby="testConnectionModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="testConnectionModalLabel">Test Połączenia</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body" id="testConnectionModalBody">
        <!-- Zawartość zostanie załadowana przez AJAX -->
      </div>
    </div>
  </div>
</div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    function ajaxExport(router_id) {
      fetch("/router/" + router_id + "/export", {
        method: "POST",
        headers: {"X-Requested-With": "XMLHttpRequest"}
      })
      .then(response => response.json())
      .then(data => {
        if(data.status === "success"){
          alert("Eksport wykonany: " + data.message);
          // Możesz też zaktualizować część strony dynamicznie
        } else {
          alert("Błąd eksportu: " + data.message);
        }
      })
      .catch(error => {
        console.error("Błąd AJAX:", error);
        alert("Wystąpił błąd.");
      });
    }
    </script>
    <script>
      function openTestConnectionModal(routerId) {
        fetch('/router/' + routerId + '/test_connection?modal=1')
          .then(response => response.text())
          .then(html => {
            document.getElementById('testConnectionModalBody').innerHTML = html;
            var myModal = new bootstrap.Modal(document.getElementById('testConnectionModal'));
            myModal.show();
          })
          .catch(error => {
            console.error("Błąd ładowania modalu: ", error);
            alert("Wystąpił błąd podczas ładowania danych.");
          });
      }
      </script>
  <!-- Blok scripts umożliwiający dołączenie dodatkowych skryptów -->
  {% block scripts %}{% endblock %}
</body>
</html>