{% extends "base.html" %}
{% block content %}
<div class="container my-4">
  <h2 class="text-center mb-4">Porównanie backupów (Diff)</h2>
  <div class="card shadow-sm">
    <div class="card-body">
      <form action="{{ url_for('diff_selector') }}" method="POST" id="diffForm">
        <div class="row mb-3">
          <div class="col-md-6">
            <label for="backup1" class="form-label">Wybierz pierwszy backup:</label>
            <select class="form-select" id="backup1" name="backup1" required>
              <option value="" disabled selected>-- Wybierz backup --</option>
              {% for backup in backups %}
                <option value="{{ backup.id }}">
                  {{ backup.file_path|basename }} ({{ backup.created_at.strftime("%Y-%m-%d %H:%M:%S") }})
                </option>
              {% endfor %}
            </select>
          </div>
          <div class="col-md-6">
            <label for="backup2" class="form-label">Wybierz drugi backup:</label>
            <select class="form-select" id="backup2" name="backup2" required>
              <option value="" disabled selected>-- Wybierz backup --</option>
              {% for backup in backups %}
                <option value="{{ backup.id }}">
                  {{ backup.file_path|basename }} ({{ backup.created_at.strftime("%Y-%m-%d %H:%M:%S") }})
                </option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="text-center">
          <button type="submit" class="btn btn-primary btn-lg">Porównaj backupy</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
document.getElementById("diffForm").addEventListener("submit", function(event) {
    var backup1 = document.getElementById("backup1").value;
    var backup2 = document.getElementById("backup2").value;
    if(backup1 === backup2) {
        event.preventDefault();
        alert("Wybierz dwa różne backupy do porównania.");
    }
});
</script>
{% endblock %}