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

{% with webservice.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>{{ week.text }}</p>
    {% for activity in week.activities %}
    <div id="{{ activity.id }}" class="activity">
        {{ activity.text }}
      </div>
    {% endfor %}
  </div>
{% endfor %}
</div>
{% endwith %}

<script type="text/javascript">
  dom_activities = document.querySelectorAll('.activity')
  
  function doing_stuff(index){
  	element_id = document.querySelector('#var_activities_plaines input').id
  	element_name = element_id + "$element" + index
  	linked_element = document.getElementsByName(element_name)[0]
  	linked_element.checked = !linked_element.checked
  }

  for(i=0; i<dom_activities.length; i++){
    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');
        doing_stuff(selected.id)
      } else {
      	this.classList.add('selected');
      }
      doing_stuff(this.id);
    })
  }

</script>

<style>
#imio_plaine_weeks {
    display: flex;
}
.activity {
    border: 1px solid #bd1f68;
    margin: 2px;
    padding: 2px 4px;
    cursor: pointer;
}
.activity:hover {
    box-shadow: 0 0 10px #bd1f68;
    color: #bd1f68;
}

.activity.selected {
    background-color: rgba(189, 31, 104, 1);
    font-weight: bold;
    color: #FFF;
}


</style>
{% endblock %}