{% extends 'pfm/base.html' %}

{% block content %}
<div class="grid-example col s12">
  <a class="waves-effect waves-light btn-large blue" style="display: block; float: right; margin: 1px" onclick = 'ModalForm(0); location.href = "#new"'>New transaction</a>
  <a class="waves-effect waves-light btn-large blue" style="display: block; float: right; margin: 1px" href="/tr_edit">Massive update</a>
  <p class="flow-text">Журнал операций</p> </div>

  <table class="striped bordered">
  <tr>
    <th>Дата</th>
    <th>Сумма</th>
    <th>Счет</th>
    <th>Категория</th>
    <th class="hide-on-med-and-down">Комментарий 
  </tr> 
  {% for transaction in trs %}
  <tr onclick='ModalForm({{transaction.pk}}); location.href="#new"';"><td align=center>{{ transaction.tr_date|date:"d/m/y"}}</td>
    <td>{{ transaction.tr_amount}}</td>
    <td>{{ transaction.tr_acc}}</td>
    <td>{{ transaction.tr_cat}}</td>
    <td class="hide-on-med-and-down">{{ transaction.tr_note }}</td>
  </tr>
  {% endfor %}
</table>

<div id="new" class="dialog1 modal">
  <div class="modal-content">
    <a href="#!" class=" right modal-action modal-close waves-effect waves-green btn-flat">Close</a>
    <!--h4 class="flow-text">New transaction</h4-->
    <form method="POST">   {% csrf_token %}
    <input name="id" type="hidden">
    <!--div><label>Date</label>{{ form.tr_date }}</div-->
    <div id='form'> </div>
</form></div></div>

</div>

<ul class="menu_top paginator">
  {% if trs.has_previous %}
    <li> <a href="?page=1"><<</a> </li>
    <li>  <a href="?page={{ trs.previous_page_number }}">{{ trs.previous_page_number }}</a> </li>
  {% endif %} 
  <li>
    <a style="color: #000000"  href="">{{ trs.number }}<a>
  </li>
  {% if trs.has_next %}
    <li>
      <a href="?page={{ trs.next_page_number }}"> {{ trs.next_page_number }} </a> 
    </li>
  {% endif %}

{% comment %}
{% if trs.has_next %}
<li> <a href="?page={{ trs.next_page_number|add:1 }}">{{ trs.next_page_number|add:1 }}</a></li>{% endif %}
{% endcomment %}

  {% if trs.has_next %}
    <li><a href="?page={{ trs.paginator.num_pages }}">    >> </a></li> 
  {% endif %}
                
{% comment %}
<!--li> {% for i in  trs.paginator.page_range %} </li-->
{% endcomment %}

</ul>

<script>
$(document).ready( function() {
$('#id_tr_type').on('change', function() {   
$.ajax({
      type: 'GET',
      data: {type: $(this).val()},
      success: function(form){ $('#cat').html(form)}
      })
   });
}); </script>

{% endblock content %}