{% extends "base.html" %}
{% block title %}Repositories{% endblock %}

{% block content %}
<header class="text-center my-4">
  <h1>Aptly Repositories</h1>
  <p>Explore and manage your package distributions</p>
</header>

<div id="notification" class="success" style="display:none;">Logged in successfully!</div>

<!-- Repos container -->
<div id="repoContainer" class="d-flex flex-wrap gap-3 justify-content-center">
  {% for dist, repos in dist_repos.items() %}
    {% for repo in repos %}
      <div class="card repo-card shadow-sm" data-dist="{{ dist }}">
        <div class="card-body text-center p-3">
          <h6 class="card-title text-primary">{{ repo.Name }}</h6>
          <p class="card-text text-muted mb-0">Distribution: {{ dist }}</p>
          <a href="{{ url_for('show_repo', name=repo.Name) }}" class="btn btn-sm btn-outline-success mt-2">View Packages</a>
        </div>
      </div>
    {% endfor %}
  {% endfor %}
</div>

<!-- Pagination -->
<nav aria-label="Page navigation" class="my-4">
  <ul class="pagination justify-content-center" id="pagination"></ul>
</nav>
{% endblock %}

{% block scripts %}
<script>
const reposPerPage = 10;
let currentPage = 1;

function setupPagination() {
  const container = document.getElementById("repoContainer");
  const cards = Array.from(container.querySelectorAll(".repo-card"));
  const pagination = document.getElementById("pagination");

  const pageCount = Math.ceil(cards.length / reposPerPage);
  if(pageCount <= 1){ pagination.innerHTML=""; showPage(cards); return; }

  pagination.innerHTML = "";
  for(let i=1; i<=pageCount; i++){
    const li = document.createElement("li");
    li.className = "page-item" + (i===currentPage ? " active" : "");
    li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
    li.addEventListener("click", (e)=>{
      e.preventDefault();
      currentPage = i;
      showPage(cards);
      setupPagination();
    });
    pagination.appendChild(li);
  }
  showPage(cards);
}

function showPage(cards) {
  cards.forEach((card, index)=>{
    const start = (currentPage-1)*reposPerPage;
    card.style.display = (index >= start && index < start + reposPerPage) ? "block" : "none";
  });
}

window.onload = function() {
  setupPagination();
  const params = new URLSearchParams(window.location.search);
  const message = params.get("message");
  const msg_type = params.get("msg_type") || "success";
  if(message) {
    const notif = document.getElementById("notification");
    notif.innerText = message;
    notif.className = msg_type;
    notif.style.display = "block";
    setTimeout(() => { notif.style.display = "none"; }, 3000);
  }
}
</script>

<style>
.repo-card {
  width: 200px;
  min-width: 180px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.repo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
</style>
{% endblock %}