{% extends "qommon/forms/widget.html" %}
{% load qommon %}
{% block widget-control %}
<select style="display: none" id="form_{{widget.name}}" name="{{widget.name}}"
    {% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}>
  <option value="">---</option>
  {% for option in widget.get_options %}
    {% with datetime=option.options.datetime|parse_datetime %}
    <option{% for attr in option.attrs.items %} {{attr.0}}="{{attr.1}}"{% endfor %}
          data-weekday="{{ datetime|date:"l" }}"
          data-date="{{ datetime|date:"Y-m-d" }}"
          data-time="{{ datetime|date:"H:i" }}"
      >{{ option.description }}</option>
    {% endwith %}
  {% endfor %}
</select>
<div id="form_{{widget.name}}_table" class="meetings_table">
</div>
<script>
$(function() {
  var options = $('#form_{{widget.name}} option');
  var current_date = null;
  var current_day_div = null;
  var current_offset = 0;
  var nb_days = 0;

  for (var i=0; i<options.length; i++) {
    var $option = $(options[i]);
    if ($option.attr('value') == '') continue;
    var option_date = $option.data('date');
    if (option_date !== current_date) {
      var day_label = $option.text().split(' ', 3).join(' ');
      var weekday = $option.data('weekday');
      nb_days += 1;
      current_day_div = $('<div><div class="head">' + weekday + '<br>' + day_label + '</div></div>');
      current_day_div.appendTo($('#form_{{widget.name}}_table'));
      current_date = option_date;
    }
    var day_time = $option.data('time');
    var option_span = $('<span class="selectable" data-idx="' + i + '">' + day_time + '</span>').appendTo(current_day_div);
    if ($option.attr('disabled')) {
      $(option_span).addClass('disabled').removeClass('selectable');
    }
    if ($option.attr('selected')) {
      current_offset = nb_days - 1;
      $(option_span).addClass('on');
    }
  }
  var go_prev = $('<button class="prev">&lt;</button>');
  var go_next = $('<button class="next">&gt;</button>');
  go_prev.prependTo($('#form_{{widget.name}}_table'));
  go_next.appendTo($('#form_{{widget.name}}_table'));
  go_prev.on('click', function() {
    current_offset = Math.max(0, current_offset-1);
    display(current_offset);
    return false;
  });
  go_next.on('click', function() {
    current_offset = Math.min(current_offset+1, Math.max(0, nb_days-5));
    display(current_offset);
    return false;
  });

  function display(offset) {
    $('#form_{{widget.name}}_table > div').each(function(idx, elem) {
      if (idx >= offset && idx < offset+5) {
        $(elem).show();
      } else {
        $(elem).hide();
      }
    });
    current_offset = offset;
  }
  display(current_offset);
  $('#form_{{widget.name}}_table span.selectable').on('click', function() {
   $('#form_{{widget.name}}_table span').removeClass('on');
   $(this).addClass('on');
   $('#form_{{widget.name}}').val($(options[$(this).data('idx')]).attr('value'));
  });
});
</script>
{% if request.quixote_request.is_in_backoffice %}
<style>
div.meetings_table {
  margin-top: 1ex;
  display: flex;
  width: 100%;
}

div.meetings_table > div {
  flex: 0 1 auto;
  width: 20%;
  text-align: center;
  display: none;
}

div.meetings_table div span {
  display: block;
  cursor: pointer;
  padding: 0.3ex 0;
}

div.meetings_table div span.disabled {
  opacity: 0.3;
}

div.meetings_table div span.selectable.on {
  background: #215D9C;
  color: white;
}

div.meetings_table div.head {
  padding-bottom: 1ex;
}
</style>
{% endif %}
{% endblock %}

{% block widget-hint %}
{% if widget.hint %}<div class="hint">{{widget.hint}}</div>{% endif %}
{% endblock %}
