{% extends "base_page.html" %}

{% block more_heads %}
  <link rel="stylesheet" type="text/css"
        href="{{ url_for('static', filename='lib/datatables-1.10.24/css/buttons.dataTables.min.css') }}"/>
  <link rel="stylesheet" type="text/css"
        href="{{ url_for('static', filename='lib/datatables-1.10.24/css/datatables.min.css') }}"/>
  <link href="{{ url_for('main.static', filename='css/charges.css', version=config.VERSION) }}" rel="stylesheet"
        type="text/css"/>
{% endblock %}

{% block content %}
  <!-- Invisible span to definte wich ul and a in the navbar are actived -->
  <span id="nav_actived" style="display: none">projet,liste_projets</span>

  <div class="card">
    <div class="card-header">
      Fiche Projet
    </div>
    <div class="card-body">
      <dl class="row">
        <dt class="col-sm-2 text-right">ID :</dt>
        <dd class="col-sm-10 text-left">{{ project['id'] }}</dd>
        {% for category, labels in project['category_labels'].items() %}
          <dt class="col-sm-2 text-right">{{ category }} :</dt>
          <dd class="col-sm-10 text-left">{{ labels|join(",") }}</dd>
        {% endfor %}
        <dt class="col-sm-2 text-right">Etat :</dt>
        <dd class="col-sm-10 text-left"></dd>
        <dt class="col-sm-2 text-right">Date RSP :</dt>
        <dd class="col-sm-10 text-left"></dd>
        <dt class="col-sm-2 text-right">Fiche projet :</dt>
        <dd class="col-sm-10 text-left"></dd>
        <dt class="col-sm-2 text-right">Date MAJ de la fiche :</dt>
        <dd class="col-sm-10 text-left"></dd>
        <dt class="col-sm-2 text-right">Commentaire :</dt>
        <dd class="col-sm-10 text-left"></dd>
      </dl>
      <a class="card-link" href="{{ url_for('main.project_edit', project_id=project.id) }}">Modifier</a>
      <a class="card-link" href="{{ url_for('main.charge_add', project_id=project.id) }}">Charger</a>
    </div>
  </div>

  <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' %}
  {% include 'charges-includes.html' %}
  {% include 'datatables-includes.html' %}

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