{% extends "base.html" %}
{% block title %}Logi - Aplikacja Updatera{% endblock %}

{% block extra_head %}
<!-- Styl Vanilla‑DataTables -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.css">

<style>
/* =======================================
   Dostosowanie do trybu ciemnego
   (jeśli w base.html używasz body.dark-mode)
======================================= */

/* Karta w trybie ciemnym */
body.dark-mode .card {
  background-color: #1e1e1e;
  color: #cccccc;
  border-color: #444;
}

/* Nagłówek karty w trybie ciemnym */
body.dark-mode .card .card-header.bg-light {
  background-color: #333 !important;
  border-bottom: 1px solid #444;
}

/* Tabela w trybie ciemnym
   - wyjaśnienie: thead.table-dark w trybie jasnym ma swoje domyślne kolory,
     więc w ciemnym je nadpisujemy, żeby był czytelny. */
body.dark-mode .table thead.table-dark {
  background-color: #2a2a2a !important;
  color: #ccc !important;
  border-color: #444 !important;
}
body.dark-mode .table-hover tbody tr:hover {
  background-color: #2f2f2f;
}

/* Obramowania w trybie ciemnym */
body.dark-mode .table.table-bordered > :not(caption) > * > * {
  border-color: #444 !important;
}

/* Tabela DataTables – drobne poprawki w trybie ciemnym */
body.dark-mode .dataTable-wrapper .dataTable-info,
body.dark-mode .dataTable-wrapper .dataTable-pagination,
body.dark-mode .dataTable-wrapper .dataTable-dropdown label,
body.dark-mode .dataTable-wrapper .dataTable-input {
  color: #ccc;
}

</style>
{% endblock %}

{% block content %}
<div class="container">
  
  <!-- Nagłówek strony -->
  <h2 class="mb-4">Logi</h2>

  <!-- Karta: Formularz kasowania logów -->
  <div class="card border-0 shadow mb-4">
    <div class="card-header bg-light">
      <h5 class="mb-0">Usuń logi starsze niż podana liczba dni</h5>
    </div>
    <div class="card-body">
      <form method="POST" action="{{ url_for('clean_logs') }}">
        <div class="mb-3">
          <label for="days" class="form-label">Liczba dni</label>
          <input type="number" class="form-control" name="days" id="days" placeholder="Podaj liczbę dni">
        </div>
        <button type="submit" class="btn btn-danger">Usuń logi</button>
      </form>
    </div>
  </div>

  <!-- Karta: Tabela logów -->
  <div class="card border-0 shadow">
    <div class="card-header bg-light">
      <h5 class="mb-0">Wszystkie logi systemu</h5>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-striped table-hover table-sm align-middle mb-0" id="logsTable">
          <thead class="table-dark">
            <tr>
              <th style="white-space: nowrap;">Data i czas</th>
              <th>Urządzenie</th>
              <th>Wiadomość</th>
            </tr>
          </thead>
          <tbody>
            {% for log in logs %}
            <tr>
              <td style="white-space: nowrap;">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
              <td>
                {% if log.device_id %}
                  <a href="{{ url_for('device_detail', device_id=log.device.id) }}">
                    {{ log.device.name if log.device.name else "Urządzenie #" ~ log.device.id }}
                  </a>
                {% else %}
                  <span class="text-muted">Ogólne</span>
                {% endif %}
              </td>
              <!-- Treść logu w <pre> z white-space: pre-wrap, żeby łamać długie linie -->
              <td><pre style="white-space: pre-wrap; margin:0;">{{ log.message }}</pre></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<!-- Vanilla‑DataTables -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.js"></script>
<script>
  // Inicjalizacja Vanilla‑DataTables dla tabeli logów
  const dataTable = new DataTable("#logsTable", {
    searchable: true,
    sortable: true,
    perPage: 10,
    labels: {
      placeholder: "Szukaj...",     // placeholder dla pola wyszukiwania
      perPage: "{select} wpisów na stronę", // tekst przy select
      noRows: "Brak logów.",        // gdy tabela jest pusta
      info: "Wyświetlono {start} - {end} z {rows} logów" // info paginacja
    }
  });
</script>
{% endblock %}