{% 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">agent,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 %}