{% extends "base.html" %}
{% block title %}{{ filepath }} — {{ project.name }} — Fossilrepo{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<style>
  .code-table { border-collapse: collapse; width: 100%; }
  .code-table td.line-num {
    width: 1%; white-space: nowrap; padding: 0 16px !important;
    text-align: right; user-select: none; cursor: pointer;
    color: #4b5563; font-size: 0.75rem; line-height: 1.5rem;
    border-right: 1px solid #374151; vertical-align: top;
  }
  .code-table td.line-num:hover { color: #DC394C; }
  .code-table td.line-num a { color: inherit; text-decoration: none; display: block; }
  .code-table td.line-code {
    white-space: pre; padding: 0 16px !important;
    font-size: 0.8125rem; line-height: 1.5rem; vertical-align: top;
  }
  .line-row:hover { background: rgba(220, 57, 76, 0.05); }
  .line-row:target { background: rgba(220, 57, 76, 0.12); }
  .line-row:target .line-num { color: #DC394C; font-weight: 600; }
  .line-row { scroll-margin-top: 40vh; }
  .line-popover {
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    margin-left: 4px; z-index: 20; white-space: nowrap;
    background: #1f2937; border: 1px solid #374151; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); padding: 2px;
    display: flex; gap: 2px;
  }
  .line-popover button {
    display: flex; align-items: center; gap: 4px; padding: 4px 8px;
    font-size: 0.7rem; color: #d1d5db; background: transparent;
    border: none; border-radius: 4px; cursor: pointer;
  }
  .line-popover button:hover { background: #374151; color: #fff; }
  .line-popover button.copied { color: #22c55e; }
</style>
{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-gray-100 mb-2">{{ project.name }}</h1>
{% include "fossil/_project_nav.html" %}

<div class="overflow-hidden rounded-lg bg-gray-800 shadow border border-gray-700">
  <!-- File path breadcrumb + stats -->
  <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
    <div class="flex items-center gap-1 text-sm font-mono">
      <a href="{% url 'fossil:code' slug=project.slug %}" class="text-brand-light hover:text-brand">{{ project.slug }}</a>
      {% for crumb in file_breadcrumbs %}
      <span class="text-gray-600">/</span>
      {% if forloop.last %}
      <span class="text-gray-200">{{ crumb.name }}</span>
      {% else %}
      <a href="{% url 'fossil:code_dir' slug=project.slug dirpath=crumb.path %}" class="text-brand-light hover:text-brand">{{ crumb.name }}</a>
      {% endif %}
      {% endfor %}
    </div>
    <div class="flex items-center gap-3">
      {% if can_render %}
      <div class="flex items-center gap-1 text-xs">
        <a href="?mode=source" class="px-2 py-1 rounded {% if view_mode == 'source' %}bg-brand text-white{% else %}text-gray-500 hover:text-white{% endif %}">Source</a>
        <a href="?mode=rendered" class="px-2 py-1 rounded {% if view_mode == 'rendered' %}bg-brand text-white{% else %}text-gray-500 hover:text-white{% endif %}">Rendered</a>
      </div>
      {% endif %}
      <a href="{% url 'fossil:code_blame' slug=project.slug filepath=filepath %}" class="px-2 py-1 text-xs text-gray-500 hover:text-brand-light rounded hover:bg-gray-700">Blame</a>
      <a href="{% url 'fossil:file_history' slug=project.slug filepath=filepath %}" class="px-2 py-1 text-xs text-gray-500 hover:text-brand-light rounded hover:bg-gray-700">History</a>
      <a href="{% url 'fossil:code_raw' slug=project.slug filepath=filepath %}" class="px-2 py-1 text-xs text-gray-500 hover:text-brand-light rounded hover:bg-gray-700">Raw</a>
      {% if not is_binary %}
      <span class="text-xs text-gray-500">{{ line_count }} line{{ line_count|pluralize }}</span>
      {% endif %}
    </div>
  </div>
  <div class="overflow-x-auto">
    {% if is_binary %}
    <p class="p-4 text-sm text-gray-500">{{ content }}</p>
    {% elif view_mode == "rendered" and rendered_html %}
    <div class="px-6 py-6">
      <div class="prose prose-invert prose-gray max-w-none">
        {{ rendered_html }}
      </div>
    </div>
    {% else %}
    <table class="code-table">
      <tbody>
        {% for line in lines %}
        <tr class="line-row" id="L{{ line.num }}">
          <td class="line-num" style="position:relative"
              x-data="{ pop: false, copied: false }"
              @click.stop="pop = !pop; window.location.hash = 'L{{ line.num }}'"
              @click.outside="pop = false">
            {{ line.num }}
            <div class="line-popover" x-show="pop" x-transition @click.stop>
              <button @click="navigator.clipboard.writeText(window.location.origin + window.location.pathname + '#L{{ line.num }}'); copied = true; setTimeout(() => { copied = false; pop = false }, 1000)" :class="copied && 'copied'">
                <span x-show="!copied">Copy link</span><span x-show="copied">Copied!</span>
              </button>
            </div>
          </td>
          <td class="line-code"><code class="language-{{ language }}">{{ line.text }}</code></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>
</div>

{% if not is_binary %}
<script>
  document.querySelectorAll('.line-code code').forEach(el => hljs.highlightElement(el));
</script>
{% endif %}
{% endblock %}