{% extends "chrono/manager_agenda_date_view.html" %}
{% load i18n chrono %}

{% block bodyargs %}class="weekview"{% endblock %}

{% block extrascripts %}
  {{ block.super }}
  <script>
    $(function() {
      var dates = {};
      {% for year, weeks in view.get_week_dates.items %}
        dates[{{ year }}] = {};
        {% for week_monday, week_label in weeks.items %}
          dates[{{ year }}]["{{ week_monday|date:'Y/m/d' }}"] = '{{ week_label }} ({{ week_monday|date:'j F' }})';
        {% endfor %}
      {% endfor %}
      $('.date-picker select[name=year]').on('change', function() {
        var $week = $('.date-picker select[name="week"]');
        var $selected = $(':selected', $week);
        $week.empty();
        var index = 1;
        $.each(dates[$(this).val()], function(key, value) {
          $week.append('<option value="' + key + '" data-weeknum="' + index + '">' + value + '</option>');
          index += 1;
        });
        $week.val($('[data-weeknum=' + $selected.data('weeknum') + ']', $week).val());
      });
      $('.date-picker select[name=year]').change();
    });
  </script>
{% endblock %}

{% block breadcrumb %}
  {{ block.super }}
  <li class="ariane--list-item">
    <a class="ariane--link" aria-current="page">{{ view.first_day|date:"F Y" }}</a>
  </li>
{% endblock %}

{% block navigation %}
  <span class="buttons-group">
    <a class="date-prev pk-button" href="{{ view.get_previous_week_url }}"><span class="sr-only">{% trans "Previous week" %}</span></a>
    <a class="date-next pk-button" href="{{ view.get_next_week_url }}"><span class="sr-only">{% trans "Next week" %}</span></a>
  </span>
  <h2 class="date-nav">
    <span class="date-title">{{ view.first_day|human_date_range:view.last_day }}</span>
    <button class="date-picker-opener"><span class="sr-only">{% trans "Pick a week" %}</span></button>
    {% with selected_week=view.first_day|date:"W" selected_year=view.first_day|date:"Y" weeks=view.get_week_dates|get:view.first_day.year %}
      <div class="date-picker" style="display: none">
        <select name="week">{% for week_monday, week_label in weeks.items %}<option value="{{ week_monday|date:'Y/m/d' }}" data-weeknum="{{ week_monday|date:"W" }}" {% if selected_week == week_monday|date:'W' %}selected{% endif %}>{{ week_label }}</option>{% endfor %}</select>
        <select name="year">{% for year in view.get_years %}<option value="{{ year }}" {% if selected_year == year %}selected{% endif %}>{{ year }}</option>{% endfor %}</select>
        <button>{% trans 'Set Date' %}</button>
      </div>
    {% endwith %}
  </h2>
{% endblock %}