{% 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 %}