{% extends "pages/base.html" %}
{% load i18n %}

{% block title %}{% translate "Repo Tracker" %}{% endblock %}

{% block extra_head %}
  {{ block.super }}
  <meta http-equiv="refresh" content="{{ refresh_seconds }}">
  <style>
    .repo-tracker-shell {
      display: grid;
      gap: 1rem;
    }
    .repo-tracker-summary {
      color: var(--bs-secondary-color);
    }
    .repo-tracker-list {
      display: grid;
      gap: 0.75rem;
    }
    .repo-tracker-list a,
    .repo-tracker-row a {
      text-decoration: none;
    }
    .repo-tracker-list a:hover,
    .repo-tracker-row a:hover {
      text-decoration: underline;
    }
    .repo-tracker-table {
      display: grid;
      gap: 0.5rem;
    }
    .repo-tracker-header,
    .repo-tracker-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0.75rem;
    }
    @media (min-width: 900px) {
      .repo-tracker-header,
      .repo-tracker-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }
    }
    .repo-tracker-header {
      color: var(--bs-secondary-color);
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.75rem;
    }
    .repo-tracker-cell {
      border: 1px solid var(--bs-border-color);
      border-radius: 0.375rem;
      padding: 0.75rem;
      min-height: 4rem;
      background: var(--bs-body-bg);
    }
    .repo-tracker-empty {
      color: var(--bs-secondary-color);
    }
    .repo-tracker-meta,
    .repo-tracker-labels {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.4rem;
      color: var(--bs-secondary-color);
      font-size: 0.875rem;
    }
    .repo-tracker-label {
      border: 1px solid var(--bs-border-color);
      border-radius: 0.25rem;
      padding: 0.1rem 0.35rem;
      color: var(--bs-body-color);
    }
  </style>
{% endblock %}

{% block content %}
<main class="repo-tracker-shell py-4">
  <div>
    <h1 class="h2 mb-1">{% translate "Repo Tracker" %}</h1>
    {% if selected_repository %}
      <p class="repo-tracker-summary mb-0">
        {% blocktranslate trimmed with repository=selected_repository.slug issues=issue_count pulls=pull_request_count seconds=refresh_seconds %}
          {{ repository }} has {{ issues }} open issues and {{ pulls }} open pull requests. This view refreshes every {{ seconds }} seconds.
        {% endblocktranslate %}
      </p>
    {% else %}
      <p class="repo-tracker-summary mb-0">{% translate "Choose a configured repository." %}</p>
    {% endif %}
  </div>

  {% if show_repository_list %}
    <div class="repo-tracker-list">
      {% for repository in repositories %}
        <a class="border rounded p-3 d-flex justify-content-between gap-3" href="?{% if request.GET.kiosk %}kiosk={{ request.GET.kiosk|urlencode }}&amp;{% endif %}repository={{ repository.pk }}">
          <span>
            <strong>{{ repository.slug }}</strong>
            {% if repository.description %}<span class="d-block text-secondary">{{ repository.description }}</span>{% endif %}
          </span>
          {% if repository.html_url %}
            <span class="text-secondary">{{ repository.default_branch|default:"main" }}</span>
          {% endif %}
        </a>
      {% endfor %}
    </div>
  {% elif selected_repository %}
    {% if repositories|length > 1 %}
      <nav>
        <a href="{% url 'repos:repo-tracker' %}{% if request.GET.kiosk %}?kiosk={{ request.GET.kiosk|urlencode }}{% endif %}">{% translate "All repositories" %}</a>
      </nav>
    {% endif %}
    <section class="repo-tracker-table" aria-label="{% translate 'Open repository work' %}">
      <div class="repo-tracker-header" aria-hidden="true">
        <div>{% translate "Open issues" %}</div>
        <div>{% translate "Open pull requests" %}</div>
      </div>
      {% for row in tracker_rows %}
        <div class="repo-tracker-row">
          <div class="repo-tracker-cell">
            {% if row.issue %}
              {% if row.issue.html_url %}
                <a href="{{ row.issue.html_url }}" target="_blank" rel="noopener noreferrer">#{{ row.issue.number }} {{ row.issue.title }}</a>
              {% else %}
                <strong>#{{ row.issue.number }} {{ row.issue.title }}</strong>
              {% endif %}
              <div class="repo-tracker-meta">
                <span>{{ row.issue.state }}</span>
                {% if row.issue.author %}<span>@{{ row.issue.author }}</span>{% endif %}
              </div>
              {% if row.issue.labels %}
                <div class="repo-tracker-labels">
                  {% for label in row.issue.labels %}
                    <span class="repo-tracker-label">{{ label }}</span>
                  {% endfor %}
                </div>
              {% endif %}
            {% else %}
              <span class="repo-tracker-empty">{% translate "No aligned issue" %}</span>
            {% endif %}
          </div>
          <div class="repo-tracker-cell">
            {% if row.pull_request %}
              {% if row.pull_request.html_url %}
                <a href="{{ row.pull_request.html_url }}" target="_blank" rel="noopener noreferrer">#{{ row.pull_request.number }} {{ row.pull_request.title }}</a>
              {% else %}
                <strong>#{{ row.pull_request.number }} {{ row.pull_request.title }}</strong>
              {% endif %}
              <div class="repo-tracker-meta">
                <span>{{ row.pull_request.state }}</span>
                {% if row.pull_request.author %}<span>@{{ row.pull_request.author }}</span>{% endif %}
                {% if row.pull_request.is_draft %}<span>{% translate "Draft" %}</span>{% endif %}
              </div>
              {% if row.pull_request.labels %}
                <div class="repo-tracker-labels">
                  {% for label in row.pull_request.labels %}
                    <span class="repo-tracker-label">{{ label }}</span>
                  {% endfor %}
                </div>
              {% endif %}
            {% else %}
              <span class="repo-tracker-empty">{% translate "No aligned pull request" %}</span>
            {% endif %}
          </div>
        </div>
      {% empty %}
        <div class="border rounded p-4 text-secondary">
          {% translate "No open issues or pull requests are stored for this repository." %}
        </div>
      {% endfor %}
    </section>
  {% else %}
    <div class="border rounded p-4 text-secondary">
      {% translate "No GitHub repositories are configured." %}
    </div>
  {% endif %}
</main>
{% endblock %}