{% if json.extra_data %}
<h2>Agenda de l'année scolaire {{ json.extra_data.school_year }}</h2>
<div class="caluire-agenda-cell caluire-agenda-cell-{{ cell.pk }}">
{% with first_monday=json.extra_data.start_date|adjust_to_week_monday %}
{% with last_day=json.extra_data.end_date|adjust_to_week_monday|add_days:6 %}
{% now 'Y-m-d' as now %}

{% spaceless %}
<button class="previous-week">←</button>
<ul>
{% for day in first_monday|iterate_days_until:last_day %}
{% if day.weekday == 0 %}
{% with sunday=day|add_days:6 %}
<li class="week"><span class="week-title">Semaine<br class="weekbreak"> du {{ day|date:"d/m" }} au {{ sunday|date:"d/m" }}</span><ul>
{% endwith %}
{% endif %}
<li class="day-title {% if now == day|date:"Y-m-d" %}current{% endif %}" data-weekday="{{ day.weekday }}"><strong>{{ day|date:"l d/m" }}</strong></li>
  {% with day_str=day|date:"Y-m-d" %}
    {% for item in json.data %}
      {% if item.details.JOURDATE == day_str %}

  <li class="activity {% if item.disabled %}disabled{% endif %}"
     data-status="{{ item.details.status_color }}"
   ><span><span>{{ item.details.activity_label }}</span></span>
   </li>

      {% endif %}
    {% endfor %}
  {% endwith %}
{% if day.weekday == 6 %}
</ul>
<p class="booking-btn"><a class="pk-button" href="{{ eservices_url }}famille/gerer-mes-reservations/tryauth?child_id={{ child_id }}&reference_year={{ first_monday.year }}&current={{ day|adjust_to_week_monday|date:"Y-m-d" }}">Modifier l'agenda</a></p>
<p class="no-activity">Pas d'activité cette semaine</p>
</li>
{% endif %}
{% endfor %}
</ul>
<button class="next-week">→</button>
{% endspaceless %}
{% endwith %}
{% endwith %}
<style>
.caluire-agenda-cell {
        margin-top: 1em;
        display: flex;
}
.caluire-agenda-cell ul {
        padding: 0;
        margin: 0;
}
.caluire-agenda-cell > ul {
        width: 100%;
}
.caluire-agenda-cell > ul > li {
        display: none;
}
.caluire-agenda-cell > ul > li.shown {
        display: block;
}
.caluire-agenda-cell button.previous-week,
.caluire-agenda-cell button.next-week {
        height: 3em;
        z-index: 10;
}
.caluire-agenda-cell button.next-week {
        margin-left: 1em;
        margin-right: 0;
}
.caluire-agenda-cell .week-title {
        display: block;
        height: 3em;
        line-height: 3em;
}
.caluire-agenda-cell .no-activity {
        color: #888;
}
.caluire-agenda-cell li.day-title {
        margin: 1em 0 0.5em 0;
}
.caluire-agenda-cell ul ul {
        list-style: none;
}
.caluire-agenda-cell li.disabled {
        color: #888;
}
.caluire-agenda-cell li > span {
        position: relative;
}
.caluire-agenda-cell span > span {
        padding-left: 1.8em;
}
.caluire-agenda-cell span > span::before {
        display: block;
        content: '';
        position: absolute;
        margin: auto;
        height: calc(0.66rem + 2px);
        width: calc(0.66rem + 2px);
        background: transparent;
        top: 0.33rem;
        left: 0;
        border: 1px solid #aaa;
        border-radius: 2px;
}
.caluire-agenda-cell span > span::after {
        display: block;
        content: '';
        position: absolute;
        margin: auto;
        height: calc(0.66rem);
        width: calc(0.66rem);
        background: transparent;
        transition: background 0.1s linear;
        top: calc(0.33rem + 1px);
        left: 1px;
}
.caluire-agenda-cell [data-status=green] span > span::after {
        background: #3c3;
}
.caluire-agenda-cell [data-status=grey] span > span::after {
        background: #aaa;
}
.caluire-agenda-cell [data-status=orange] span > span::after {
        background: orange;
}
.caluire-agenda-cell [data-status=red] span > span::after {
        background: red;
}
.caluire-agenda-cell [data-status=yellow] span > span::after {
        background: yellow;
}

br.weekbreak { display: none; }

@media screen and (max-width: 500px) {

  br.weekbreak { display: block; }

  div.caluire-agenda-cell > ul {
    margin: 0 -4em;
  }
  div.caluire-agenda-cell > ul .week-title {
    margin: 0 4em;
    line-height: 150%;
    text-align: center;
  }

}
</style>
<script>
$('.caluire-agenda-cell-{{ cell.pk }} .previous-week').on('click', function() {
  var $cell = $('.caluire-agenda-cell-{{ cell.pk }}');
  var $prev = $('li.shown', $cell).prev();
  if ($prev.length) { $('li.shown', $cell).removeClass('shown'); $prev.addClass('shown'); }
  return false;
});
$('.caluire-agenda-cell-{{ cell.pk }} .next-week').on('click', function() {
  var $cell = $('.caluire-agenda-cell-{{ cell.pk }}');
  var $next = $('li.shown', $cell).next();
  if ($next.length) { $('li.shown', $cell).removeClass('shown'); $next.addClass('shown'); }
  return false;
});
$('.caluire-agenda-cell-{{ cell.pk }} li.day-title').each(function(idx, elem) {
  /* hide empty days */
  var $next = $(elem).next();
  if ($next.length == 0 || $next.is('.day-title')) {
    $(elem).hide();
  }
});
$('.caluire-agenda-cell-{{ cell.pk }} li.week').each(function(idx, elem) {
  /* hide no-activity message if not empty */
  if ($('.activity', $(elem)).length > 0) {
    $('.no-activity', $(elem)).hide();
  }
  /* hide booking button if all items are disabled */
  if ($('.activity', $(elem)).not('.disabled').length == 0) {
    $('.booking-btn', $(elem)).hide();
  }
});
$('.caluire-agenda-cell-{{ cell.pk }}').each(function(idx, elem) {
  /* init first week shown */
  var $cell = $(this);
  $('li', $cell).removeClass('shown');
  if ($('li.day-title.current', $cell).length) {
    $('li.day-title.current', $cell).parent().parent().addClass('shown');
  } else {
    $('li', $cell).first().addClass('shown');
  }
});

</script>
</div>
{% endif %}
