{% extends "base.html" %}

{% block content %}
  <div class="row g-4">
    <div class="col-12 col-lg-3">
      <div class="card shadow-sm">
        {% with staff_nav_active="repos" %}
          {% include "partials/staff_sidebar.html" %}
        {% endwith %}
      </div>
    </div>
    <div class="col-12 col-lg-9">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
          {% set breadcrumbs = [
            {"name": "Staff", "href": "/staff"},
            {"name": "Repos"}
          ] %}
          {% include "partials/breadcrumbs.html" %}
        </div>
      </div>
      <div class="card shadow-sm">
        <div class="card-body">
          {% include "partials/flash.html" %}
          <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <div class="text-uppercase text-muted small fw-semibold">Repos</div>
            <button class="btn btn-primary" type="button" disabled>Create repo</button>
          </div>
          <form class="row g-2 align-items-end mb-3" method="get" action="/staff/repos" id="repo-filters">
            <div class="col-12 col-lg-4">
              <label class="form-label" for="repo-search">Search</label>
              <input
                class="form-control"
                id="repo-search"
                name="search"
                type="text"
                value="{{ query.search | default('', true) }}"
                placeholder="Name, slug, or UUID"
              >
            </div>
            <div class="col-12 col-md-4 col-lg-2">
              <label class="form-label" for="repo-status">Status</label>
              <select class="form-select" id="repo-status" name="status">
                <option value="" {% if query.status is none %}selected{% endif %}>Any</option>
                <option value="active" {% if query.status == "active" %}selected{% endif %}>Active</option>
                <option value="archived" {% if query.status == "archived" %}selected{% endif %}>Archived</option>
                <option value="deleted" {% if query.status == "deleted" %}selected{% endif %}>Deleted</option>
              </select>
            </div>
            <div class="col-12 col-md-4 col-lg-2">
              <label class="form-label" for="repo-visibility">Visibility</label>
              <select class="form-select" id="repo-visibility" name="visibility">
                <option value="" {% if query.visibility is none %}selected{% endif %}>Any</option>
                <option value="public" {% if query.visibility == "public" %}selected{% endif %}>Public</option>
                <option value="private" {% if query.visibility == "private" %}selected{% endif %}>Private</option>
              </select>
            </div>
            {% with search_reset_url="/staff/repos", search_actions_col_class="col-12 col-md-4 col-lg-4" %}
              {% include "partials/search_actions.html" %}
            {% endwith %}
          </form>
          {% if page.results | length == 0 %}
            <p class="text-muted mb-0">No repos found.</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>Name</th>
                    <th>Visibility</th>
                    <th>Status</th>
                    {% set order_value = query.order | default('-created_at', true) %}
                    {% if order_value == "created_at" %}
                      {% set next_order = "-created_at" %}
                    {% else %}
                      {% set next_order = "created_at" %}
                    {% endif %}
                    <th class="d-none d-md-table-cell">
                      <a
                        class="link-secondary text-decoration-none"
                        href="{{ query_url('/staff/repos', {
                          'search': query.search | default('', true),
                          'status': query.status | default('', true),
                          'visibility': query.visibility | default('', true),
                          'order': next_order,
                          'per_page': query.per_page | default('', true)
                        }) }}"
                      >
                        Created
                        {% if order_value == "created_at" %}
                          ↑
                        {% elif order_value == "-created_at" %}
                          ↓
                        {% endif %}
                      </a>
                    </th>
                    <th class="text-muted">Team</th>
                  </tr>
                </thead>
                <tbody>
                  {% for repo in page.results %}
                    <tr>
                      <td>
                        <div class="fw-semibold">
                          <a class="link-body-emphasis text-decoration-none" href="/staff/repos/{{ repo.uuid }}">
                            {{ repo.name }}
                          </a>
                        </div>
                        <div class="small">
                          {% if repo.team_uuid %}
                            {% set team_slug = team_slugs[repo.team_uuid] %}
                            {% if team_slug is defined %}
                              <a href="/teams/{{ team_slug }}/{{ repo.slug }}">
                                {{ repo.slug }}
                              </a>
                            {% else %}
                              <span>{{ repo.slug }}</span>
                            {% endif %}
                          {% else %}
                            {% set owner_username = personal_owner_usernames[repo.uuid] %}
                            {% if owner_username is defined %}
                              <a href="/{{ owner_username }}/{{ repo.slug }}">
                                {{ repo.slug }}
                              </a>
                            {% else %}
                              <span>{{ repo.slug }}</span>
                            {% endif %}
                          {% endif %}
                        </div>
                      </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>
                        {% if repo.status == "active" %}
                          <span class="badge text-bg-success">Active</span>
                        {% elif repo.status == "archived" %}
                          <span class="badge text-bg-warning">Archived</span>
                        {% else %}
                          <span class="badge text-bg-danger">Deleted</span>
                        {% endif %}
                      </td>
                      <td class="d-none d-md-table-cell" title="{{ repo.created_at }}">{{ repo.created_at | humantime }}</td>
                      <td class="text-muted small">
                        {% if repo.team_uuid %}
                          <a class="link-success text-decoration-none" href="/staff/teams/{{ repo.team_uuid }}">{{ repo.team_name | default('', true) }}</a>
                        {% else %}
                          {% set owner = personal_owners[repo.created_by_id] %}
                          {% if owner is defined %}
                            <a class="link-body-emphasis text-decoration-none" href="/staff/users/{{ owner.uuid }}">
                              {{ owner.name | display_name(owner.username) }}
                            </a>
                            <span class="text-muted">(Personal)</span>
                          {% else %}
                            <span>Personal</span>
                          {% endif %}
                        {% endif %}
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% endif %}
        </div>
        {% with page=page, query=query, per_page_id="repo-per-page", per_page_form="repo-filters" %}
          {% include "partials/paging_footer.html" %}
        {% endwith %}
      </div>
    </div>
  </div>
{% endblock %}

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