{% extends "personnes/base.html" %}

{% block extrascripts %}
{{ block.super }}
<script>
  $(function() {
    $('#new-membre').click(function() {
      $('#new-membre-dlg').dialog({title: 'Nouveau membre',
          width: '500px',
          buttons: [ { text: "Fermer",
                 click: function() { $(this).dialog("close"); } },
               { text: "Ajouter",
                 click: function() {
                 $(this).dialog("close"); } } ]
          });
      });
    var $searchform = $('#sidebar form');
    $('#sidebar input[type="checkbox"]').on('change', function () {
      $searchform.submit();
    });
    $('#clear').click(function () {
      $('#sidebar input[type="text"]').val('');
      $('#sidebar select').val('');
      $('#sidebar input[type="checkbox"]').attr('checked', true);
      $('#sidebar button').click();
    });
  });
</script>
{% endblock %}

{% block appbar %}
<h2>Gestion des personnes</h2>
<a href="..">Retourner à la gestion des personnes</a>

<button class="dialog-button"
        data-url="new/ #form-content"
        data-default-button="Créer">Nouveau membre</button>
{% endblock %}

{% block beforecontent %}
<div id="sidebar">
  <form>
    <div>
      <h3>Rechercher dans les membres du personnel</h3>

      {% with field=search_form.last_name %}
        <label>{{ field.label }} :
        <div class="text-input-wrapper">
          {{ field }}
          <span class="clear">&#x2716;</span>
        </div>
        </label>
      {% endwith %}

      {% with field=search_form.first_name %}
        <label>{{ field.label }} :
        <div class="text-input-wrapper">
          {{ field }}
          <span class="clear">&#x2716;</span>
        </div>
        </label>
      {% endwith %}


      {% with field=search_form.profession %}
      <label>{{ field.label }} :
      <div class="text-input-wrapper">
        {{ field }}
      </div>
      </label>
      {% endwith %}


      <button>Rechercher</button>

    </div>
    <div id="filtre">
      <h3>Afficher les personnes</h3>

      {{ search_form.intervene_status }}
    </div>
    <a id="clear">Effacer</a>
  </form>
</div>
{% endblock %}

{% block content %}
<div class="content">
  <table id="membres" class="main">
    <thead>
    <tr>
      <th class="last_name">Nom</th>
      <th class="first_name">Prénom</th>
      <th class="profession">Profession</th>
      <th class="services">Services</th>
      <th class="is_away">Absent</th>
      <th class="active">Actif</th>
    </tr>
    </thead>
    <tbody>

    {% for object in object_list %}
    <tr data-pk="{{ object.pk }}" id="object-{{ object.pk }}">
      <td class="last_name"><span class="lastname">{{ object.last_name }}</span></td>
      <td class="first_name">{{ object.first_name }}</td>
      <td class="profession">{{ object.type }}</td>
      <td class="services">
        {% if object.services.all %}
            {% for service in object.services.all %}
            {{ service.name }}
            {% if not forloop.last %} / {% endif %}
            {% endfor %}
        {% else %}
            {% if object.enabled %}Externe{% endif %}
        {% endif %}
      </td>
      <td class="is_away">
        {% if object.holiday %}×{% else %}&nbsp;{% endif %}
      </td>
      <td class="active">
        {% if object.enabled %}✔{% else %}&nbsp;{% endif %}
      </td>
    </tr>
    {% endfor %}

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