{% extends "qommon/forms/widget.html" %}

{% block widget-control %}
<ul>
{% regroup widget.get_options by options.day as options_list %}
{% for day, options in options_list %}
<li class="day-title"><strong>{{ day }}</strong></li>
<ul>
{% for option in options %}
  <li data-date="{{ option.options.date }}"><label><input
   {% if option.selected %}checked="checked"
   {% elif widget.readonly or option.disabled %}disabled{% endif %}
   {% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}
   type="checkbox"
   data-event-id="{{ option.options.id }}"
   data-overlaps="{{ option.options.overlaps|join:" " }}"
   {% if widget.readonly %}value="yes" disabled
   {% else %}name="{{ option.name }}" value="yes"
   {% endif %}><span>{{ option.options.label }}</span></label>
   {% if widget.readonly and option.selected %}<input type="hidden" name="{{ option.name }}" value="yes">{% endif %}
   </li>
{% endfor %}
</ul>
{% endfor %}
</ul>
<style>
.template-famille-reservations-recurrentes .content {
        margin-top: 1em;
        display: flex;
}
.template-famille-reservations-recurrentes .content ul li label {
        line-height: 150%;
}
.template-famille-reservations-recurrentes.widget-readonly .content {
        margin-right: 1em;
}
.template-famille-reservations-recurrentes .content > ul {
        width: 100%;
}
.template-famille-reservations-recurrentes li.day-title {
        margin: 1em 0 0.5em 0;
}
.template-famille-reservations-recurrentes .content label {
        position: relative;
}
.template-famille-reservations-recurrentes .content input[disabled] {
        position: absolute;
        opacity: 0;
}
.template-famille-reservations-recurrentes .content input[disabled] + span {
        padding-left: 1.66rem;
}
.template-famille-reservations-recurrentes .content input[disabled] + 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;
}
.template-famille-reservations-recurrentes .content input[disabled] + 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;
}
.template-famille-reservations-recurrentes .content input[disabled]:checked + span::after {
        background: #3c3;
}
</style>
<script>
/* check overlaps */
$('.template-famille-reservations-recurrentes input').on('change', function() {
  if ($(this).is(':checked')) {
    $(this).parents('ul').find("input[data-overlaps~='"+$(this).data('event-id')+"']").prop('checked', false);
  }
});
</script>
{% endblock %}
