routeros_update/templates/routeros_changelog_tabs.html

{% 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>
      <a href="{{ url_for('force_fetch_changelogs') }}"
         class="btn btn-danger btn-sm"
         onclick="return confirm('Czy na pewno chcesz ręcznie pobrać wszystkie changelogi? Operacja usunie wszystkie stare wpisy.');">
        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>
{% endblock %}