{% extends "base.html" %}
{% block title %}Backups - /etc/hosts Manager{% endblock %}
{% block extra_css %}
  {{ super() }}
  <style>
    .tooltip-inner {
      max-width: 300px;
      text-align: left;
    }
  </style>
{% endblock %}
{% block content %}
<div class="card mb-4">
  <div class="card-header">
    <h2>Backups</h2>
  </div>
  <div class="card-body">
    <a href="{{ url_for('backup_all') }}" class="btn btn-primary mb-3">Wykonaj kopie wszystkich serwerów</a>
    <table class="table table-striped">
      <thead>
        <tr>
          <th><input type="checkbox" id="select-all"></th>
          <th>Data utworzenia</th>
          <th>Opis</th>
          <th>Akcje</th>
        </tr>
      </thead>
      <tbody>
        {% for backup in backups %}
        <tr>
          <td>
            <!-- Każdy checkbox jest przypisany do formularza bulkDeleteForm -->
            <input type="checkbox" name="selected_backups" value="{{ backup.id }}" form="bulkDeleteForm">
          </td>
          <td>{{ backup.created_at.strftime("%Y-%m-%d %H:%M:%S") }}</td>
          <td>{{ backup.description }}</td>
          <td>
            <a href="{{ url_for('view_backup', backup_id=backup.id) }}" class="btn btn-sm btn-info">Podgląd</a>
            <a href="{{ url_for('restore_backup', backup_id=backup.id) }}" class="btn btn-sm btn-success">Przywróć</a>
            <!-- Usuwanie pojedynczego backupu -->
            <form action="{{ url_for('delete_backup', backup_id=backup.id) }}" method="post" style="display:inline;">
              <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Czy na pewno usunąć backup?');">Usuń</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    <!-- Formularz do bulk usuwania – checkboxy znajdują się poza tym formularzem, ale dzięki atrybutowi form są z nim powiązane -->
    <form id="bulkDeleteForm" action="{{ url_for('delete_selected_backups') }}" method="post">
      <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Czy na pewno usunąć zaznaczone backupy?');">Usuń zaznaczone</button>
    </form>
  </div>
</div>
{% endblock %}
{% block extra_js %}
  {{ super() }}
  <script>
    // Skrypt do zaznaczania/odznaczania wszystkich checkboxów
    document.getElementById('select-all').addEventListener('change', function(){
      var checkboxes = document.querySelectorAll('input[name="selected_backups"]');
      checkboxes.forEach(function(checkbox) {
        checkbox.checked = document.getElementById('select-all').checked;
      });
    });
  </script>
{% endblock %}