{% extends "base.html" %}

{% block content %}
  <div class="d-flex flex-column gap-3">
    {% include "repo/explorer_header.html" %}
    {% 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 shadow-sm">
      <div class="card-header d-flex flex-column flex-xl-row align-items-xl-center justify-content-between gap-3">
        <div class="pearing-min-w-0">
          <div class="fw-semibold font-monospace text-break">{{ file_name }}</div>
          <div class="text-muted small font-monospace text-break">{{ file_path }}</div>
        </div>
        <div class="d-flex flex-wrap align-items-end gap-2">
          {% if text and not too_large %}
            <div>
              <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>
              <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>
              <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>
          {% endif %}
          {% if raw_url %}<a class="btn btn-sm btn-outline-secondary" href="{{ raw_url }}">Raw</a>{% endif %}
          {% if download_url %}<a class="btn btn-sm btn-outline-secondary" href="{{ download_url }}">Download</a>{% endif %}
          <a class="btn btn-sm btn-outline-secondary" href="{{ history_url }}">History</a>
          <button class="btn btn-sm btn-outline-secondary pearing-copy-path" type="button" data-copy-text="{{ file_path }}">Copy path</button>
        </div>
      </div>
      <div class="card-body">
        {% with nav_class = "mb-3 pearing-breadcrumb-case", list_class = "breadcrumb mb-0" %}
          {% include "partials/breadcrumbs.html" %}
        {% endwith %}

        <div class="d-flex flex-wrap gap-3 text-muted small mb-3">
          <span>{{ size }}</span>
          <span>mode {{ mode }}</span>
          <span>object <span class="font-monospace" title="{{ oid }}">{{ oid_short }}</span></span>
          {% if language %}<span>{{ language }}</span>{% endif %}
        </div>

        {% if submodule %}
          <div class="alert alert-secondary mb-0">
            This entry is a Git submodule pinned to commit <span class="font-monospace">{{ oid }}</span>.
            {% if submodule_url %}<a class="alert-link ms-1" href="{{ submodule_url }}" rel="noopener noreferrer">Open repository</a>{% endif %}
          </div>
        {% elif image %}
          <figure class="mb-0 text-center">
            <img class="img-fluid rounded border pearing-explorer-image" src="{{ raw_url }}" alt="Preview of {{ file_name }}" width="{{ image.width }}" height="{{ image.height }}">
            <figcaption class="text-muted small mt-2">{{ image.content_type }} · {{ image.width }} × {{ image.height }}</figcaption>
          </figure>
        {% elif text and too_large %}
          <div class="alert alert-secondary mb-0">
            This text file exceeds the viewer limit of 1 MiB or 20,000 lines. Use Raw or Download to inspect it.
          </div>
        {% elif 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.html | safe }}</span></td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <div class="alert alert-secondary mb-0">
            This binary file is not rendered inline. Use Download to inspect it safely.
          </div>
        {% endif %}
      </div>
    </div>
  </div>
{% endblock %}