{% extends "base.html" %}
{% block title %}Changelog RouterOS{% endblock %}

{% block extra_head %}
<!-- PRISM.JS (temat okaidia lub dowolny inny) -->
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css"
      id="prism-style">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<style>
    /* 
      1) Mniejszy rozmiar fontu w bloczku <code>
      2) Łamanie linii, max-width, itp.
      3) Tło w jasnym/ciemnym trybie
    */

    /* Mniejszy rozmiar i ograniczenie linii */
    pre code[class*="language-"] {
      font-size: 0.85rem !important;   /* dopasuj do gustu, np. 0.9rem lub 0.8rem */
      line-height: 1.3 !important;
    }

    /* Łamanie linii i scroll w razie potrzeby */
    pre {
      white-space: pre-wrap;       
      word-break: break-word;      
      overflow-wrap: break-word;   
      max-width: 100%;
      overflow-x: auto;
      margin: 0;        
      padding: 1rem;
    }

    /* Tło w trybie jasnym */
    body.light-mode pre {
      background-color: #ffffff !important;
      color: #212529 !important;
    }
    /* Tło w trybie ciemnym */
    body.dark-mode pre {
      background-color: #2b2b2b !important;
      color: #e0e0e0 !important;
    }

    body.dark-mode .card {
      background-color: #1e1e1e !important;
      color: #ccc !important;
      border-color: #444 !important;
    }

    body.dark-mode .card-header {
      background-color: #333 !important;
      color: #fff !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">

  <!-- Karta z cieniowaniem, nagłówek i ciało -->
  <div class="card border-0 shadow">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h4 class="mb-0">Changelog RouterOS</h4>
        <!-- Przycisk do wywołania aktualizacji changelogów -->
        <a href="#" id="updateChangelog" class="btn btn-danger btn-sm">
          Aktualizuj changelogi
        </a>
    </div>
    <div class="card-body">

      <!-- Nawigacja kanałów (stable / rc / beta) -->
      <ul class="nav nav-tabs mb-3">
        <li class="nav-item">
          <a class="nav-link {% if channel=='stable' %}active{% endif %}"
             href="{{ url_for('routeros_changelog', channel='stable', series=series) }}">
            Stable
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link {% if channel=='rc' %}active{% endif %}"
             href="{{ url_for('routeros_changelog', channel='rc', series=series) }}">
            RC
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link {% if channel=='beta' %}active{% endif %}"
             href="{{ url_for('routeros_changelog', channel='beta', series=series) }}">
            Beta
          </a>
        </li>
      </ul>
      
      <!-- Nawigacja serii (7.x / 6.x) -->
      <ul class="nav nav-pills mb-3">
        <li class="nav-item">
          <a class="nav-link {% if series=='7.x' %}active{% endif %}"
             href="{{ url_for('routeros_changelog', channel=channel, series='7.x') }}">
            7.x
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link {% if series=='6.x' %}active{% endif %}"
             href="{{ url_for('routeros_changelog', channel=channel, series='6.x') }}">
            6.x
          </a>
        </li>
      </ul>

      <!-- Prezentacja wybranego changeloga -->
      {% if selected_entry %}
        <div class="mb-3">
          <h5 class="fw-bold">
            {{ selected_entry.version | format_version }} 
            <small class="text-muted">({{ selected_entry.timestamp.strftime('%Y-%b-%d') }})</small>
          </h5>
          <pre><code class="language-plaintext">{{ selected_entry.details }}</code></pre>
        </div>
      {% else %}
        <div class="alert alert-warning mb-3">
          Brak wpisów dla wybranych ustawień (kanał: {{ channel }}, seria: {{ series }}).
        </div>
      {% endif %}
      
      <!-- Wybór innej wersji, jeśli mamy >1 wpis -->
      {% if entries|length > 1 %}
      <form method="GET" action="{{ url_for('routeros_changelog') }}">
        <input type="hidden" name="channel" value="{{ channel }}">
        <input type="hidden" name="series" value="{{ series }}">
        
        <div class="input-group mb-3">
          <select name="version" class="form-select">
            {% for entry in entries %}
              <option value="{{ entry.version }}"
                      {% if selected_entry and entry.version == selected_entry.version %}selected{% endif %}>
                {{ entry.version | format_version }} ({{ entry.timestamp.strftime('%Y-%b-%d') }})
              </option>
            {% endfor %}
          </select>
          <button class="btn btn-primary" type="submit">Pokaż</button>
        </div>
      </form>
      {% endif %}
      
      <div class="mt-4">
        <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Powrót do dashboardu</a>
      </div>
      
    </div> <!-- /card-body -->
  </div> <!-- /card -->
</div>

<!-- Modal z progressem -->
<div class="modal fade" id="progressModal" tabindex="-1" role="dialog" aria-labelledby="progressModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="progressModalLabel">Pobieranie changelogów</h5>
      </div>
      <div class="modal-body">
        <div class="spinner-border" role="status">
          <span class="visually-hidden">Ładowanie...</span>
        </div>
        <p>Proszę czekać, trwa pobieranie changelogów...</p>
        <!-- Możesz dodać miejsce na logi, jeśli chcesz wyświetlać szczegóły postępu -->
        <div id="progressLog" style="max-height:200px; overflow-y:auto;"></div>
      </div>
    </div>
  </div>
</div>

<script>
  // Upewnij się, że Bootstrap JS jest załadowany (np. przez CDN)
  document.getElementById("updateChangelog").addEventListener("click", function(e) {
      e.preventDefault();
      // Pokaż modal
      var progressModalEl = document.getElementById("progressModal");
      var progressModal = new bootstrap.Modal(progressModalEl);
      progressModal.show();
      
      // Opcjonalnie wyczyść poprzednie logi
      document.getElementById("progressLog").innerHTML = "";
  
      // Wywołanie endpointu force_fetch_changelogs
      fetch("{{ url_for('force_fetch_changelogs') }}")
      .then(response => response.text())
      .then(data => {
          // Aktualizacja logu – możesz dodać otrzymane dane, jeśli są potrzebne
          document.getElementById("progressLog").innerHTML += "<p>Pobieranie zakończone.</p>";
          // Po krótkiej chwili zamknij modal i odśwież całą stronę
          setTimeout(() => {
              progressModal.hide();
              location.reload();
          }, 1000);
      })
      .catch(error => {
          document.getElementById("progressLog").innerHTML += "<p>Błąd: " + error + "</p>";
          setTimeout(() => {
              progressModal.hide();
          }, 2000);
      });
  });
  </script>
{% endblock %}