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

{% block extrascripts %}
{{ block.super }}
    <script>
	$(function() {
		$('#lundi').click(function() {
			$('#lundi-dlg').dialog({title: 'Plages du lundi',
				width: '950px',
				  buttons: [ { text: "Annuler",
					       click: function() { $(this).dialog("close"); } },
					     { text: "Valider",
					       click: function() { $(this).dialog("close"); } }]}
			);
			});
	});
</script>
{% endblock %}

{% block appbar %}
<h2>Personnel - <span class="lastname">{{ object.last_name }}</span> {{ object.first_name }}
  {% if holiday %}<span class="en-conge">(en congé jusqu'au {{ holiday.end_date|date:"j F" }})</span>{% endif %}
</h2>
    <a href="..">Retourner à l'administration du personnel</a>
    <form action="delete" method="post" data-confirmation-msg="Êtes-vous sûr de vouloir supprimer le personnel {{object.last_name}} {{object.first_name}} ?" class="form-with-confirmation">
      <button>Supprimer</button>
    </form>
{% endblock %}

{% block content %}

{% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
</ul>
<script type="text/javascript">
$('.messages').delay(1000*(1+{{ messages|length }})).fadeOut('slow');
</script>
{% endif %}

<div id="info-membre">
  <form method="post" class="ajax" id="id-form">
    {% csrf_token %}
    <div class="frame inline">
      <h3>État civil</h3>
      <button class="save enable-on-change">✔</button>
      <p>
      {% for field in forms.id %}
      {{ field.label_tag  }} : {{ field }}
      {% endfor %}
    </div>
  </form>

  <form method="post" class="ajax" id="services-form">
    {% csrf_token %}
    <div class="inline frame">
      <h3>Services</h3>
      <button class="save enable-on-change">✔</button>

      <p class="services">
      {{ forms.services.services }}
      </p>
    </div>
  </form>

  <div class="frame" id="schedule">
    <h3>Horaires de travail</h3>

    <table>
      <thead>
        <tr>
          {% for weekday, name in weekdays %}
            <td><a href="{{weekday}}/">{{ name|capfirst }}</a></td>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
      <tr>
        {% for timetable in timetables %}
        <td>
          {% for schedule in timetable.schedules %}
            De {{ schedule.start_time }} à {{ schedule.end_time }}
            {% if not forloop.last %}
            <br/>
            {% endif %}
          {% empty %}
          -
          {% endfor %}
        </td>
        {% endfor %}
      </tr>
      </tbody>
    </table>
  </div>
  <form action="holidays/" method="get">
    <div class="frame">
      <h3>Congés</h3>
      <button class="save icon-edit"></button>
      <ul>
        {% for holiday in holidays %}
        <li>{{ holiday|capfirst }}
            {% if holiday.is_current and holiday.service %}
            (congés annuels, en cours)
            {% elif holiday.is_current %}
            (en cours)
            {% elif holiday.service %}
            (congés annuels)
            {% endif %}
            {% if holiday.comment %}
            « {{ holiday.comment }} »
            {% endif %}
        </li>
        {% endfor %}
      </ul>
    </div>
  </form>
</div>
{% endblock %}

{% block dialogs %}
<div id="lundi-dlg" style="display: none;">
  <table>
    <tr>
      <th>Heure début</th> <th>Heure fin</th> <th>Date début</th> <th>Date fin</th> <th>Périodicité</th> <th>Services</th>
    </tr>
    <tr>
      <td><input value="13h30" size="8"/></td> <td><input value="17h30" size="8"/></td> <td><input value="20/04/2012" size="12"/></td> <td><input value="-" size="12"/></td> <td><select><option>Toutes les semaines</option></select></td> <td><select><option>CAMSP</option><option>CMPP</option><option>...</option><option>+</option></select></td> <td><button>-</button></td>
    </tr>
    <tr class="expired"> <td>13h30</td> <td>15h30</td> <td>2/01/2012</td> <td>14/04/2012</td> <td>2× par mois</td> <td>CAMSP</td> <td><button>déver.</button> </tr>
  </table>
  <button>+</button>
</div>
{% endblock %}
