{% 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" %}
      <div class="d-flex flex-column flex-md-row align-items-md-center gap-2">
        <div class="text-muted">
          Compare:
          <span class="fw-semibold font-monospace">{{ source_ref }}</span>
          …
          <span class="fw-semibold font-monospace">{{ target_ref }}</span>
        </div>
        {% if pull_create_message %}
          <span class="text-muted small">{{ pull_create_message }}</span>
        {% elif current_user %}
          <a class="btn btn-sm btn-primary" href="{{ create_pull_path }}">Create pull</a>
        {% endif %}
        {% set repo_tab = "files" %}
        {% set repo_tab_label = "Compare" %}
        {% include "partials/repo_tabs.html" %}
      </div>
    </div>

    {% include "partials/repo_clone_url.html" %}

    <div class="card shadow-sm">
      <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
        <div class="fw-semibold">Commits</div>
        <div class="text-muted small">
          {{ source_ref }}…{{ target_ref }}
        </div>
      </div>
      <div class="card-body">
        <form class="row g-2 align-items-end mb-3" method="get" action="{{ compare_path }}" id="repo-compare-filters"></form>
        {% if page.results | length == 0 %}
          <p class="text-muted mb-0">No commits between these refs.</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>Commit</th>
                  <th>Author</th>
                  <th class="d-none d-md-table-cell">Date</th>
                </tr>
              </thead>
              <tbody>
                {% for commit in page.results %}
                  <tr>
                    <td>
                      <div class="fw-semibold">
                        <a class="link-body-emphasis text-decoration-none" href="{{ repo_path }}/commit/{{ commit.id }}">
                          {{ commit.message }}
                        </a>
                      </div>
                      <div class="small text-muted font-monospace">
                        <a class="link-secondary text-decoration-none" href="{{ repo_path }}/commit/{{ commit.id }}">
                          {{ commit.short_id }}
                        </a>
                      </div>
                    </td>
                    <td>{{ commit.author }}</td>
                    <td class="d-none d-md-table-cell" title="{{ commit.committed_at }}">{{ commit.committed_at | humantime }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
      </div>
      {% with page=page, query=query, per_page_id="repo-compare-per-page", per_page_form="repo-compare-filters" %}
        {% include "partials/paging_footer.html" %}
      {% endwith %}
    </div>

    <div class="d-flex flex-column gap-2">
      {% if diffs | length == 0 %}
        <p class="text-muted mb-0">No file changes to show.</p>
      {% else %}
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
          <div>
            <div class="fw-semibold">Changes</div>
            <div class="text-muted small">
              {{ files_changed }} files changed, {{ insertions }} insertions(+), {{ deletions }} deletions(-)
            </div>
          </div>
          <button class="btn btn-sm btn-outline-secondary" type="button" id="commit-diff-toggle-all">Expand all</button>
        </div>
        <div class="d-flex flex-column gap-2" id="commit-diffs">
          {% for diff in diffs %}
            {% set diff_index = loop.index %}
            <div class="card">
              <div class="card-header py-2 pearing-diff-card-header" id="commit-diff-{{ loop.index }}">
                <button
                  class="btn btn-link w-100 text-start p-0 text-decoration-none link-body-emphasis pearing-diff-toggle{% if not loop.first %} collapsed{% endif %}"
                  type="button"
                  data-diff-toggle="true"
                  data-diff-index="{{ diff_index }}"
                  data-diff-target="#commit-diff-body-{{ loop.index }}"
                  aria-expanded="{% if loop.first %}true{% else %}false{% endif %}"
                  aria-controls="commit-diff-body-{{ loop.index }}"
                >
                  <span class="fw-semibold pearing-diff-title-selectable">{{ diff.path }}</span>
                </button>
              </div>
              <div
                id="commit-diff-body-{{ loop.index }}"
                class="pearing-diff-panel{% if not loop.first %} d-none{% endif %}"
                data-diff-index="{{ diff_index }}"
              >
                <div
                  id="commit-diff-content-{{ diff_index }}"
                  class="px-0"
                  data-diff-content="true"
                  data-diff-index="{{ diff_index }}"
                  data-diff-loaded="{% if loop.first or diff.binary %}true{% else %}false{% endif %}"
                  {% if not loop.first and not diff.binary %}
                    data-diff-lazy-url="{{ compare_diff_path }}&index={{ diff_index }}"
                  {% endif %}
                >
                  {% if loop.first or diff.binary %}
                    {% include "repo/commit_diff_body.html" %}
                  {% else %}
                    <div class="px-3 py-2 text-muted small">Diff loads on expand.</div>
                  {% endif %}
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}