{% extends "base.html" %}
{% block title %}View: {{ path }} — {{ slug }}{% endblock %}
{% block content %}

<p class="muted" style="margin-bottom: 0.5rem;">
  <a href="/projects/{{ slug }}" style="color:var(--navy);">&larr; {{ slug }}</a>
  &nbsp;/&nbsp;
  <span style="color:var(--text);">{{ path }}</span>
</p>

<div class="source-viewer">
  <table>
    <tbody>
      {% for i in range(num_lines) %}
      <tr class="source-line{% if highlight and i + 1 == highlight %} source-highlight{% endif %}"{% if highlight and i + 1 == highlight %} id="highlight"{% endif %}>
        <td class="line-num">{{ i + 1 }}</td>
        <td class="line-code"><pre>{{ lines[i] }}</pre></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if highlight %}
<script>
  document.getElementById('highlight')?.scrollIntoView({ block: 'center' });
</script>
{% endif %}

{% endblock %}