{% extends "base.html" %}
{% load pygments_highlights %}
{% load truncatepath %}

{% block title %}| File #{{ file.id }}: {{ file.path | truncatepath:75 }}{% endblock title %}
{% block body %}

<div>
  {% include "partials/playbook_card.html" with playbook=file.playbook %}
</div>
<br/>
<div>
  <div class="card">
    <div class="card-header bg-body-tertiary">
      <h4>File: {{ file.path }}</h4>
    </div>
    <div class="card-body">
      {{ file.content | format_yaml | safe }}
    </div>
  </div>
</div>

<!-- Line highlighting -->
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    if(window.location.hash.length) {
      // Recover the line number in the URL anchor and highlight it
      var anchor = window.location.hash;
      var span = document.querySelector(anchor);
      span.classList.add("hll");
    }

    document.addEventListener("click", function(e) {
      // When a link is clicked
      if(e.target.tagName == "A") {
        // Remove the previously highlighted line if there is one
        if(window.location.hash.length) {
          var anchor = window.location.hash;
          var span = document.querySelector(anchor);
          span.classList.remove("hll")
        }

        // Highlight the new one
        var anchor = e.target.getAttribute("href");
        var span = document.querySelector(anchor);
        span.classList.add("hll");
      }
    });
  });
</script>

{% endblock body %}