{% extends 'pfm/base.html' %}
{% block content %}
<div class="row">
  <div class="col s12 m9 offset-m2">
    <a class="btn blue" href="#new">Add new </a>
    <a class="btn blue" href="/pfm/cat_edit">Edit</a>
      
      <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>
          <form method="POST">{% csrf_token %} {{ form.as_p }}
            <button type="submit" name="action" value="create" class="waves-effect waves-light btn-large blue">Save</button>
          </form>
        </div>
      </div>

     <div style="overflow: auto; padding: 0">
       <table class="bordered">
         <tr>
           <th>Категория</th>
           <th></th>
           <th>План</th>
           <th>Факт</th>
           <th>Разница</th>
         </tr>
     {% for row in categories %}
       <tr class="category" onclick='ModalForm({{row.pk}}); location.href="#modal"'>
         <td>{{ row.cat_name}}</td>
           <td>
             <div style="display: block; width: 5em; height: 15px; border: 1px solid black; overflow: hidden;">
               <div style="display: block; width: {{row.ratio}}%; height: 100%; background: red;">
               </div>
             </div>
           </td> 
         <td> {{ row.budget_amount }} </td>
         <td> {{ row.cat_sum }}  </td> 
         <td class="balance"> {{ row.budget_amount|add:row.minus_sum }} </td>
       </tr>
     {% endfor %}
     </div>
<tr class="category"><td>Расходы</td>
<td></td>
<td>{{ budget_total }}</td><td>{{ sum_total }}</td><td class="balance">{{ total_balance }}</td></tr>

</table>
<div id="modal" class="dialog1 modal">
      <div class="modal-content" id="modal-content">
        <a href="#!" class=" right modal-action modal-close waves-effect waves-green btn-flat">Close</a>
        <form method="POST">{% csrf_token %} <input name="id" type="hidden">
          <div id="form"></div>
          <!--button type="submit" name="action" value="edit"   class="waves-effect waves-light btn-large blue" onclick='location.href="#!"'>Save</button>
          <button type="submit" name="action" value="delete" class="waves-effect waves-light btn-large blue" onclick='location.href="#!"'>Delete</button-->
        </form>  
 </div>  </div>
</div></div></div>
{% endblock content %}