{% 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>

<!-- Repositories Table -->
<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-success">
      <tr>
        <th>
          <a href="?sort=name&order={{ 'desc' if sort_by == 'name' and sort_order == 'asc' else 'asc' }}&page={{ pagination.current_page }}" class="text-dark text-decoration-none">
            Repository Name
            {% if sort_by == 'name' %}
              <i class="fas fa-sort-{{ 'up' if sort_order == 'asc' else 'down' }} text-primary"></i>
            {% else %}
              <i class="fas fa-sort text-muted"></i>
            {% endif %}
          </a>
        </th>
        <th>
          <a href="?sort=distribution&order={{ 'desc' if sort_by == 'distribution' and sort_order == 'asc' else 'asc' }}&page={{ pagination.current_page }}" class="text-dark text-decoration-none">
            Distribution
            {% if sort_by == 'distribution' %}
              <i class="fas fa-sort-{{ 'up' if sort_order == 'asc' else 'down' }} text-primary"></i>
            {% else %}
              <i class="fas fa-sort text-muted"></i>
            {% endif %}
          </a>
        </th>
        <th>Comment</th>
        <th>
          <a href="?sort=created&order={{ 'desc' if sort_by == 'created' and sort_order == 'asc' else 'asc' }}&page={{ pagination.current_page }}" class="text-dark text-decoration-none">
            Created
            {% if sort_by == 'created' %}
              <i class="fas fa-sort-{{ 'up' if sort_order == 'asc' else 'down' }} text-primary"></i>
            {% else %}
              <i class="fas fa-sort text-muted"></i>
            {% endif %}
          </a>
        </th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for repo in repos %}
      <tr>
        <td><strong>{{ repo.name }}</strong></td>
        <td><span class="badge bg-success">{{ repo.distribution }}</span></td>
        <td>{{ repo.comment or '-' }}</td>
        <td>{{ repo.created[:10] if repo.created else '-' }}</td>
        <td>
          <a href="{{ url_for('show_repo', name=repo.name) }}" class="btn btn-sm btn-outline-success">
            <i class="fas fa-box-open"></i> View Packages
          </a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- Pagination -->
{% if pagination.total_pages > 1 %}
<nav aria-label="Repository pagination" class="my-4">
  <ul class="pagination justify-content-center">
    {% if pagination.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?sort={{ sort_by }}&order={{ sort_order }}&page={{ pagination.previous_page }}">
          <i class="fas fa-chevron-left"></i> Previous
        </a>
      </li>
    {% endif %}
    
    {% for page_num in range(1, pagination.total_pages + 1) %}
      {% if page_num == pagination.current_page %}
        <li class="page-item active">
          <span class="page-link">{{ page_num }}</span>
        </li>
      {% elif page_num <= 3 or page_num > pagination.total_pages - 3 or (page_num >= pagination.current_page - 1 and page_num <= pagination.current_page + 1) %}
        <li class="page-item">
          <a class="page-link" href="?sort={{ sort_by }}&order={{ sort_order }}&page={{ page_num }}">{{ page_num }}</a>
        </li>
      {% elif page_num == 4 or page_num == pagination.total_pages - 3 %}
        <li class="page-item disabled">
          <span class="page-link">...</span>
        </li>
      {% endif %}
    {% endfor %}
    
    {% if pagination.has_next %}
      <li class="page-item">
        <a class="page-link" href="?sort={{ sort_by }}&order={{ sort_order }}&page={{ pagination.next_page }}">
          Next <i class="fas fa-chevron-right"></i>
        </a>
      </li>
    {% endif %}
  </ul>
  
  <div class="text-center text-muted">
    Showing {{ ((pagination.current_page - 1) * 10) + 1 }} to {{ pagination.current_page * 10 if pagination.current_page * 10 <= pagination.total_items else pagination.total_items }} of {{ pagination.total_items }} repositories
  </div>
</nav>
{% endif %}

{% if not repos %}
<div class="text-center py-5">
  <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
  <h4 class="text-muted">No repositories found</h4>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
window.onload = function() {
  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>
.table th a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table th a:hover {
  color: #198754 !important;
}
.fas.fa-sort {
  opacity: 0.5;
}
.table-hover tbody tr:hover {
  background-color: rgba(25,135,84,0.1);
}
.bg-light {
  background-color: #f8f9fa !important;
}
</style>
{% endblock %}