{% extends "qommon/forms/widget.html" %}
{% block widget-content %}

{% with webservice.aes_get_available_plaines as activities %}
<h2>Activités proposées</h2>
<div id="imio_plaine_weeks">
{% for week in activities %}
  <div class="imio_plaine_week">
  <p>Semaine du {{ week.monday|date:"d F Y" }}</p>
    {% for activity in week.activities %}
    <div id="{{ activity.id }}" class="activity">
      <p class="label">{{ activity.text }}</p>
      <p class="remaining_places"><span>{{ activity.remaining_places }}</span> places restantes</p>
    </div>
    {% endfor %}
  </div>
{% endfor %}
</div>
{% endwith %}

<script type="text/javascript">
$(function(){

  let dom_activities = document.querySelectorAll('.activity');
  let checkboxes_id = document.querySelector('#var_activities_plaines').getAttribute('data-widget-name');

  function check_uncheck(index){
    element_name = checkboxes_id + "$element" + index;
    linked_element = document.getElementsByName(element_name)[0];
    linked_element.checked = !linked_element.checked;
  }

  for(i=0; i<dom_activities.length; i++){

    let checkbox_name = checkboxes_id + "$element" + dom_activities[i].id;

    if(document.getElementsByName(checkbox_name)[0].checked){
      dom_activities[i].classList.add('selected');
    }

    dom_activities[i].addEventListener('click', function(e){
      let selected = this.parentNode.querySelector('.selected')
      if (this.isSameNode(selected)) {
        this.classList.remove('selected');
      } else if (selected != null) {
        selected.classList.remove('selected');
        this.classList.add('selected');
        check_uncheck(selected.id)
      } else {
      	this.classList.add('selected');
      }
      check_uncheck(this.id);
    })
  }
})
</script>
<style>
#imio_plaine_weeks {
    display: flex;
}
.imio_plaine_week > p {
    width: 60%;
    text-align: center;
    margin: 0 auto;
}
.activity {
    border: #d3d3d3 solid 1px;
    margin: 5px 2px;
    padding: 1ex;
    cursor: pointer;
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px, rgb(0 0 0 / 6%) 0px 2px 4px -1px;
    transition: box-shadow 0.3s ease-in-out;
    height: 8ex;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.activity:hover {
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
    filter: brightness(1.1);
    border: #212121 solid 1px;
}

.activity:active {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.activity.selected {
    background-color: #386ede;
    color: #FFF;
}
.activity p {
  margin: 0;
}
.activity p.label {
  font-weight: bold;
}
.activity p.remaining_places {
  font-size: 0.8em;
}
.activity p.remaining_places span {
  font-weight: bold;
}
.activity.selected p.label:after {
  content: " \002714";
}
</style>
{% endblock %}
