{% 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">
      <div>
        <h1 class="h3 mb-0">
          {% if owner_path is startingwith('/teams/') %}
            <a class="link-primary" href="{{ owner_path }}">{{ owner_slug }}</a>
          {% else %}
            {% with user_link_href = owner_path, user_link_username = owner_slug, user_link_label = owner_slug, user_link_class = "link-primary" %}
              {% include "partials/hover_card_user_link.html" %}
            {% endwith %}
          {% endif %}
          /
          <a class="link-primary" href="{{ repo_path }}">{{ repo.slug }}</a>
        </h1>
      </div>
      <div class="d-flex flex-column flex-md-row align-items-md-center gap-2">
        <div class="text-muted">
          Branch: <span class="fw-semibold">{{ branch_label }}</span>
        </div>
        {% set repo_tab = "files" %}
        {% set repo_tab_label = "Files" %}
        {% set repo_view_files_href = breadcrumbs[0].href %}
        {% include "partials/repo_tabs.html" %}
      </div>
    </div>

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

    {% with related_threads=linked_threads, related_threads_label="Referenced in threads" %}
      {% include "repo/partials/related_threads.html" %}
    {% endwith %}

    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <div>
          <div class="fw-semibold">{{ file_name }}</div>
          <div class="text-muted small">{{ file_path }}</div>
        </div>
        <div class="text-end text-muted small d-flex flex-column align-items-end gap-2">
          {% if text %}
            <div class="d-flex flex-wrap justify-content-end align-items-end gap-3">
              <div class="text-start">
                <label class="form-label small mb-1" for="file-wrap-select">Display</label>
                <select class="form-select form-select-sm" id="file-wrap-select" aria-label="Display">
                  <option value="scroll" selected>Scroll</option>
                  <option value="wrap">Wrap</option>
                </select>
              </div>
              <div class="text-start">
                <label class="form-label small mb-1" for="file-whitespace-select">Spaces</label>
                <select class="form-select form-select-sm" id="file-whitespace-select" aria-label="Spaces">
                  <option value="normal" selected>Normal</option>
                  <option value="show">Show</option>
                </select>
              </div>
              <div class="text-start">
                <label class="form-label small mb-1" for="file-font-size-select">Font size</label>
                <select class="form-select form-select-sm" id="file-font-size-select" aria-label="Font size">
                  <option value="normal" selected>Normal</option>
                  <option value="small">Small</option>
                  <option value="large">Large</option>
                </select>
              </div>
              <div class="align-self-end">
                <a class="btn btn-sm btn-outline-secondary" href="{{ raw_url }}">Raw</a>
              </div>
            </div>
          {% endif %}
          <div>
            <div>{{ size }}</div>
            <div>
              {{ mode }} ·
              <a class="font-monospace link-secondary" href="{{ repo_path }}/commit/{{ commit_id }}">
                {{ commit_short }}
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        {% set nav_class = "mb-3 pearing-breadcrumb-case" %}
        {% set list_class = "breadcrumb mb-0" %}
        {% include "partials/breadcrumbs.html" %}

        {% if text %}
          <div class="border rounded bg-light overflow-auto pearing-code-block">
            <table class="table table-sm table-borderless mb-0 font-monospace">
              <tbody>
                {% for line in lines %}
                  <tr data-row-index="{{ line.number }}">
                    <td class="text-muted text-end small px-2 pearing-line-number-cell">
                      <a class="text-muted text-decoration-none pearing-line-number" id="L{{ line.number }}" href="#L{{ line.number }}">{{ line.label }}</a>
                    </td>
                    <td class="px-2 pearing-code-line" data-row-index="{{ line.number }}"><span class="pearing-code-line-content">{{ line.text }}</span></td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <p class="text-muted mb-0">This file appears to be binary, so it is not rendered.</p>
          <div class="mt-2 text-muted small">Object: <span class="font-monospace">{{ oid }}</span></div>
        {% endif %}
      </div>
    </div>
  </div>
{% endblock %}