{% extends "blog/base.html" %}
{% load hitcount_tags %}

{% block content %}

{% get_hit_count_js_variables for post as hitcount %}
{% get_hit_count for post as total_hits %}

<div class="row">

  <div class="col-md-12">
    <h1>{{post.title}}</h1>
  </div>
  <div class="col-md-8">
    <p class="lead">{{ post.content }}</p>
  </div>

  <div class="col-md-4 bg-info">

    <h2>Hitcount Info</h2>

    <dl class="dl-horizontal">
      <dt>Total Hits:</dt>
      <dd>{{ total_hits }}</dd>
      <dt>Ajax URL is:</dt>
      <dd>{{ hitcount.ajax_url }}</dd>
      <dt>The unique PK is:</dt>
      <dd>{{ hitcount.pk }}</dd>
      <dt>Hit counted?</dt>
      <dd id="hit-counted"></dd>
      <dt>Hit response:</dt>
      <dd id="hit-response"></dd>
    </dl>


  </div>
</div>
{%endblock%}

{% comment %}
If you do not wish to perform any additional JavaScript actions after POST,
you can use this template tag to insert all the JavaScript you need, as in:

{% insert_hit_count_js for post%}

Or you can use with 'debug' for some output:

{% insert_hit_count_js for post debug %}

The code below is used to update the page view so we can test it with selenium.
{% endcomment %}

{% block inline_javascript %}

{% load static %}
<script src="{% static 'hitcount/jquery.postcsrf.js' %}"></script>

{% get_hit_count_js_variables for post as hitcount %}
<script type="text/javascript">
jQuery(document).ready(function($) {
  $.postCSRF("{{ hitcount.ajax_url }}", { hitcountPK : "{{ hitcount.pk }}" })
    .done(function(data){
      $('<i />').text(data.hit_counted).attr('id','hit-counted-value').appendTo('#hit-counted');
      $('#hit-response').text(data.hit_message);
  }).fail(function(data){
      console.log('POST failed');
      console.log(data);
  });
});
</script>


{% endblock %}