{% extends "base_page.html" %}

{% block more_heads %}
<link href="{{ url_for('main.static', filename='css/charges.css') }}" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block content %}
<div id="project_services_chart" class="charge_chart"></div>
<hr/>
<div id="project_capacities_chart" class="charge_chart"></div>
<hr/>
<table id="charge_table">
  <thead>
  <tr>
    {% for header in charges[0] %}
    <th>{{header}}</th>
    {% endfor %}
  </tr>
  </thead>
  <tbody>
  {% for line in charges[1:] %}
  <tr>
    {% for cell in line %}
    <td>{{cell}}</td>
    {% endfor %}
  </tr>
  {% endfor %}
  </tbody>
</table>
{% endblock %}

{% block more_scripts %}
{% include 'd3js-includes.html' %}
<script src="{{ url_for('main.static', filename='js/charges.js') }}" type="text/javascript"></script>
<script>
  build_chart("#project_services_chart",
              "{{url_for('main.charge_project_csv', project_id=project.id, category='service')}}");
  build_chart("#project_capacities_chart",
              "{{url_for('main.charge_project_csv', project_id=project.id, category='capacity')}}");
</script>
{% endblock %}