<h3>{{fileInfo.file | getFileName}}</h3>
{% if fileInfo.file | isDirectory(fileInfo.repoName, fileInfo.branchName) %}
<ul class="list-group">
{% set dirs = fileInfo.repoName | getDirectoryContents(fileInfo.branchName, fileInfo.file) | topLevelFilesOnly(fileInfo.file + '/') %}
{% for dir in dirs %}
  <li class="list-group-item">
    {% if dir.isDirectory %}
    <i class="bi bi-folder-fill"></i>
    {% else %}
    <i class="bi bi-file-earmark"></i>
    {% endif %}
    <a href="{{reposPath}}/{{fileInfo.repoName | slugify}}/branches/{{fileInfo.branchName | slugify}}/files/{{dir.fullPath | slugify}}.html">{{fileInfo.file | getRelativePath(dir.name)}}</a>
  </li>
{% endfor %}
</ul>
{% else %}
<div class="row py-2">
  <div class="col-auto">
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="showLastTouch">
      <label class="form-check-label" for="showLastTouch">Show last line change</label>
    </div>
  </div>
  <div class="col">
    <a href="{{reposPath}}/{{fileInfo.repoName | slugify}}/branches/{{fileInfo.branchName | slugify}}/raw/{{fileInfo.file | slugify}}">View raw file</a>
  </div>
</div>
<div class="row">
  <div class="col-auto border-end">
    {% set fileContents = fileInfo.repoName | getFileContents(fileInfo.branchName, fileInfo.file) %}
    <code style="white-space: pre;"><pre class="language-text">
{%- for lineNumber in fileContents | lineNumbers -%}
{{ lineNumber }}
{% endfor -%}</pre></code>
  </div>
  <div id="annotations" class="col-auto d-none">
    {% set annotations = fileInfo.repoName | getFileLastTouchInfo(fileInfo.branchName, fileInfo.file) %}
    <code style="white-space: pre;"><pre class="language-text">
{%- for annotation in annotations -%}
<a href="{{reposPath}}/{{fileInfo.repoName | slugify}}/branches/{{fileInfo.branchName | slugify}}/patches/{{annotation.sha}}">{{ (annotation.sha | truncate(6, true, '')) }}</a> {{ annotation.author }}
{% endfor -%}
    </pre></code>
  </div>
  <div class="col overflow-scroll">
    <code>
{{- fileContents | highlightCode((fileInfo.file | languageExtension(fileInfo.repoName))) | safe }}
    </code>
  </div>
</div>
{% endif %}

<script type="text/javascript">
  const toggleLastTouch = (event) => {
    const isOn = event.target.checked
    const annotations = document.getElementById("annotations")
    if (isOn) {
      annotations.classList.remove("d-none")
    } else {
      annotations.classList.add("d-none")
    }
  }

  document.getElementById("showLastTouch")?.addEventListener('click', toggleLastTouch)
</script>