{% extends "base.html" %}

{% block content %}
  <div class="d-flex flex-column gap-3">
    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
      {% include "partials/repo_heading.html" %}
      {% set repo_tab = "files" %}
      {% set repo_tab_label = "Forks" %}
      {% include "partials/repo_tabs.html" %}
    </div>

    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <span class="fw-semibold">Forks</span>
        <span class="text-muted small">{{ forks | length }} shown</span>
      </div>
      <div class="card-body">
        {% if forks | length == 0 %}
          <p class="text-muted mb-0">No forks yet.</p>
        {% else %}
          <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
              <thead>
                <tr>
                  <th scope="col">Repository</th>
                  <th scope="col">Owner</th>
                  <th scope="col">Status</th>
                  <th scope="col" class="text-end">Created</th>
                </tr>
              </thead>
              <tbody>
                {% for fork in forks %}
                  <tr>
                    <td>
                      <div>
                        <a class="text-decoration-none" href="{{ fork.repo_path }}">{{ fork.repo_name }}</a>
                      </div>
                      <div class="text-muted small font-monospace">{{ fork.owner_slug }}/{{ fork.repo_slug }}</div>
                    </td>
                    <td>
                      <a class="text-decoration-none" href="{{ fork.owner_path }}">{{ fork.owner_name }}</a>
                    </td>
                    <td>
                      {% if fork.status == "completed" %}
                        <span class="badge text-bg-success">Completed</span>
                      {% elif fork.status == "failed" %}
                        <span class="badge text-bg-danger">Failed</span>
                      {% else %}
                        <span class="badge text-bg-secondary">Pending</span>
                      {% endif %}
                    </td>
                    <td class="text-end text-muted small" title="{{ fork.created_at }}">{{ fork.created_at | humantime }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
{% endblock %}