{% extends "base.html" %}

{% block content %}
  {% include "partials/flash.html" %}
  <div class="row g-4">
    <div class="col-12 col-lg-4">
      <div class="card shadow-sm h-100">
        <div class="card-body d-flex flex-column gap-3">
          <div>
            <div class="text-uppercase text-muted small fw-semibold">Public Profile</div>
            <div class="fw-semibold fs-5">{{ owner.name | display_name(owner.username) }}</div>
            <div class="text-muted">
              {% with user_link_href = owner_path, user_link_username = owner.username, user_link_label = owner.username, user_link_class = "link-secondary" %}
                {% include "partials/hover_card_user_link.html" %}
              {% endwith %}
            </div>
          </div>
          {% if owner.activity %}
            <div>
              <div class="text-uppercase text-muted small fw-semibold">Current activity</div>
              <div>{{ owner.activity }}</div>
              {% if owner.activity_updated_at %}
                <div class="small text-muted" title="{{ owner.activity_updated_at }}">Updated {{ owner.activity_updated_at | humantime }}</div>
              {% endif %}
            </div>
          {% elif owner.activity_updated_at %}
            <div>
              <div class="text-uppercase text-muted small fw-semibold">Current activity</div>
              <div class="text-muted">No current activity</div>
              <div class="small text-muted" title="{{ owner.activity_updated_at }}">Cleared {{ owner.activity_updated_at | humantime }}</div>
            </div>
          {% endif %}
          <p class="text-muted mb-0">
            Welcome to {{ owner.username }}'s public profile. Browse their public repositories
            and recent updates below.
          </p>
          {% include "user/ping_card.html" %}
          <div class="border-top pt-3">
            <a class="btn btn-outline-secondary btn-sm w-100" href="{{ owner_path }}/history">View History</a>
          </div>
          <div class="border-top pt-3">
            <div class="text-muted small">Showing {{ page.results | length }} public repositories.</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-8">
      <div class="card shadow-sm">
        <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
          <div>
            <div class="text-uppercase text-muted small fw-semibold">Repositories</div>
            <div class="fw-semibold">Public repositories</div>
          </div>
          <div class="text-muted small">
            Updated and maintained by
            {% with user_link_href = owner_path, user_link_username = owner.username, user_link_label = owner.username, user_link_class = "link-secondary" %}
              {% include "partials/hover_card_user_link.html" %}
            {% endwith %}
          </div>
        </div>
        <div class="card-body">
          <form class="row g-2 align-items-end mb-3" method="get" action="{{ owner_path }}" id="user-repo-filters"></form>
          {% if page.results | length == 0 %}
            <p class="text-muted mb-0">No repositories yet.</p>
          {% else %}
            <div class="table-responsive">
              <table class="table table-hover align-middle table-sm mb-0">
                <thead class="table-light">
                  <tr class="text-uppercase small text-muted">
                    <th>Repository</th>
                    <th>Visibility</th>
                    <th class="d-none d-md-table-cell">Created</th>
                  </tr>
                </thead>
                <tbody>
                  {% for repo in page.results %}
                    <tr>
                      <td>
                        <a class="link-body-emphasis text-decoration-none fw-semibold" href="{{ owner_path }}/{{ repo.slug }}">
                          {{ repo.name }}
                        </a>
                        <div class="small text-muted font-monospace">{{ repo.slug }}</div>
                        {% if repo.description %}
                          <div class="small text-muted">{{ repo.description }}</div>
                        {% endif %}
                      </td>
                      <td>
                        {% if repo.visibility == "public" %}
                          <span class="badge text-bg-primary">Public</span>
                        {% else %}
                          <span class="badge text-bg-secondary">Private</span>
                        {% endif %}
                      </td>
                      <td class="d-none d-md-table-cell" title="{{ repo.created_at }}">{{ repo.created_at | humantime }}</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% endif %}
        </div>
        {% with page=page, query=query, per_page_id="user-repo-per-page", per_page_form="user-repo-filters" %}
          {% include "partials/paging_footer.html" %}
        {% endwith %}
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    PearingScripts.initAutoSubmitFilters("user-repo-filters", {
      includeFormAttribute: true
    });
  </script>
{% endblock %}