{% extends "base_page.html" %}

{% block more_heads %}

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/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,projects</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 %}