(function () {
  'use strict';

  const container = document.getElementById('breaks-container');
  const addBtn    = document.getElementById('add-break');

  if (!container || !addBtn) return;

  /** Erzeugt eine neue Pausen-Zeile und gibt das DOM-Element zurück. */
  function createBreakRow(start, end) {
    const row = document.createElement('div');
    row.className = 'break-row';

    const startInput = document.createElement('input');
    startInput.type  = 'time';
    startInput.name  = 'breakStart';
    startInput.value = start || '';

    const dash = document.createElement('span');
    dash.className   = 'break-dash';
    dash.textContent = '–';
    dash.setAttribute('aria-hidden', 'true');

    const endInput = document.createElement('input');
    endInput.type  = 'time';
    endInput.name  = 'breakEnd';
    endInput.value = end || '';

    const removeBtn = document.createElement('button');
    removeBtn.type      = 'button';
    removeBtn.className = 'break-remove';
    removeBtn.setAttribute('aria-label', 'Pause entfernen');
    removeBtn.setAttribute('title', 'Pause entfernen');
    removeBtn.textContent = '×';
    removeBtn.addEventListener('click', () => row.remove());

    row.append(startInput, dash, endInput, removeBtn);
    return row;
  }

  // Bestehende Zeilen aus dem server-seitig gerenderten Formular (Bearbeitungs-
  // modus) ebenfalls mit dem Entfernen-Handler ausstatten.
  container.querySelectorAll('.break-row .break-remove').forEach((btn) => {
    btn.addEventListener('click', () => btn.closest('.break-row').remove());
  });

  // Neue Pausenzeile anfügen.
  addBtn.addEventListener('click', () => {
    container.appendChild(createBreakRow());
    // Fokus auf das erste Input der neuen Zeile setzen.
    const row = container.lastElementChild;
    row?.querySelector('input[type="time"]')?.focus();
  });
})();