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

  {% with data_source.pp_developement_days as pedagogical_days %}
    <h2>Journées pédagogiques proposées</h2>
    <div id="imio_pedagogical_days">
      {% for pedagogical_day in pedagogical_days %}
        <div class="imio_pedagogical_day">
          <p>{{ pedagogical_day.text|date:"A j F Y" }}</p>
          <!-- {% for pedagogical_day 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;
      flex-wrap: wrap;
    }
    .imio_plaine_week {
      min-width: 12em;
      max-width: 50%;
      margin-bottom: 2ex;
    }
    .imio_plaine_week > p {
      width: 90%;
      margin: 0 auto;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 0.8em;
    }
    .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;
      min-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 {
    }
    .activity p.label {
      font-weight: bold;
      margin: 0 0 1ex 0;
    }
    .activity p.remaining_places {
      font-size: 0.8em;
      margin: 0;
    }
    .activity p.remaining_places span {
      font-weight: bold;
    }
    .activity.selected p.label:after {
      content: " \002714";
    }
    @media all and (max-device-width: 450px) {
      .imio_plaine_week {
        max-width: none;
        width: 100%;
      }
    }
  </style> -->
{% endblock %}