{% block top %}
<script>
  function getNumbers() {
    fetch("/numbers")
      .then((response) => response.json())
      .then((data) => {
        const wrapper = document.getElementById("default");
        wrapper.innerHTML = ""; // Clear existing content
        const lines = 24;
        const columns = 9;
        let index = 0;

        for (let i = 0; i < columns; i++) {
          const columnDiv = document.createElement("div");
          columnDiv.className = "data-column";

          for (let j = 0; j < lines; j++) {
            if (index < data.length) {
              const rowDiv = document.createElement("div");
              rowDiv.className = `dc-row-${j + 1}`;
              rowDiv.textContent = data[index];
              columnDiv.appendChild(rowDiv);
              index++;
            }
          }
          wrapper.appendChild(columnDiv);
        }
      })
      .catch((error) => console.error("Error fetching numbers:", error));
  }
  document.addEventListener("DOMContentLoaded", getNumbers);
</script>
<div class="data-cascade-button-group">
  <div class="data-cascade-wrapper" id="default"></div>
  {% include "_nav.html" %}
</div>
<div class="bar-panel first-bar-panel">
  <div class="bar-1"></div>
  <div class="bar-2"></div>
  <div class="bar-3"></div>
  <div class="bar-4"></div>
  <div class="bar-5"></div>
</div>
{% endblock %}