{% raw %}
<script type="text/html" id="template">
  <div class="panel panel-default">
    <!-- Title -->
    <div class="panel-heading">
      <img class="github-avatar img-rounded" src="{{= it.avatar }}">
      <a href="{{= it.url }}"><strong>{{= it.user }}</strong></a>
      <span>commented on {{= it.date }}</span>
    </div>
    <!-- Content -->
    <div class="panel-body">{{= it.content }}</div>
  </div>
</script>
{% endraw %}

<h2>Comments</h2>
<div id="comments">
  <noscript>
    <div class="alert alert-warning" role="alert">
      <span>Activate JavaScript to display comments</span>
    </div>
  </noscript>

  <!-- Script loading comments -->
  <script defer type="text/javascript">
    window.addEventListener("load", function () {
      Github.getComments(
        "{{ site.repos | strip_newlines | strip_html | strip | normalize_whitespace | slugify | xml_escape }}",
        "{{ page.issue | strip_newlines | strip_html | strip | normalize_whitespace | xml_escape | round }}",
        function (error, comments) {
          if (error) { throw new Error(error); }
          comments.forEach(function (comment) {
            Github.addComment("#comments", comment);
          });
        });
    });
  </script>
</div>