{% extends "base.html" %}

{% block head %}
  {{ super() }}
  <!-- DataTables CSS -->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
{% endblock %}

{% block content %}
<div class="container my-4">
  <h2 class="text-center mb-4">Historia logów operacji</h2>
  
  <!-- Karta z usuwaniem logów -->
  <div class="card mb-4 shadow-sm border-0">
    <div class="card-body">
      <form action="{{ url_for('delete_old_logs') }}" method="POST" class="row g-2 align-items-center">
        <div class="col-auto">
          <label for="delete_days" class="col-form-label">Usuń logi starsze niż (dni):</label>
        </div>
        <div class="col-auto">
          <input type="number" class="form-control" id="delete_days" name="delete_days" min="1" placeholder="Liczba dni" required>
        </div>
        <div class="col-auto">
          <button type="submit" class="btn btn-danger">Usuń logi</button>
        </div>
      </form>
    </div>
  </div>
  
  <!-- Tabela logów -->
  <div class="card shadow-sm border-0 mb-4">
    <div class="card-body">
      <table id="logsTable" class="table table-striped table-bordered">
        <thead class="table-dark">
          <tr>
            <th>Data</th>
            <th>Wiadomość</th>
          </tr>
        </thead>
        <tbody>
          {% for log in logs %}
          <tr>
            <td>{{ log.timestamp.strftime("%Y-%m-%d %H:%M:%S") }}</td>
            <td>{{ log.message }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  
  <div class="text-center mt-3">
    <a href="{{ url_for('dashboard') }}" class="btn btn-outline-primary">Powrót do Dashboardu</a>
  </div>
</div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- DataTables JS -->
  <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#logsTable').DataTable({
        responsive: true,
        order: [[0, 'desc']],
        language: {
          url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/pl.json'
        }
      });
    });
  </script>
{% endblock %}