{% 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 class="charge_chart" id="project_services_chart"></div>

<hr/>

<div class="charge_chart" id="project_capacities_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')}}",
      "{{project.name}}",
      "service");

  build_chart("#project_capacities_chart",

      "{{url_for('main.charge_project_csv', project_id=project.id, category='capacity')}}",
      "{{project.name}}",
      "capacity");

</script>

{% endblock %}