{% extends "base.html" %}
{% block title %}Changelog RouterOS{% endblock %}
{% block extra_head %}
  <!-- Dodajemy Prism.js – globalny arkusz stylów będzie zmieniany przez base.html -->
  <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>

    pre {
      background-color: #282c34;
      color: #abb2bf;
      font-size: 1.1rem;
      line-height: 1.5;
      padding: 1rem;
      border-radius: 0 0 5px 5px;
      overflow-x: auto;
      margin: 0;
    }
  </style>
{% endblock %}
{% block content %}
<div class="container py-4">
  <!-- Nagłówek z tytułem i przyciskami akcji (przyciski aktualizacji są tutaj, globalny dark mode toggle już w navbarze) -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Changelog RouterOS</h2>
    <a href="{{ url_for('force_fetch_changelogs') }}" 
       class="btn btn-danger" 
       onclick="return confirm('Czy na pewno chcesz ręcznie pobrać wszystkie changelogi? Operacja usunie wszystkie stare wpisy.');">
      Aktualizuj changelogi
    </a>
  </div>
  
  <!-- Nawigacja po kanałach -->
  <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 po seriach wersji -->
  <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 wpisu changeloga -->
  {% if selected_entry %}
    <div class="mb-3">
      <h4 class="changelog-header">
        {{ selected_entry.version | format_version }} 
        <small>({{ selected_entry.timestamp.strftime('%Y-%b-%d') }})</small>
      </h4>
      <pre><code class="language-plaintext">{{ selected_entry.details }}</code></pre>
    </div>
  {% else %}
    <p>Brak wpisów dla wybranych ustawień.</p>
  {% endif %}
  
  <!-- Formularz wyboru innego wpisu -->
  {% 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ż changelog</button>
      </div>
    </form>
  {% endif %}
  
  <div class="mt-4">
    <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Powrót do dashboardu</a>
  </div>
</div>
{% endblock %}