{% extends "_base.html.j2" %}

{% block content %}
  <section class="panel panel-default">
    <header class="panel-heading">
      <b>Liste des {{ parlementaires|length }} parlementaires</b>
    </header>

    <article class="panel-body">
      <div class="input-group">
        <span class="input-group-addon" id="search-header">Filtrer les parlementaires</span>
        <input type="search" autocomplete="off" class="form-control" id="search" placeholder="Nom, groupe, circonscription..." aria-describedby="search-header">
      </div>
    </article>

    <table class="table table-condensed table-striped sortable searchable">
      <thead>
        <tr>
          <th colspan="2" data-defaultsort="asc" data-mainsort="1">Parlementaire</th>
          <th>Groupe</th>
          <th>Circonscription</th>
          <th>Etape</th>
        </tr>
      </thead>
      <tbody>
        {% for parl in parlementaires %}

          <tr>
            <td>
              <img class="chamber-icon" src="{{ url_for('static', filename=parl.chambre|lower+'.png') }}">
              <span class="search-vector">{{ parl.nom }} {{ parl.prenom }} {{ parl.nom_circo }} {{ parl.num_deptmt }} {{ parl.groupe.sigle }} {{ parl.groupe.nom }}</span>
            </td>
            <td data-value="{{ parl.nom }} {{ parl.prenom }}">{{ parl.prenom }} {{ parl.nom }}</td>
            <td><span title="{{ parl.groupe.nom }}" class="label" style="background-color: {{ parl.groupe.couleur }};">{{ parl.groupe.sigle }}</span></td>
            <td data-value="{{ parl.num_deptmt }} {{ parl.num_circo }}">{{ parl.nom_circo }} n°{{ parl.num_circo }}</td>
            <td>{{ parl.etape }}</td>
          </tr>

        {% else %}

          <tr>
            <td class="warning" colspan="5">
              <em>Aucun parlementaire trouvé :(</em>
            </td>
          </tr>

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

{% block header %}
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap-sortable.css') }}">

  <style>
    .search-vector { display: none; }
  </style>
{% endblock %}

{% block scripts %}
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="{{ url_for('static', filename='moment.min.js') }}"></script>
  <script src="{{ url_for('static', filename='bootstrap-sortable.js') }}"></script>

  <script>
    $(document).ready(function () {
      (function ($) {
        $('#search').keyup(function () {
          var rex = new RegExp($(this).val(), 'i');
          $('.searchable tbody tr').hide();
          $('.searchable tbody tr').filter(function () {
            return rex.test($(this).find('.search-vector').text());
          }).show();
        });
      }(jQuery));
    });
  </script>
{% endblock %}