// Day picker for the schedule shortcode. The CSS only uses it on narrow screens;
// without JavaScript all days stack vertically there.
for (const schedule of document.querySelectorAll('[data-schedule]')) {
  const picker = schedule.querySelector('.schedule__picker');
  const buttons = [...picker.querySelectorAll('button')];

  const select = (selected) => {
    for (const button of buttons) {
      const isSelected = button === selected;
      button.setAttribute('aria-pressed', isSelected);
      document
        .getElementById(button.getAttribute('aria-controls'))
        .classList.toggle('schedule__day--selected', isSelected);
    }
  };

  for (const button of buttons) {
    button.addEventListener('click', () => select(button));
  }

  // During the event, start on today's tours. The 'sv' locale formats as YYYY-MM-DD.
  const today = new Date().toLocaleDateString('sv');
  select(buttons.find((button) => button.dataset.date === today) ?? buttons[0]);

  picker.hidden = false;
  schedule.classList.add('schedule--picker');
}