{% extends 'base.html' %}

{% load static sekizai_tags  %}

{% block content %}
<form method="POST">
{{form.errors}}
<div class="row">
  <div class="col-md-4">
  	<h3> Article </h3>
  	{{form.articles.label}}: {{form.articles}}
  	{{form.categories.label}}:  {{form.categories}}
  </div>
  <div class="col-md-4">
  	<h3> People </h3>
  	{{form.people.label}}: {{form.people}}
  	{{form.groups.label}}: {{form.groups}}
  </div>
  <div class="col-md-4">
  	<h3> Dates </h3>
  	Start date: 
    <input id="start_date" type="text" class="idatepicker" 
    data-date-format="dd/mm/yyyy"
    value = "{% if form.start_date.value %}{{form.start_date.value }}{%endif%}" name="start_date"
     ><br>
 	
	End date: 
    <input id="end_date" type="text" class="idatepicker" data-date-format="dd/mm/yyyy"
    value = "{% if form.end_date.value%}{{form.end_date.value }}{%endif%}" name="end_date" 
    >

  </div>
</div>	

	{{form.media}}

<div class="row">
  <div class="col-md-4 col-md-offset-5">
  	<input type="submit" class="btn btn-success" value="Filter"></div>
</div>
	 {% csrf_token %} 
</form>
<hr>

<div class="row">
  <div class="col-md-3">
  	<h4>Starts</h4><br>
  	{% for label, value in total_polls.display %}
	{{label}}: {{value}}<br>
	{% endfor %}
  </div>
  <div class="col-md-3">
  	<h4>Comments</h4><br>
  	{% for label, value in total_comment.display %}
	{{label}}: {{value}}<br>
	{% endfor %}  	
  </div>
</div>




{% addtoblock "css" %}
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
{% endaddtoblock %}

{% addtoblock "js" %}
<script type="text/javascript" src="{% static 'js/bootstrap-datepicker.js' %}"></script>
{% endaddtoblock%}


{% addtoblock "js" %}
<script>
$('.idatepicker').bootstrap_datepicker({ format: "dd/mm/yyyy"});
</script>
{% endaddtoblock %}

{% endblock%}
