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

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

{% 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 class="col-center">Groupe</th>
          <th>Circonscription</th>
          <th class="col-center">Etape</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for parl in parlementaires %}

          <tr>
            <td class="col-center">
              <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 class="col-center">{{ parl.groupe|label_groupe }}</td>
            <td data-value="{{ parl.num_deptmt }} {{ parl.num_circo }}">{{ parl.nom_circo }} n°{{ parl.num_circo }}</td>
            <td class="col-center">
              <span class="label" style="background-color: {{ parl.etape.couleur }};">{{ parl.etape.label }}</span>
            </td>
            <td class="col-right">
              {% if parl.etape.ordre == 10 %}
                <a class="btn btn-primary btn-sm" href="{{ url_for('parlementaire', id=parl.id) }}" role="button">Envoyer la demande</a>
              {% else %}
                <a class="btn btn-default btn-sm" href="{{ url_for('parlementaire', id=parl.id) }}" role="button">Informations</a>
              {% endif %}
            </td>
          </tr>

        {% else %}

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

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

{% block scripts %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></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 %}