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

  <script>
    $(document).ready(function () {
      // Highlight the anchor line in file views
      var hash = $(location).attr('hash');
      $(hash).closest('span').addClass('hll');
      // Refresh the highlighted line when clicking on a new line in file views
      $('a').click(function () {
        $("span.hll").removeClass('hll');
        var hash = $(this).attr('href');
        $(hash).closest('span').addClass('hll');
      });
    });
  </script>

{% endblock %}
