{% 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">agent,liste_agents</span>

<div class="card">
  <div class="card-header">
    Fiche Agent
  </div>
  <div class="card-body">
    <dl class="row agent">
      <dt class="col-sm-2 text-right">ID :</dt>
      <dd class="col-sm-10 text-left">{{agent.id}}</dd>
      <dt class="col-sm-2 text-right">Genre :</dt>
      <dd class="col-sm-10 text-left"></dd>
      <dt class="col-sm-2 text-right">Date de naissance :</dt>
      <dd class="col-sm-10 text-left"></dd>
      <dt class="col-sm-2 text-right">E-mail :</dt>
      <dd class="col-sm-10 text-left"></dd>
      {# TODO: put different spacing #}
      <dt class="col-sm-2 text-right"></dt>
      <dd class="col-sm-10 text-left"></dd>
      <dt class="col-sm-2 text-right">Statut :</dt>
      <dd class="col-sm-10 text-left">{{agent.status.name}}</dd>
      <dt class="col-sm-2 text-right">Organisme :</dt>
      <dd class="col-sm-10 text-left">{{agent.company.name}}</dd>
      <dt class="col-sm-2 text-right">Corps :</dt>
      <dd class="col-sm-10 text-left"></dd>
      <dt class="col-sm-2 text-right">Grade :</dt>
      <dd class="col-sm-10 text-left">{{agent.grade.name}}</dd>
      <dt class="col-sm-2 text-right">BAP :</dt>
      <dd class="col-sm-10 text-left">{{agent.bap.name}}</dd>
      {# TODO: puth different spacing #}
      <dt class="col-sm-2 text-right"></dt>
      <dd class="col-sm-10 text-left"></dd>
      <dt class="col-sm-2 text-right">Quotité :</dt>
      <dd class="col-sm-10 text-left"></dd>
      <dt class="col-sm-2 text-right">Date arrivée :</dt>
      <dd class="col-sm-10 text-left"></dd>
      <dt class="col-sm-2 text-right">Date départ :</dt>
      <dd class="col-sm-10 text-left"></dd>
      {# TODO: put different spacing #}
      <dt class="col-sm-2 text-right"></dt>
      <dd class="col-sm-10 text-left"></dd>
      <dt class="col-sm-2 text-right">Commentaires :</dt>
      <dd class="col-sm-10 text-left"></dd>
      {# TODO: put different spacing #}
      <dt class="col-sm-2 text-right"></dt>
      <dd class="col-sm-10 text-left"></dd>
      <dt class="col-sm-2 text-right">Fiche de poste :</dt>
      <dd class="col-sm-10 text-left"></dd>
      {# TODO: put different spacing #}
      <dt class="col-sm-2 text-right"></dt>
      <dd class="col-sm-10 text-left"></dd>
      <dt class="col-sm-2 text-right">Compétences :</dt>
      <dd class="col-sm-10 text-left"></dd>
      <dt class="col-sm-2 text-right">Besoin en formation :</dt>
      <dd class="col-sm-10 text-left"></dd>
    </dl>
    <a class="card-link" href="{{url_for('main.agent_edit', agent_id=agent.id)}}">Modifier</a>
    <a class="card-link" href="{{url_for('main.charge_add', agent_id=agent.id)}}">Charger</a>
  </div>
</div>

<div class="charge_chart" id="projects_chart"></div>
<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 i in range(line|length) %}
    {%if 'Charge' in charges[0][i] %}
    {% set charge = line[i] | int %}
    <td>{{charge / 100}}</td>
    {%else%}
    <td>{{line[i]}}</td>
    {%endif%}
    {% endfor %}
  </tr>
  {% endfor %}

  </tbody>
</table>
{% endblock %}


{% block more_scripts %}
{% include 'd3js-includes.html' %}
{% include 'charges-includes.html' %}
{% include 'datatables-includes.html' %}

<script>
  build_chart("#projects_chart",
      "{{url_for('main.charge_agent_csv', agent_id=agent.id)}}",
      "{{agent.fullname}}",
      "project");
</script>

{% endblock %}