{% extends "dashboard_base.html" %}

{% block title %}{% if editing %}Edit{% else %}New{% endif %} event type — calrs{% endblock %}

{% block dashboard_content %}

{% if error %}
  <div class="error" style="margin-bottom: 1rem;">{{ error }}</div>
{% endif %}

<form method="POST">

{% if preset is defined and preset %}
<div style="padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--accent-subtle); border: 1px solid var(--accent-border); font-size: 0.875rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
  {% if preset == "public" %}
    <span>&#127760;</span> {{ t("etf-preset-public") | safe }}
  {% elif preset == "private" %}
    <span>&#128274;</span> {{ t("etf-preset-private") | safe }}
  {% elif preset == "internal" %}
    <span>&#127970;</span> {{ t("etf-preset-internal") | safe }}
  {% elif preset == "team" %}
    <span>&#128101;</span> {{ t("etf-preset-team") | safe }}
  {% endif %}
</div>
{% endif %}

<!-- Card 1: Basics -->
<div class="card">
  <h1 style="margin-bottom: 1rem;">{% if editing %}{{ t("etf-heading-edit") }}{% else %}{{ t("etf-heading-new") }}{% endif %}</h1>

  {% if not editing and teams is defined and teams %}
  <div class="form-group">
    <label for="team_id">{{ t("etf-team") }} <span class="hint">{{ t("etf-team-hint") }}</span></label>
    <select id="team_id" name="team_id" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text); width: 100%;">
      <option value="">{{ t("etf-team-personal") }}</option>
      {% for t in teams %}
      <option value="{{ t.id }}" {% if form_team_id is defined and form_team_id == t.id %}selected{% endif %}>{{ t.name }}</option>
      {% endfor %}
    </select>
  </div>
  {% endif %}

  <div class="form-group" id="scheduling-mode-group" style="{% if not (is_group is defined and is_group) %}display:none;{% endif %}">
    <label for="scheduling_mode">{{ t("etf-scheduling-mode") }}</label>
    <select id="scheduling_mode" name="scheduling_mode" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text); width: 100%;">
      <option value="round_robin" {% if form_scheduling_mode is defined and form_scheduling_mode == "round_robin" %}selected{% endif %}>{{ t("etf-mode-round-robin") }}</option>
      <option value="collective" {% if form_scheduling_mode is defined and form_scheduling_mode == "collective" %}selected{% endif %}>{{ t("etf-mode-collective") }}</option>
    </select>
    <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("etf-scheduling-mode-help") }}</span>
  </div>

  <div class="form-group">
    <label for="title">{{ t("etf-title") }}</label>
    <input type="text" id="title" name="title" required value="{{ form_title }}" placeholder="{{ t('etf-title-placeholder') }}">
  </div>

  <div class="form-group">
    <label for="slug">{{ t("etf-slug") }} <span class="hint">{{ t("team-form-slug-hint") }}</span></label>
    <input type="text" id="slug" name="slug" value="{{ form_slug }}" placeholder="{{ t('etf-slug-placeholder') }}" pattern="[a-z0-9\-]*" title="{{ t('team-form-slug-pattern-title') }}">
  </div>

  <div class="form-group">
    <label for="description">{{ t("team-form-description") }} <span class="hint">{{ t("team-form-optional") }}</span></label>
    <div style="border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;">
      <div class="md-toolbar" data-target="description" style="display: flex; gap: 0.25rem; padding: 0.375rem 0.5rem; background: var(--surface-hover); border-bottom: 1px solid var(--border);">
        <button type="button" data-action="bold" title="{{ t('editor-bold-short') }}" style="padding: 0.25rem 0.5rem; background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-weight: 700; font-size: 0.85rem; color: var(--text); font-family: inherit; line-height: 1;">B</button>
        <button type="button" data-action="italic" title="{{ t('editor-italic-short') }}" style="padding: 0.25rem 0.5rem; background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-style: italic; font-size: 0.85rem; color: var(--text); font-family: inherit; line-height: 1;">I</button>
        <button type="button" data-action="link" title="{{ t('editor-link-short') }}" style="padding: 0.25rem 0.5rem; background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-size: 0.85rem; color: var(--text); font-family: inherit; line-height: 1;">&#128279;</button>
        <div style="flex: 1;"></div>
        <button type="button" class="md-preview-toggle" title="{{ t('editor-toggle-preview') }}" style="padding: 0.25rem 0.5rem; background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-size: 0.75rem; color: var(--text-muted); font-family: inherit; line-height: 1;">{{ t("editor-preview") }}</button>
      </div>
      <textarea id="description" name="description" placeholder="{{ t('etf-description-placeholder') }}" style="border: none; border-radius: 0; width: 100%; resize: vertical; padding: 0.5rem 0.75rem; font-family: inherit; font-size: 0.9rem; background: var(--surface); color: var(--text); box-sizing: border-box;">{{ form_description }}</textarea>
      <div id="description-preview" style="display: none; padding: 0.5rem 0.75rem; min-height: 4rem; font-size: 0.9rem; color: var(--text); background: var(--surface);"></div>
    </div>
    <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("etf-description-help") }}</span>
  </div>

  <div style="display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start;" class="form-grid-2">
    <div class="form-group" style="min-width: 140px;">
      <label for="location_type">{{ t("etf-location") }}</label>
      <select id="location_type" name="location_type" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text); width: 100%;">
        <option value="link" {% if form_location_type == "link" %}selected{% endif %}>{{ t("etf-location-link") }}</option>
        <option value="jitsi_auto" {% if form_location_type == "jitsi_auto" %}selected{% endif %}>{{ t("etf-location-jitsi") }}</option>
        <option value="webhook_auto" {% if form_location_type == "webhook_auto" %}selected{% endif %}>{{ t("etf-location-webhook") }}</option>
        <option value="phone" {% if form_location_type == "phone" %}selected{% endif %}>{{ t("etf-location-phone") }}</option>
        <option value="in_person" {% if form_location_type == "in_person" %}selected{% endif %}>{{ t("etf-location-in-person") }}</option>
        <option value="custom" {% if form_location_type == "custom" %}selected{% endif %}>{{ t("etf-location-custom") }}</option>
      </select>
    </div>
    <div class="form-group">
      <label for="location_value">{{ t("etf-location-details") }}</label>
      <input type="text" id="location_value" name="location_value" value="{{ form_location_value }}" placeholder="{{ t('etf-location-details-placeholder') }}">
      <input type="text" id="meeting_pattern_override" name="meeting_pattern_override" value="{{ form_meeting_pattern_override }}" placeholder="{{ t('etf-pattern-placeholder') }}" style="display: none; margin-top: 0.5rem;" oninput="updateMeetingPatternWarning()">
      <span id="meeting-pattern-hint" class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: none; margin-top: 0.25rem;">
        {{ t("etf-pattern-hint") | safe }}
      </span>
      <span id="meeting-pattern-random-warning" style="display: none; font-size: 0.8rem; color: var(--warning-text, #b45309); margin-top: 0.25rem;">
        ⚠ {{ t("etf-pattern-random-warning") | safe }}
      </span>
      <span id="meeting-webhook-hint" class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: none; margin-top: 0.25rem;">
        {{ t("etf-webhook-hint") | safe }}
      </span>
    </div>
  </div>
  <script>
    function updateMeetingPatternWarning() {
      var patternIn = document.getElementById('meeting_pattern_override');
      var warn = document.getElementById('meeting-pattern-random-warning');
      var sel = document.getElementById('location_type');
      // Only meaningful when the override field is actually visible (jitsi_auto)
      // and the user has typed something. Empty falls back to org default, which
      // is warned about on the admin page.
      var v = (patternIn.value || '').trim();
      var visible = sel.value === 'jitsi_auto' && v.length > 0 && v.indexOf('{random}') === -1;
      warn.style.display = visible ? '' : 'none';
    }
    (function() {
      var sel = document.getElementById('location_type');
      var staticVal = document.getElementById('location_value');
      var patternIn = document.getElementById('meeting_pattern_override');
      var patternHint = document.getElementById('meeting-pattern-hint');
      var webhookHint = document.getElementById('meeting-webhook-hint');
      function refresh() {
        var v = sel.value;
        if (v === 'jitsi_auto') {
          staticVal.style.display = 'none';
          staticVal.required = false;
          patternIn.style.display = 'block';
          patternHint.style.display = 'block';
          webhookHint.style.display = 'none';
        } else if (v === 'webhook_auto') {
          staticVal.style.display = 'none';
          staticVal.required = false;
          patternIn.style.display = 'none';
          patternHint.style.display = 'none';
          webhookHint.style.display = 'block';
        } else {
          staticVal.style.display = '';
          staticVal.required = (v === 'link' || v === 'phone' || v === 'in_person' || v === 'custom');
          patternIn.style.display = 'none';
          patternHint.style.display = 'none';
          webhookHint.style.display = 'none';
        }
        updateMeetingPatternWarning();
      }
      sel.addEventListener('change', refresh);
      refresh();
    })();
  </script>

  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;" class="form-grid-2">
    <div class="form-group">
      <label for="duration_min">{{ t("etf-duration") }}</label>
      <input type="number" id="duration_min" name="duration_min" required value="{{ form_duration }}" min="5" max="480" step="5">
    </div>
    <div class="form-group">
      <label for="slot_interval_min">{{ t("etf-slot-interval") }}</label>
      <input type="number" id="slot_interval_min" name="slot_interval_min" value="{% if form_slot_interval and form_slot_interval != 0 %}{{ form_slot_interval }}{% endif %}" min="5" max="480" step="5" placeholder="{{ t('etf-slot-interval-placeholder') }}">
      <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("etf-slot-interval-help") }}</span>
    </div>
  </div>
</div>

<style>
  /* Collapsible sections */
  .collapsible-section { overflow: visible; }
  .collapsible-section > .collapsible-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    padding: 0;
    gap: 0.75rem;
    user-select: none;
  }
  .collapsible-section > .collapsible-header::-webkit-details-marker { display: none; }
  .collapsible-section > .collapsible-header h2 { margin: 0; flex-shrink: 0; }
  .collapsible-section > .collapsible-header .collapsible-hint {
    flex: 1;
    text-align: right;
    font-size: 0.825rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .collapsible-section > .collapsible-header .collapsible-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }
  .collapsible-section > .collapsible-header .collapsible-chevron::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
  }
  .collapsible-section[open] > .collapsible-header .collapsible-chevron::after {
    transform: rotate(45deg);
  }
  .collapsible-section > .collapsible-body {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border);
  }
  /* Animation styles — only applied via JS class during transitions */
  .collapsible-section.animating > .collapsible-body {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  .collapsible-section > .collapsible-header .collapsible-hint {
    transition: opacity 0.2s ease;
  }
  .collapsible-section[open] > .collapsible-header .collapsible-hint {
    opacity: 0.4;
  }

  .priority-btn {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s ease;
  }
  .priority-btn:hover { background: var(--surface-hover); }
  .priority-btn.active-high { background: var(--accent); color: #fff; border-color: var(--accent); }
  .priority-btn.active-medium { background: var(--text-muted); color: #fff; border-color: var(--text-muted); }
  .priority-btn.active-low { background: var(--surface-hover); color: var(--text-secondary); border-color: var(--border); font-style: italic; }
</style>

<!-- Card 2: Members (round-robin priority OR collective inclusion) -->
{% if priority_members is defined and priority_members %}
{% set is_collective_card = is_collective_team is defined and is_collective_team %}
<div class="card" id="priority-card" style="margin-top: 1rem;">
  {% if is_collective_card %}
  <h2 style="margin-bottom: 0.25rem;">{{ t("etf-required-members") }}</h2>
  <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem;">{{ t("etf-required-members-help") }}</p>
  {% else %}
  <h2 style="margin-bottom: 0.25rem;">{{ t("etf-member-priority") }}</h2>
  <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem;">{{ t("etf-member-priority-help") }}</p>
  {% endif %}

  {% for m in priority_members %}
  <div data-row-uid="{{ m.user_id }}" style="display: flex; align-items: center; padding: 0.5rem 0; gap: 0.75rem; {% if not loop.last %}border-bottom: 1px solid var(--border);{% endif %}">
    <input type="checkbox" data-include="{{ m.user_id }}" {% if m.weight > 0 %}checked{% endif %}
      style="accent-color: var(--accent); width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer;"
      onchange="toggleMember('{{ m.user_id }}', this.checked)">
    <div style="display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; transition: opacity 0.15s;" data-member-info="{{ m.user_id }}">
      <div class="avatar-circle" style="width: 28px; height: 28px; font-size: 0.65rem;">
        {% if m.has_avatar %}
          <img src="/avatar/{{ m.user_id }}" alt="">
        {% else %}
          {{ m.initials }}
        {% endif %}
      </div>
      <div style="min-width: 0;">
        <div style="font-weight: 500; font-size: 0.875rem;">{{ m.name }}</div>
        {% if m.timezone %}
        <div style="font-size: 0.75rem; color: var(--text-muted);" title="{{ t('etf-member-timezone-title') }}">{{ m.timezone }}</div>
        {% endif %}
      </div>
    </div>
    {% if not is_collective_card %}
    <div data-priority-btns="{{ m.user_id }}" style="display: flex; gap: 0.25rem; flex-shrink: 0;">
      <button type="button" data-priority="high" class="priority-btn {% if m.weight >= 3 %}active-high{% endif %}" onclick="setPriority(this, '{{ m.user_id }}', 'high')">{{ t("etf-priority-high") }}</button>
      <button type="button" data-priority="medium" class="priority-btn {% if m.weight == 2 %}active-medium{% endif %}" onclick="setPriority(this, '{{ m.user_id }}', 'medium')">{{ t("etf-priority-medium") }}</button>
      <button type="button" data-priority="low" class="priority-btn {% if m.weight >= 1 and m.weight <= 1 %}active-low{% endif %}" onclick="setPriority(this, '{{ m.user_id }}', 'low')">{{ t("etf-priority-low") }}</button>
    </div>
    {% endif %}
  </div>
  {% endfor %}
</div>
{% endif %}

{% if not editing %}
<!-- Dynamic priority card (creation flow — populated by JS when team + round-robin selected) -->
<div id="dynamic-priority-card" class="card" style="margin-top: 1rem; display: none;">
  <h2 style="margin-bottom: 0.25rem;">{{ t("etf-member-priority") }}</h2>
  <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem;">{{ t("etf-member-priority-help") }}</p>
  <div id="dynamic-priority-list"></div>
</div>
{% endif %}

<!-- Collapsible: Availability -->
<details class="card collapsible-section" style="margin-top: 1rem;" id="scheduling-section"{% if editing %} open{% endif %}>
  <summary class="collapsible-header"><h2>{{ t("etf-section-availability") }}</h2><span class="collapsible-hint" id="scheduling-hint"></span><span class="collapsible-chevron"></span></summary>
  <div class="collapsible-body">
    <div class="form-group" style="margin-bottom: 1rem;">
      <label for="event_type_timezone">{{ t("settings-timezone") }}</label>
      <select id="event_type_timezone" name="timezone" style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 0.9rem;">
        {% for tz in tz_options %}
          <option value="{{ tz.value }}" {% if tz.value == form_timezone %}selected{% endif %}>{{ tz.label }}</option>
        {% endfor %}
      </select>
      <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("etf-timezone-help") }}</span>
    </div>
    <div id="schedule-container" style="display: flex; flex-direction: column; gap: 0.25rem;"></div>
    <div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem;">
      <button type="button" id="reset-to-default-btn" style="padding: 0.25rem 0.625rem; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; transition: all 0.15s ease;" title="{{ t('etf-reset-default-title') }}">{{ t("etf-reset-default") }}</button>
      <button type="button" id="copy-to-all-btn" style="padding: 0.25rem 0.625rem; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; transition: all 0.15s ease;" title="{{ t('settings-copy-to-all-title') }}">{{ t("settings-copy-to-all") }}</button>
    </div>
    <input type="hidden" name="avail_schedule" id="avail_schedule" value="{{ form_avail_schedule | default(value='') }}">
    <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.5rem;">{{ t("etf-availability-prefilled", link='<a href="/dashboard/settings#availability" style="color: var(--accent);">' ~ (t("etf-availability-prefilled-link") | escape) ~ '</a>') | safe }}</span>
  </div>
</details>

<!-- Collapsible: Buffers & notice -->
<details class="card collapsible-section" style="margin-top: 1rem;"{% if editing and ((form_buffer_before is defined and form_buffer_before and form_buffer_before != "0") or (form_buffer_after is defined and form_buffer_after and form_buffer_after != "0") or (form_min_notice is defined and form_min_notice and form_min_notice != "0") or (form_cancel_notice_value is defined and form_cancel_notice_value and form_cancel_notice_value > 0) or (form_reschedule_notice_value is defined and form_reschedule_notice_value and form_reschedule_notice_value > 0) or (form_booking_horizon_days is defined and form_booking_horizon_days)) %} open{% endif %}>
  <summary class="collapsible-header">
    <h2>{{ t("etf-section-buffers") }}</h2>
    <span class="collapsible-hint" id="buffers-hint"></span>
    <span class="collapsible-chevron"></span>
  </summary>
  <div class="collapsible-body">
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;" class="form-grid-2">
      <div class="form-group">
        <label for="buffer_before">{{ t("etf-buffer-before") }}</label>
        <input type="number" id="buffer_before" name="buffer_before" value="{{ form_buffer_before }}" min="0" max="120" step="5">
      </div>
      <div class="form-group">
        <label for="buffer_after">{{ t("etf-buffer-after") }}</label>
        <input type="number" id="buffer_after" name="buffer_after" value="{{ form_buffer_after }}" min="0" max="120" step="5">
      </div>
    </div>
    <div class="form-group">
      <label for="min_notice_value">{{ t("etf-min-notice") }}</label>
      <div style="display: flex; gap: 0.5rem; align-items: center;">
        <input type="number" id="min_notice_value" value="" min="0" step="1" style="flex: 1; max-width: 120px;">
        <select id="min_notice_unit" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text);">
          <option value="1">{{ t("event-type-form-notice-unit-minutes") }}</option>
          <option value="60">{{ t("event-type-form-notice-unit-hours") }}</option>
          <option value="1440">{{ t("event-type-form-notice-unit-days") }}</option>
        </select>
      </div>
      <input type="hidden" id="min_notice_min" name="min_notice_min" value="{{ form_min_notice }}">
      <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("etf-min-notice-help") }}</span>
    </div>

    <div class="form-group">
      <label for="cancel_notice_value">{{ t("event-type-form-cancel-notice-label") }}</label>
      <div style="display: flex; gap: 0.5rem; align-items: center;">
        <input type="number" min="0" step="1" id="cancel_notice_value" name="cancel_notice_value"
               value="{% if form_cancel_notice_value is defined and form_cancel_notice_value > 0 %}{{ form_cancel_notice_value }}{% endif %}"
               placeholder="0" style="flex: 1; max-width: 120px;">
        <select name="cancel_notice_unit" id="cancel_notice_unit" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text);">
          <option value="minutes" {% if form_cancel_notice_unit is defined and form_cancel_notice_unit == "minutes" %}selected{% endif %}>{{ t("event-type-form-notice-unit-minutes") }}</option>
          <option value="hours" {% if form_cancel_notice_unit is defined and form_cancel_notice_unit == "hours" %}selected{% endif %}>{{ t("event-type-form-notice-unit-hours") }}</option>
          <option value="days" {% if form_cancel_notice_unit is defined and form_cancel_notice_unit == "days" %}selected{% endif %}>{{ t("event-type-form-notice-unit-days") }}</option>
        </select>
      </div>
      <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("event-type-form-notice-help") }}</span>
    </div>

    <div class="form-group">
      <label for="reschedule_notice_value">{{ t("event-type-form-reschedule-notice-label") }}</label>
      <div style="display: flex; gap: 0.5rem; align-items: center;">
        <input type="number" min="0" step="1" id="reschedule_notice_value" name="reschedule_notice_value"
               value="{% if form_reschedule_notice_value is defined and form_reschedule_notice_value > 0 %}{{ form_reschedule_notice_value }}{% endif %}"
               placeholder="0" style="flex: 1; max-width: 120px;">
        <select name="reschedule_notice_unit" id="reschedule_notice_unit" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text);">
          <option value="minutes" {% if form_reschedule_notice_unit is defined and form_reschedule_notice_unit == "minutes" %}selected{% endif %}>{{ t("event-type-form-notice-unit-minutes") }}</option>
          <option value="hours" {% if form_reschedule_notice_unit is defined and form_reschedule_notice_unit == "hours" %}selected{% endif %}>{{ t("event-type-form-notice-unit-hours") }}</option>
          <option value="days" {% if form_reschedule_notice_unit is defined and form_reschedule_notice_unit == "days" %}selected{% endif %}>{{ t("event-type-form-notice-unit-days") }}</option>
        </select>
      </div>
      <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("event-type-form-notice-help") }}</span>
    </div>

    <div class="form-group">
      <label for="booking_horizon_days">{{ t("event-type-form-booking-horizon-label") }}</label>
      <input type="number" min="0" step="1" id="booking_horizon_days" name="booking_horizon_days"
             value="{% if form_booking_horizon_days is defined %}{{ form_booking_horizon_days }}{% endif %}"
             style="max-width: 120px;">
      <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("event-type-form-booking-horizon-help") }}</span>
    </div>
  </div>
</details>

<!-- Collapsible: Booking limits -->
<details class="card collapsible-section" style="margin-top: 1rem;"{% if editing and (form_first_slot_only or (form_frequency_limits is defined and form_frequency_limits)) %} open{% endif %}>
  <summary class="collapsible-header">
    <h2>{{ t("etf-section-limits") }}</h2>
    <span class="collapsible-hint" id="limits-hint"></span>
    <span class="collapsible-chevron"></span>
  </summary>
  <div class="collapsible-body">
    <!-- One slot per day toggle -->
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);">
      <div>
        <strong style="font-size: 0.925rem;">{{ t("etf-first-slot-only") }}</strong>
        <div style="color: var(--text-muted); font-size: 0.825rem;">{{ t("etf-first-slot-only-help") }}</div>
      </div>
      <label style="position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0;">
        <input type="checkbox" name="first_slot_only" {% if form_first_slot_only %}checked{% endif %} autocomplete="off" style="opacity: 0; width: 0; height: 0;" id="first-slot-toggle">
        <span style="position: absolute; cursor: pointer; inset: 0; background: #71717a; border-radius: 24px; transition: 0.2s;" id="first-slot-track">
          <span style="position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s;" id="first-slot-knob"></span>
        </span>
      </label>
    </div>

    <!-- Frequency limits toggle -->
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 0.5rem;">
      <div>
        <strong style="font-size: 0.925rem;">{{ t("etf-freq-limit") }}</strong>
        <div style="color: var(--text-muted); font-size: 0.825rem;">{{ t("etf-freq-limit-help") }}</div>
      </div>
      <label style="position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0;">
        <input type="checkbox" id="freq-limit-toggle" autocomplete="off" style="opacity: 0; width: 0; height: 0;">
        <span style="position: absolute; cursor: pointer; inset: 0; background: #71717a; border-radius: 24px; transition: 0.2s;" id="freq-toggle-track">
          <span style="position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s;" id="freq-toggle-knob"></span>
        </span>
      </label>
    </div>
    <div id="freq-limits-container" style="display: none; margin-top: 0.5rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);">
      <div id="freq-limits-list" style="display: flex; flex-direction: column; gap: 0.5rem;"></div>
      <button type="button" id="add-freq-limit" style="margin-top: 0.75rem; padding: 0.375rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; transition: all 0.15s ease;">+ {{ t("etf-add-limit") }}</button>
    </div>
    <input type="hidden" name="frequency_limits" id="frequency_limits" value="{{ form_frequency_limits | default(value='') }}">
  </div>
</details>

<!-- Collapsible: Booking options -->
<details class="card collapsible-section" style="margin-top: 1rem;"{% if editing and (form_requires_confirmation or (form_max_additional_guests is defined and form_max_additional_guests and form_max_additional_guests != 0) or (form_default_calendar_view is defined and form_default_calendar_view and form_default_calendar_view != "month") or (selected_resource_ids is defined and selected_resource_ids)) %} open{% endif %}>
  <summary class="collapsible-header">
    <h2>{{ t("etf-section-options") }}</h2>
    <span class="collapsible-hint" id="options-hint"></span>
    <span class="collapsible-chevron"></span>
  </summary>
  <div class="collapsible-body">
    <label style="display: flex; align-items: center; gap: 0.625rem; cursor: pointer; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.15s ease;">
      <input type="checkbox" name="requires_confirmation" {% if form_requires_confirmation %}checked{% endif %} style="accent-color: var(--accent); width: 1.125rem; height: 1.125rem;">
      <div>
        <strong style="font-size: 0.925rem;">{{ t("etf-requires-confirmation") }}</strong>
        <div style="color: var(--text-muted); font-size: 0.825rem;">{{ t("etf-requires-confirmation-help") }}</div>
      </div>
    </label>

    {% if can_enable_sms is defined and can_enable_sms %}
    <div class="form-group" style="margin-top: 0.75rem;">
      <label for="sms_phone_mode">{{ t("etf-sms") }}</label>
      <select id="sms_phone_mode" name="sms_phone_mode" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text); width: 100%;">
        <option value="off" {% if form_sms_phone_mode == "off" %}selected{% endif %}>{{ t("etf-sms-off") }}</option>
        <option value="optional" {% if form_sms_phone_mode == "optional" %}selected{% endif %}>{{ t("etf-sms-optional") }}</option>
        <option value="required" {% if form_sms_phone_mode == "required" %}selected{% endif %}>{{ t("etf-sms-required") }}</option>
      </select>
      <span class="hint" style="font-size: 0.825rem; color: var(--text-muted); display: block; margin-top: 0.375rem;">
        {{ t("etf-sms-help", link='<a href="/dashboard/admin" style="color: var(--accent); text-decoration: none;">' ~ (t("etf-admin-panel-link") | escape) ~ '</a>') | safe }}
      </span>
    </div>
    {% endif %}

    <div class="form-group" style="margin-top: 0.75rem;">
      <label for="max_additional_guests">{{ t("etf-additional-guests") }}</label>
      <select id="max_additional_guests" name="max_additional_guests" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text); width: 100%;">
        <option value="0" {% if form_max_additional_guests == 0 %}selected{% endif %}>{{ t("etf-guests-none") }}</option>
        <option value="1" {% if form_max_additional_guests == 1 %}selected{% endif %}>{{ t("etf-guests-up-to", count=1) }}</option>
        <option value="3" {% if form_max_additional_guests == 3 %}selected{% endif %}>{{ t("etf-guests-up-to", count=3) }}</option>
        <option value="5" {% if form_max_additional_guests == 5 %}selected{% endif %}>{{ t("etf-guests-up-to", count=5) }}</option>
        <option value="10" {% if form_max_additional_guests == 10 %}selected{% endif %}>{{ t("etf-guests-up-to", count=10) }}</option>
      </select>
      <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("etf-additional-guests-help") }}</span>
    </div>

    <div class="form-group" style="margin-top: 0.75rem;">
      <label for="default_calendar_view">{{ t("etf-default-view") }}</label>
      <select id="default_calendar_view" name="default_calendar_view" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text); width: 100%;">
        <option value="month" {% if form_default_calendar_view is not defined or form_default_calendar_view == "month" %}selected{% endif %}>{{ t("etf-view-month") }}</option>
        <option value="week" {% if form_default_calendar_view == "week" %}selected{% endif %}>{{ t("etf-view-week") }}</option>
        <option value="column" {% if form_default_calendar_view == "column" %}selected{% endif %}>{{ t("etf-view-column") }}</option>
      </select>
      <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("etf-default-view-help") }}</span>
    </div>

    {% if calendars is defined and calendars %}
    <div style="border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 0.75rem;">
      <label style="font-weight: 600; font-size: 0.925rem; display: block; margin-bottom: 0.5rem;">{{ t("etf-conflict-calendars") }}</label>
      <span class="hint" style="font-size: 0.825rem; color: var(--text-muted); display: block; margin-bottom: 0.75rem;">{{ t("etf-conflict-calendars-help") }}</span>
      <div style="display: flex; flex-direction: column; gap: 0.5rem;">
        {% set selected_padded = "," ~ selected_calendar_ids ~ "," %}
        {% for cal in calendars %}
          <label style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; cursor: pointer; transition: all 0.15s ease;">
            <input type="checkbox" class="cal-check" value="{{ cal.id }}" {% if ("," ~ cal.id ~ ",") in selected_padded %}checked{% endif %} style="accent-color: var(--accent);">
            {{ cal.name }}
          </label>
        {% endfor %}
      </div>
      <input type="hidden" name="calendar_ids" id="calendar_ids" value="{{ selected_calendar_ids }}">
    </div>
    {% endif %}

    {% if resources_all is defined and resources_all %}
    <div style="border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 0.75rem;">
      <label style="font-weight: 600; font-size: 0.925rem; display: block; margin-bottom: 0.5rem;">{{ t("event-type-form-resources-label") }}</label>
      <span class="hint" style="font-size: 0.825rem; color: var(--text-muted); display: block; margin-bottom: 0.75rem;">{{ t("event-type-form-resources-hint") }}</span>
      <div style="display: flex; flex-direction: column; gap: 0.5rem;">
        {% set selected_res_padded = "," ~ selected_resource_ids ~ "," %}
        {% for r in resources_all %}
          <label style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; cursor: pointer; transition: all 0.15s ease;">
            <input type="checkbox" class="res-check" value="{{ r.id }}" {% if ("," ~ r.id ~ ",") in selected_res_padded %}checked{% endif %} style="accent-color: var(--accent);">
            {{ r.name }}
          </label>
        {% endfor %}
      </div>
      <input type="hidden" name="resource_ids" id="resource_ids" value="{{ selected_resource_ids }}">
      <div style="display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.75rem;">
        <label style="display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.85rem; cursor: pointer;">
          <input type="radio" name="resource_scheduling_mode" value="all" {% if resource_scheduling_mode is not defined or not resource_scheduling_mode or resource_scheduling_mode == "all" %}checked{% endif %} style="accent-color: var(--accent);">
          {{ t("event-type-form-resources-mode-all") }}
        </label>
        <label style="display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.85rem; cursor: pointer;">
          <input type="radio" name="resource_scheduling_mode" value="round_robin" {% if resource_scheduling_mode is defined and resource_scheduling_mode == "round_robin" %}checked{% endif %} style="accent-color: var(--accent);">
          {{ t("event-type-form-resources-mode-round-robin") }}
        </label>
      </div>
    </div>
    {% elif can_manage_resources is defined and can_manage_resources %}
    <div style="border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 0.75rem;">
      <label style="font-weight: 600; font-size: 0.925rem; display: block; margin-bottom: 0.5rem;">{{ t("event-type-form-resources-label") }}</label>
      <span class="hint" style="font-size: 0.825rem; color: var(--text-muted); display: block;">{{ t("etf-no-resources", link='<a href="/dashboard/admin" style="color: var(--accent); text-decoration: none;">' ~ (t("etf-admin-panel-link") | escape) ~ '</a>') | safe }}</span>
    </div>
    {% endif %}
  </div>
</details>

<!-- Collapsible: Access & notifications -->
<details class="card collapsible-section" style="margin-top: 1rem;"{% if editing and ((form_visibility is defined and form_visibility and form_visibility != "public") or (form_reminder_minutes is defined and form_reminder_minutes and form_reminder_minutes != 0)) %} open{% endif %}>
  <summary class="collapsible-header">
    <h2>{{ t("etf-section-access") }}</h2>
    <span class="collapsible-hint" id="access-hint"></span>
    <span class="collapsible-chevron"></span>
  </summary>
  <div class="collapsible-body">
    <div class="form-group">
      <label for="visibility">{{ t("team-form-visibility") }}</label>
      <select id="visibility" name="visibility" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text); width: 100%;">
        <option value="public" {% if form_visibility is not defined or form_visibility == "public" %}selected{% endif %}>{{ t("etf-visibility-public") }}</option>
        <option value="internal" {% if form_visibility == "internal" %}selected{% endif %}>{{ t("etf-visibility-internal") }}</option>
        <option value="private" {% if form_visibility == "private" %}selected{% endif %}>{{ t("etf-visibility-private") }}</option>
      </select>
      <span class="hint" style="display: block; margin-top: 0.25rem;">{{ t("etf-visibility-help") }}</span>
    </div>
    <div class="form-group" style="margin-top: 0.75rem;">
      <label for="reminder_minutes">{{ t("etf-reminder") }}</label>
      <select id="reminder_minutes" name="reminder_minutes" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text); width: 100%;">
        <option value="0" {% if form_reminder_minutes == 0 %}selected{% endif %}>{{ t("etf-reminder-none") }}</option>
        <option value="60" {% if form_reminder_minutes == 60 %}selected{% endif %}>{{ t("etf-reminder-hours", count=1) }}</option>
        <option value="240" {% if form_reminder_minutes == 240 %}selected{% endif %}>{{ t("etf-reminder-hours", count=4) }}</option>
        <option value="1440" {% if form_reminder_minutes == 1440 %}selected{% endif %}>{{ t("etf-reminder-days", count=1) }}</option>
        <option value="2880" {% if form_reminder_minutes == 2880 %}selected{% endif %}>{{ t("etf-reminder-days", count=2) }}</option>
      </select>
      <span class="hint" style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("etf-reminder-help") }}</span>
    </div>
  </div>
</details>

{% if editing and not is_group and owner_username and form_visibility == "public" %}
<!-- Card: Dynamic Group Link -->
<div class="card" style="margin-top: 1rem;">
  <h2>{{ t("etf-dynamic-group") }}</h2>
  <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.75rem;">
    {{ t("etf-dynamic-group-help") }}
  </p>
  <div style="position: relative;">
    <input type="text" id="dg-search-input" autocomplete="off" placeholder="{{ t('etf-dynamic-group-search') }}" style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; font-family: inherit; background: var(--surface); color: var(--text);">
    <div id="dg-search-results" style="display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); max-height: 250px; overflow-y: auto; z-index: 10; box-shadow: var(--shadow);"></div>
  </div>
  <span style="font-size: 0.75rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">{{ t("etf-dynamic-group-note") }}</span>
  <div id="dg-members" style="margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem;"></div>
  <div id="dg-url-box" style="display: none; margin-top: 0.75rem;">
    <label style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-bottom: 0.25rem;">{{ t("etf-dynamic-group-url") }}</label>
    <div style="display: flex; gap: 0.5rem; align-items: center;">
      <input type="text" id="dg-url" readonly style="flex: 1; min-width: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; font-family: monospace; background: var(--surface); color: var(--text);">
      <button type="button" id="dg-copy-btn" class="slot-btn" style="font-size: 0.8rem; padding: 0.375rem 0.75rem; flex-shrink: 0; cursor: pointer;">{{ t("settings-copy") }}</button>
    </div>
  </div>
</div>
{% endif %}

{% if is_group is defined and is_group and watcher_teams is defined and watcher_teams %}
<details class="card collapsible-section" style="margin-top: 1rem;"{% if selected_watcher_team_ids is defined and selected_watcher_team_ids %} open{% endif %}>
  <summary class="collapsible-header">
    <h2>{{ t("etf-watcher-teams") }}</h2>
    <span class="collapsible-hint" id="watcher-hint"></span>
    <span class="collapsible-chevron"></span>
  </summary>
  <div class="collapsible-body">
    <span class="hint" style="font-size: 0.825rem; color: var(--text-muted); display: block; margin-bottom: 0.75rem;">{{ t("etf-watcher-teams-help") }}</span>
    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
      {% set watcher_padded = "," ~ selected_watcher_team_ids ~ "," %}
      {% for wt in watcher_teams %}
        <label style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; cursor: pointer; transition: all 0.15s ease;">
          <input type="checkbox" class="watcher-team-check" value="{{ wt.id }}" {% if ("," ~ wt.id ~ ",") in watcher_padded %}checked{% endif %} style="accent-color: var(--accent);">
          {{ wt.name }}
        </label>
      {% endfor %}
    </div>
    <input type="hidden" name="watcher_team_ids" id="watcher_team_ids" value="{{ selected_watcher_team_ids }}">
  </div>
</details>
{% endif %}

<!-- Save button -->
<div style="margin-top: 1.25rem;">
  <button type="submit" class="btn">
    {% if editing %}{{ t("etf-save") }}{% else %}{{ t("etf-create") }}{% endif %}
  </button>
</div>

</form>

<script>
// Strings this page composes at runtime. `%1`/`%2` are substituted by sub()
// below; Fluent arguments cannot be used because the values are only known
// once the visitor edits a field.
var ETF_I18N = {
  fmtDayOne: {{ t('etf-fmt-day-one') | tojson }},
  fmtDayOther: {{ t('etf-fmt-day-other') | tojson }},
  fmtHours: {{ t('etf-fmt-hours') | tojson }},
  fmtMinutes: {{ t('etf-fmt-minutes') | tojson }},
  hintBufferBoth: {{ t('etf-hint-buffer-both') | tojson }},
  hintBufferBefore: {{ t('etf-hint-buffer-before') | tojson }},
  hintBufferAfter: {{ t('etf-hint-buffer-after') | tojson }},
  hintNotice: {{ t('etf-hint-notice') | tojson }},
  hintNoBuffers: {{ t('etf-hint-no-buffers') | tojson }},
  hintOneSlot: {{ t('etf-first-slot-only') | tojson }},
  hintMax: {{ t('etf-hint-max') | tojson }},
  hintNoLimits: {{ t('etf-hint-no-limits') | tojson }},
  hintConfirmationRequired: {{ t('etf-hint-confirmation-required') | tojson }},
  hintAutoConfirmed: {{ t('etf-hint-auto-confirmed') | tojson }},
  hintExtraGuestsOne: {{ t('etf-hint-extra-guests-one') | tojson }},
  hintExtraGuestsOther: {{ t('etf-hint-extra-guests-other') | tojson }},
  hintView: {{ t('etf-hint-view') | tojson }},
  hintReminder: {{ t('etf-hint-reminder') | tojson }},
  hintNoReminder: {{ t('etf-hint-no-reminder') | tojson }},
  hintPeriodShort: {
    day: {{ t('etf-hint-period-day') | tojson }},
    week: {{ t('etf-hint-period-week') | tojson }},
    month: {{ t('etf-hint-period-month') | tojson }},
    year: {{ t('etf-hint-period-year') | tojson }}
  },
  periodLabels: {
    day: {{ t('etf-period-day') | tojson }},
    week: {{ t('etf-period-week') | tojson }},
    month: {{ t('etf-period-month') | tojson }},
    year: {{ t('etf-period-year') | tojson }}
  },
  visLabels: {
    public: {{ t('team-form-public') | tojson }},
    internal: {{ t('etf-vis-internal') | tojson }},
    private: {{ t('team-form-private') | tojson }}
  },
  viewLabels: {
    week: {{ t('etf-view-week-short') | tojson }},
    column: {{ t('etf-view-column-short') | tojson }}
  },
  dayNames: [
    {{ t('common-weekday-long-sun') | tojson }},
    {{ t('common-weekday-long-mon') | tojson }},
    {{ t('common-weekday-long-tue') | tojson }},
    {{ t('common-weekday-long-wed') | tojson }},
    {{ t('common-weekday-long-thu') | tojson }},
    {{ t('common-weekday-long-fri') | tojson }},
    {{ t('common-weekday-long-sat') | tojson }}
  ]
};
function sub(tpl, a, b) {
  return String(tpl).replace('%1', a).replace('%2', b);
}
  // --- Animated collapsible sections ---
  (function() {
    document.querySelectorAll('.collapsible-section').forEach(function(details) {
      var summary = details.querySelector('.collapsible-header');
      var body = details.querySelector('.collapsible-body');
      if (!summary || !body) return;

      function cleanup() {
        details.classList.remove('animating');
        body.style.maxHeight = '';
        body.style.opacity = '';
      }

      summary.addEventListener('click', function(e) {
        e.preventDefault();
        if (details.open) {
          // Closing: set start values, force layout, add transition, then animate
          body.style.maxHeight = body.scrollHeight + 'px';
          body.style.opacity = '1';
          body.offsetHeight; // force layout so browser registers start values
          details.classList.add('animating');
          requestAnimationFrame(function() {
            body.style.maxHeight = '0';
            body.style.opacity = '0';
          });
          body.addEventListener('transitionend', function handler(ev) {
            if (ev.propertyName !== 'max-height') return;
            body.removeEventListener('transitionend', handler);
            details.removeAttribute('open');
            cleanup();
          });
        } else {
          // Opening: open details, set start at 0, force layout, add transition, animate to height
          details.setAttribute('open', '');
          body.style.maxHeight = '0';
          body.style.opacity = '0';
          body.offsetHeight; // force layout
          details.classList.add('animating');
          var h = body.scrollHeight;
          requestAnimationFrame(function() {
            body.style.maxHeight = h + 'px';
            body.style.opacity = '1';
          });
          body.addEventListener('transitionend', function handler(ev) {
            if (ev.propertyName !== 'max-height') return;
            body.removeEventListener('transitionend', handler);
            cleanup();
          });
        }
      });
    });
  })();

  // --- Priority AJAX (no page reload) ---
  function sendPriority(userId, priority) {
    var url = '/dashboard/{% if is_group is defined and is_group %}group-event-types/{{ form_team_id }}{% else %}event-types{% endif %}/{{ form_slug }}/priority/' + userId;
    var csrfCookie = document.cookie.split(';').map(function(c){return c.trim();}).find(function(c){return c.startsWith('__Host-calrs_csrf=');});
    var csrf = csrfCookie ? csrfCookie.split('=')[1] : '';
    var body = '_csrf=' + encodeURIComponent(csrf) + '&priority=' + encodeURIComponent(priority);
    return fetch(url, {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: body,
      redirect: 'manual'
    });
  }

  function setPriority(btn, userId, priority) {
    sendPriority(userId, priority).then(function() {
      var container = document.querySelector('[data-priority-btns="' + userId + '"]');
      container.querySelectorAll('.priority-btn').forEach(function(b) { b.className = 'priority-btn'; });
      var cls = priority === 'high' ? 'active-high' : priority === 'medium' ? 'active-medium' : 'active-low';
      btn.classList.add(cls);
    });
  }

  function toggleMember(userId, included) {
    var info = document.querySelector('[data-member-info="' + userId + '"]');
    var btns = document.querySelector('[data-priority-btns="' + userId + '"]');
    if (included) {
      if (info) info.style.opacity = '1';
      if (btns) {
        btns.style.visibility = 'visible';
        btns.querySelectorAll('.priority-btn').forEach(function(b) { b.className = 'priority-btn'; });
        btns.querySelector('[data-priority="low"]').classList.add('active-low');
      }
      sendPriority(userId, 'low');
    } else {
      if (info) info.style.opacity = '0.4';
      if (btns) btns.style.visibility = 'hidden';
      sendPriority(userId, 'exclude');
    }
  }

  // Initialize visibility on load
  document.querySelectorAll('[data-include]').forEach(function(cb) {
    var uid = cb.dataset.include;
    var btns = document.querySelector('[data-priority-btns="' + uid + '"]');
    var info = document.querySelector('[data-member-info="' + uid + '"]');
    if (!cb.checked) {
      if (btns) btns.style.visibility = 'hidden';
      if (info) info.style.opacity = '0.4';
    }
  });

  // --- Auto-generate slug from title ---
  (function() {
    var titleEl = document.getElementById('title');
    var slugEl = document.getElementById('slug');
    titleEl.addEventListener('input', function() {
      if (!slugEl.value) {
        slugEl.value = titleEl.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
      }
    });
  })();

  // --- Show/hide scheduling mode + priority card based on team selection ---
  (function() {
    var teamSel = document.getElementById('team_id');
    var modeGroup = document.getElementById('scheduling-mode-group');
    var modeSel = document.getElementById('scheduling_mode');
    var priorityCard = document.getElementById('priority-card');
    var dynamicCard = document.getElementById('dynamic-priority-card');
    var dynamicList = document.getElementById('dynamic-priority-list');

    // Team members data for dynamic priority card (creation flow)
    var teamMembers = {};
    {% if teams is defined and teams %}
    {% for t in teams %}
    teamMembers["{{ t.id }}"] = [
      {% if t.members is defined %}{% for m in t.members %}
      { userId: "{{ m.user_id }}", name: "{{ m.name }}", hasAvatar: {{ m.has_avatar | lower }}, initials: "{{ m.initials }}", timezone: "{{ m.timezone | default(value='') }}" },
      {% endfor %}{% endif %}
    ];
    {% endfor %}
    {% endif %}

    // Track priority state for creation flow
    var memberPriorities = {};

    // Current rendering mode for the dynamic card: 'round_robin' or 'collective'
    var dynamicMode = 'round_robin';
    // For collective mode: track include state per user (true = required, false = excluded)
    var memberIncluded = {};
    // Card title/description elements (set once)
    var dynamicTitle = dynamicCard ? dynamicCard.querySelector('h2') : null;
    var dynamicDesc = dynamicCard ? dynamicCard.querySelector('p') : null;

    function renderDynamicPriority(teamId, mode) {
      if (!dynamicCard || !dynamicList) return;
      var members = teamMembers[teamId];
      if (!members || members.length === 0) {
        dynamicCard.style.display = 'none';
        return;
      }
      dynamicMode = mode || 'round_robin';
      // Update title/description for the current mode
      if (dynamicTitle && dynamicDesc) {
        if (dynamicMode === 'collective') {
          dynamicTitle.textContent = {{ t('etf-required-members') | tojson }};
          dynamicDesc.textContent = {{ t('etf-required-members-help') | tojson }};
        } else {
          dynamicTitle.textContent = {{ t('etf-member-priority') | tojson }};
          dynamicDesc.textContent = {{ t('etf-member-priority-help') | tojson }};
        }
      }
      dynamicList.innerHTML = '';
      memberPriorities = {};
      memberIncluded = {};
      members.forEach(function(m, i) {
        memberPriorities[m.userId] = 'low';
        memberIncluded[m.userId] = true;
        var row = document.createElement('div');
        row.style.cssText = 'display: flex; align-items: center; padding: 0.5rem 0; gap: 0.75rem;' + (i < members.length - 1 ? ' border-bottom: 1px solid var(--border);' : '');
        // Include checkbox (collective mode only)
        if (dynamicMode === 'collective') {
          var cb = document.createElement('input');
          cb.type = 'checkbox';
          cb.checked = true;
          cb.style.cssText = 'accent-color: var(--accent); width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer;';
          cb.onchange = function() {
            memberIncluded[m.userId] = cb.checked;
            nameWrap.style.opacity = cb.checked ? '1' : '0.4';
            syncPriorityInputs();
          };
          row.appendChild(cb);
        }
        // Avatar + name (wrapped so we can dim them when excluded)
        var nameWrap = document.createElement('div');
        nameWrap.style.cssText = 'display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; transition: opacity 0.15s;';
        var avatar = document.createElement('div');
        avatar.className = 'avatar-circle';
        avatar.style.cssText = 'width: 28px; height: 28px; font-size: 0.65rem;';
        if (m.hasAvatar) {
          avatar.innerHTML = '<img src="/avatar/' + m.userId + '" alt="">';
        } else {
          avatar.textContent = m.initials;
        }
        nameWrap.appendChild(avatar);
        var nameStack = document.createElement('div');
        nameStack.style.cssText = 'min-width: 0;';
        var name = document.createElement('div');
        name.style.cssText = 'font-weight: 500; font-size: 0.875rem;';
        name.textContent = m.name;
        nameStack.appendChild(name);
        if (m.timezone) {
          var tz = document.createElement('div');
          tz.style.cssText = 'font-size: 0.75rem; color: var(--text-muted);';
          tz.title = "Member's timezone. Their personal working hours are interpreted in this TZ.";
          tz.textContent = m.timezone;
          nameStack.appendChild(tz);
        }
        nameWrap.appendChild(nameStack);
        row.appendChild(nameWrap);
        // Priority buttons (round-robin only)
        if (dynamicMode === 'round_robin') {
          var btns = document.createElement('div');
          btns.style.cssText = 'display: flex; gap: 0.25rem; flex-shrink: 0;';
          ['high', 'medium', 'low'].forEach(function(level) {
            var btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'priority-btn' + (level === 'low' ? ' active-low' : '');
            btn.textContent = level.charAt(0).toUpperCase() + level.slice(1);
            btn.onclick = function() {
              memberPriorities[m.userId] = level;
              btns.querySelectorAll('.priority-btn').forEach(function(b) { b.className = 'priority-btn'; });
              btn.classList.add(level === 'high' ? 'active-high' : level === 'medium' ? 'active-medium' : 'active-low');
              syncPriorityInputs();
            };
            btns.appendChild(btn);
          });
          row.appendChild(btns);
        }
        dynamicList.appendChild(row);
      });
      syncPriorityInputs();
    }

    function syncPriorityInputs() {
      // Encode priorities/inclusion as hidden input for form submission
      var existing = document.getElementById('member_priorities_input');
      if (existing) existing.remove();
      var inp = document.createElement('input');
      inp.type = 'hidden'; inp.name = 'member_priorities'; inp.id = 'member_priorities_input';
      var parts = [];
      if (dynamicMode === 'collective') {
        // Excluded members get weight=0; included members get weight=1 (default)
        for (var uid in memberIncluded) {
          parts.push(uid + ':' + (memberIncluded[uid] ? 1 : 0));
        }
      } else {
        for (var uid in memberPriorities) {
          var w = memberPriorities[uid] === 'high' ? 3 : memberPriorities[uid] === 'medium' ? 2 : 1;
          parts.push(uid + ':' + w);
        }
      }
      inp.value = parts.join(',');
      if (dynamicList) dynamicList.appendChild(inp);
    }

    function toggleMode() {
      var isTeam = teamSel ? !!teamSel.value : {{ is_group is defined and is_group and "true" or "false" }};
      if (modeGroup) modeGroup.style.display = isTeam ? '' : 'none';
      togglePriority();
    }

    function togglePriority() {
      var isTeam = teamSel ? !!teamSel.value : {{ is_group is defined and is_group and "true" or "false" }};
      var mode = modeSel ? modeSel.value : 'round_robin';
      var showsMembers = isTeam && (mode === 'round_robin' || mode === 'collective');
      // Server-rendered card (editing)
      if (priorityCard) {
        priorityCard.style.display = showsMembers ? '' : 'none';
      }
      // Dynamic card (creation)
      if (dynamicCard) {
        if (showsMembers && teamSel) {
          renderDynamicPriority(teamSel.value, mode);
          dynamicCard.style.display = '';
        } else {
          dynamicCard.style.display = 'none';
        }
      }
    }

    if (teamSel) teamSel.addEventListener('change', toggleMode);
    if (modeSel) modeSel.addEventListener('change', togglePriority);

    // Auto-select first team when coming from ?preset=team or ?preset=internal
    {% if preset is defined and (preset == "team" or preset == "internal") %}
    if (teamSel && teamSel.options.length > 1 && !teamSel.value) {
      teamSel.selectedIndex = 1;
    }
    {% endif %}

    toggleMode();
  })();

  // Sync calendar checkboxes to hidden field
  document.querySelectorAll('.cal-check').forEach(cb => {
    cb.addEventListener('change', () => {
      const checked = [...document.querySelectorAll('.cal-check:checked')].map(c => c.value);
      document.getElementById('calendar_ids').value = checked.join(',');
    });
  });

  // Sync resource checkboxes to hidden field
  document.querySelectorAll('.res-check').forEach(cb => {
    cb.addEventListener('change', () => {
      const checked = [...document.querySelectorAll('.res-check:checked')].map(c => c.value);
      document.getElementById('resource_ids').value = checked.join(',');
    });
  });

  // Sync watcher team checkboxes to hidden field
  document.querySelectorAll('.watcher-team-check').forEach(cb => {
    cb.addEventListener('change', () => {
      const checked = [...document.querySelectorAll('.watcher-team-check:checked')].map(c => c.value);
      document.getElementById('watcher_team_ids').value = checked.join(',');
    });
  });

  // --- Dynamic hints for collapsible sections ---
  (function() {
    function $(id) { return document.getElementById(id); }
    function on(el, ev, fn) { if (el) el.addEventListener(ev, fn); }
    function fmtMinutes(m) {
      if (m >= 1440 && m % 1440 === 0) {
        var d = m / 1440;
        return sub(d === 1 ? ETF_I18N.fmtDayOne : ETF_I18N.fmtDayOther, d);
      }
      if (m >= 60 && m % 60 === 0) return sub(ETF_I18N.fmtHours, m / 60);
      return sub(ETF_I18N.fmtMinutes, m);
    }

    // --- Buffers & notice ---
    var bufBefore = $('buffer_before'), bufAfter = $('buffer_after');
    var noticeVal = $('min_notice_value'), noticeUnit = $('min_notice_unit');
    var bufHint = $('buffers-hint');
    function updateBufHint() {
      if (!bufHint) return;
      var parts = [];
      var bb = bufBefore ? parseInt(bufBefore.value, 10) || 0 : 0;
      var ba = bufAfter ? parseInt(bufAfter.value, 10) || 0 : 0;
      if (bb > 0 || ba > 0) {
        if (bb > 0 && ba > 0) parts.push(sub(ETF_I18N.hintBufferBoth, bb, ba));
        else if (bb > 0) parts.push(sub(ETF_I18N.hintBufferBefore, bb));
        else parts.push(sub(ETF_I18N.hintBufferAfter, ba));
      }
      var nv = noticeVal ? parseInt(noticeVal.value, 10) || 0 : 0;
      var nu = noticeUnit ? parseInt(noticeUnit.value, 10) : 1;
      var totalNotice = nv * nu;
      if (totalNotice > 0) parts.push(sub(ETF_I18N.hintNotice, fmtMinutes(totalNotice)));
      bufHint.textContent = parts.length > 0 ? parts.join(', ') : ETF_I18N.hintNoBuffers;
    }
    on(bufBefore, 'input', updateBufHint);
    on(bufAfter, 'input', updateBufHint);
    on(noticeVal, 'input', updateBufHint);
    on(noticeUnit, 'change', updateBufHint);
    updateBufHint();

    // --- Booking limits ---
    var firstSlot = $('first-slot-toggle'), freqToggle = $('freq-limit-toggle');
    var limitsHint = $('limits-hint');
    function updateLimitsHint() {
      if (!limitsHint) return;
      var parts = [];
      if (firstSlot && firstSlot.checked) parts.push(ETF_I18N.hintOneSlot);
      if (freqToggle && freqToggle.checked) {
        var rows = document.querySelectorAll('[data-freq-row]');
        var periodLabels = ETF_I18N.hintPeriodShort;
        rows.forEach(function(row) {
          var c = parseInt(row.querySelector('input[type=number]').value, 10) || 0;
          var p = row.querySelector('select').value;
          if (c > 0) parts.push(sub(ETF_I18N.hintMax, c) + (periodLabels[p] || ''));
        });
      }
      limitsHint.textContent = parts.length > 0 ? parts.join(', ') : ETF_I18N.hintNoLimits;
    }
    on(firstSlot, 'change', updateLimitsHint);
    on(freqToggle, 'change', function() { setTimeout(updateLimitsHint, 50); });
    // Also observe freq limit changes via mutation (rows are added/removed dynamically)
    var freqList = $('freq-limits-list');
    if (freqList) {
      new MutationObserver(function() { setTimeout(updateLimitsHint, 50); })
        .observe(freqList, { childList: true, subtree: true, attributes: true });
    }
    updateLimitsHint();

    // --- Booking options ---
    var confirmCb = document.querySelector('input[name="requires_confirmation"]');
    var guestsSel = $('max_additional_guests');
    var viewSel = $('default_calendar_view');
    var optionsHint = $('options-hint');
    function updateOptionsHint() {
      if (!optionsHint) return;
      var parts = [];
      if (confirmCb && confirmCb.checked) parts.push(ETF_I18N.hintConfirmationRequired);
      else parts.push(ETF_I18N.hintAutoConfirmed);
      var g = guestsSel ? parseInt(guestsSel.value, 10) || 0 : 0;
      if (g > 0) parts.push(sub(g === 1 ? ETF_I18N.hintExtraGuestsOne : ETF_I18N.hintExtraGuestsOther, g));
      var v = viewSel ? viewSel.value : 'month';
      if (v !== 'month') parts.push(sub(ETF_I18N.hintView, ETF_I18N.viewLabels[v] || v));
      optionsHint.textContent = parts.join(', ');
    }
    on(confirmCb, 'change', updateOptionsHint);
    on(guestsSel, 'change', updateOptionsHint);
    on(viewSel, 'change', updateOptionsHint);
    updateOptionsHint();

    // --- Access & notifications ---
    var visSel = $('visibility');
    var reminderSel = $('reminder_minutes');
    var accessHint = $('access-hint');
    var visLabels = ETF_I18N.visLabels;
    function updateAccessHint() {
      if (!accessHint) return;
      var vis = visSel ? visSel.value : 'public';
      var parts = [visLabels[vis] || vis];
      var rem = reminderSel ? parseInt(reminderSel.value, 10) || 0 : 0;
      if (rem > 0) parts.push(sub(ETF_I18N.hintReminder, fmtMinutes(rem)));
      else parts.push(ETF_I18N.hintNoReminder);
      accessHint.textContent = parts.join(', ');
    }
    on(visSel, 'change', updateAccessHint);
    on(reminderSel, 'change', updateAccessHint);
    updateAccessHint();
  })();

  // --- Per-day availability schedule ---
  (function() {
    var container = document.getElementById('schedule-container');
    var hidden = document.getElementById('avail_schedule');
    var dayNames = ETF_I18N.dayNames;
    var dayShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

    // Parse schedule from hidden field or build defaults
    var schedule = {}; // { dayNum: [{start:'09:00', end:'17:00'}, ...] }

    function parseSchedule(str) {
      var s = {};
      if (!str || !str.trim()) return s;
      str.trim().split(';').forEach(function(seg) {
        seg = seg.trim();
        if (!seg) return;
        var parts = seg.split(':');
        if (parts.length < 2) return;
        var day = parseInt(parts[0], 10);
        if (isNaN(day) || day < 0 || day > 6) return;
        var wins = parts.slice(1).join(':').split(',').map(function(w) {
          var t = w.trim().split('-');
          return t.length === 2 && t[0] && t[1] ? { start: t[0].trim(), end: t[1].trim() } : null;
        }).filter(Boolean);
        if (wins.length) s[day] = wins;
      });
      return s;
    }

    function serializeSchedule() {
      var parts = [];
      for (var d = 0; d <= 6; d++) {
        if (schedule[d] && schedule[d].length) {
          var ws = schedule[d].map(function(w) { return w.start + '-' + w.end; }).join(',');
          parts.push(d + ':' + ws);
        }
      }
      hidden.value = parts.join(';');
      updateSchedulingHint();
    }

    function updateSchedulingHint() {
      var hint = document.getElementById('scheduling-hint');
      if (!hint) return;
      var dayShort = [{{ t('slots-weekday-sun') | tojson }}, {{ t('slots-weekday-mon') | tojson }}, {{ t('slots-weekday-tue') | tojson }}, {{ t('slots-weekday-wed') | tojson }}, {{ t('slots-weekday-thu') | tojson }}, {{ t('slots-weekday-fri') | tojson }}, {{ t('slots-weekday-sat') | tojson }}];
      var enabledDays = [];
      for (var d = 0; d <= 6; d++) { if (schedule[d] && schedule[d].length) enabledDays.push(d); }
      var dayStr = '';
      if (enabledDays.length === 0) {
        dayStr = {{ t('etf-hint-no-days') | tojson }};
      } else if (enabledDays.length === 7) {
        dayStr = {{ t('etf-hint-every-day') | tojson }};
      } else if (enabledDays.length === 5 && enabledDays.join(',') === '1,2,3,4,5') {
        dayStr = {{ t('slots-weekday-mon') | tojson }} + '\u2013' + {{ t('slots-weekday-fri') | tojson }};
      } else {
        dayStr = enabledDays.map(function(d) { return dayShort[d]; }).join(', ');
      }
      // Find common time window if all days share the same single window
      var commonWindow = '';
      var allSame = enabledDays.length > 0;
      if (allSame) {
        var first = schedule[enabledDays[0]];
        if (first.length === 1) {
          for (var i = 1; i < enabledDays.length; i++) {
            var w = schedule[enabledDays[i]];
            if (w.length !== 1 || w[0].start !== first[0].start || w[0].end !== first[0].end) { allSame = false; break; }
          }
          if (allSame) commonWindow = ' ' + first[0].start + '\u2013' + first[0].end;
        } else { allSame = false; }
      }
      hint.textContent = dayStr + commonWindow;
    }

    function timeSelectHtml(cls, val) {
      var opts = '';
      for (var h = 0; h < 24; h++) {
        for (var m = 0; m < 60; m += 30) {
          var t = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m;
          opts += '<option value="' + t + '"' + (t === val ? ' selected' : '') + '>' + t + '</option>';
        }
      }
      return '<select class="' + cls + '" style="padding:0.4rem 0.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:inherit;font-size:0.85rem;min-width:90px;">' + opts + '</select>';
    }

    function renderSchedule() {
      container.innerHTML = '';
      for (var d = 0; d <= 6; d++) {
        var enabled = !!schedule[d];
        var dayRow = document.createElement('div');
        dayRow.style.cssText = 'display:flex;align-items:flex-start;gap:0.75rem;padding:0.5rem 0;' + (d < 6 ? 'border-bottom:1px solid var(--border);' : '');

        // Toggle
        var toggle = document.createElement('input');
        toggle.type = 'checkbox';
        toggle.checked = enabled;
        toggle.style.cssText = 'accent-color:var(--accent);width:1rem;height:1rem;margin-top:0.3rem;cursor:pointer;flex-shrink:0;';
        toggle.dataset.day = d;
        toggle.addEventListener('change', (function(day) {
          return function() {
            if (this.checked) {
              schedule[day] = [{ start: '09:00', end: '17:00' }];
            } else {
              delete schedule[day];
            }
            renderSchedule();
            serializeSchedule();
          };
        })(d));
        dayRow.appendChild(toggle);

        // Day name
        var label = document.createElement('div');
        label.style.cssText = 'width:80px;font-size:0.875rem;font-weight:500;padding-top:0.25rem;flex-shrink:0;' + (!enabled ? 'color:var(--text-muted);' : '');
        label.textContent = dayShort[d];
        dayRow.appendChild(label);

        // Windows container
        var winsDiv = document.createElement('div');
        winsDiv.style.cssText = 'flex:1;display:flex;flex-direction:column;gap:0.375rem;min-width:0;';

        if (enabled) {
          schedule[d].forEach(function(w, wi) {
            var winRow = document.createElement('div');
            winRow.style.cssText = 'display:flex;align-items:center;gap:0.375rem;flex-wrap:wrap;';
            winRow.innerHTML =
              timeSelectHtml('tw-s', w.start) +
              '<span style="color:var(--text-muted);font-size:0.8rem;">–</span>' +
              timeSelectHtml('tw-e', w.end);

            // Wire up change events
            winRow.querySelector('.tw-s').addEventListener('change', (function(day, idx) {
              return function() { schedule[day][idx].start = this.value; serializeSchedule(); };
            })(d, wi));
            winRow.querySelector('.tw-e').addEventListener('change', (function(day, idx) {
              return function() { schedule[day][idx].end = this.value; serializeSchedule(); };
            })(d, wi));

            // Add button (only on last window)
            if (wi === schedule[d].length - 1) {
              var addBtn = document.createElement('button');
              addBtn.type = 'button';
              addBtn.textContent = '+';
              addBtn.title = {{ t('settings-add-window') | tojson }};
              addBtn.style.cssText = 'padding:0.2rem 0.5rem;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text-muted);cursor:pointer;font-size:0.85rem;line-height:1;';
              addBtn.addEventListener('click', (function(day) {
                return function() {
                  schedule[day].push({ start: '09:00', end: '17:00' });
                  renderSchedule();
                  serializeSchedule();
                };
              })(d));
              winRow.appendChild(addBtn);
            }

            // Remove button (only if more than one window)
            if (schedule[d].length > 1) {
              var rmBtn = document.createElement('button');
              rmBtn.type = 'button';
              rmBtn.innerHTML = '&times;';
              rmBtn.title = {{ t('settings-remove-window') | tojson }};
              rmBtn.style.cssText = 'padding:0.2rem 0.4rem;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:1rem;line-height:1;';
              rmBtn.addEventListener('click', (function(day, idx) {
                return function() {
                  schedule[day].splice(idx, 1);
                  renderSchedule();
                  serializeSchedule();
                };
              })(d, wi));
              winRow.appendChild(rmBtn);
            }

            winsDiv.appendChild(winRow);
          });
        }

        dayRow.appendChild(winsDiv);
        container.appendChild(dayRow);
      }
    }

    // "Copy to all days" button
    document.getElementById('copy-to-all-btn').addEventListener('click', function() {
      // Find first enabled day
      var source = null;
      for (var d = 0; d <= 6; d++) {
        if (schedule[d] && schedule[d].length) { source = d; break; }
      }
      if (source === null) return;
      var windows = JSON.parse(JSON.stringify(schedule[source]));
      for (var d = 0; d <= 6; d++) {
        if (schedule[d]) {
          schedule[d] = JSON.parse(JSON.stringify(windows));
        }
      }
      renderSchedule();
      serializeSchedule();
      var btn = document.getElementById('copy-to-all-btn');
      btn.textContent = {{ t('settings-copied') | tojson }};
      btn.style.color = 'var(--success)';
      btn.style.borderColor = 'var(--success)';
      setTimeout(function() { btn.textContent = {{ t('settings-copy-to-all') | tojson }}; btn.style.color = ''; btn.style.borderColor = ''; }, 1500);
    });

    // "Reset to my default" button: fetch the user's profile-default
    // availability and rehydrate the editor from it.
    document.getElementById('reset-to-default-btn').addEventListener('click', function() {
      var btn = this;
      var original = btn.textContent;
      btn.disabled = true;
      btn.textContent = {{ t('etf-js-loading') | tojson }};
      fetch('/dashboard/availability/default', { headers: { 'Accept': 'application/json' } })
        .then(function(r) { return r.json(); })
        .then(function(data) {
          var parsed = parseSchedule(data.schedule || '');
          // Empty profile schedule means the user has no defaults; treat
          // that as a no-op to avoid wiping the form silently.
          if (!Object.keys(parsed).length) {
            btn.textContent = {{ t('etf-js-no-default') | tojson }};
            setTimeout(function() { btn.textContent = original; btn.disabled = false; }, 1500);
            return;
          }
          schedule = parsed;
          renderSchedule();
          serializeSchedule();
          btn.textContent = {{ t('etf-js-reset-done') | tojson }};
          btn.style.color = 'var(--success)';
          btn.style.borderColor = 'var(--success)';
          setTimeout(function() {
            btn.textContent = original;
            btn.style.color = '';
            btn.style.borderColor = '';
            btn.disabled = false;
          }, 1500);
        })
        .catch(function() {
          btn.textContent = {{ t('etf-js-error') | tojson }};
          setTimeout(function() { btn.textContent = original; btn.disabled = false; }, 1500);
        });
    });

    // Initialize from saved schedule or legacy format
    var savedSchedule = hidden.value.trim();
    if (savedSchedule) {
      schedule = parseSchedule(savedSchedule);
    }
    // Fallback: if empty, default Mon-Fri 09:00-17:00
    if (!Object.keys(schedule).length) {
      for (var d = 1; d <= 5; d++) {
        schedule[d] = [{ start: '09:00', end: '17:00' }];
      }
    }
    renderSchedule();
    serializeSchedule();

  })();

  // --- Minimum notice with unit selector ---
  (function() {
    const valueEl = document.getElementById('min_notice_value');
    const unitEl = document.getElementById('min_notice_unit');
    const hiddenEl = document.getElementById('min_notice_min');
    const totalMin = parseInt(hiddenEl.value, 10) || 0;

    if (totalMin > 0 && totalMin % 1440 === 0) {
      unitEl.value = '1440';
      valueEl.value = totalMin / 1440;
    } else if (totalMin > 0 && totalMin % 60 === 0) {
      unitEl.value = '60';
      valueEl.value = totalMin / 60;
    } else {
      unitEl.value = '1';
      valueEl.value = totalMin;
    }

    function sync() {
      const v = parseInt(valueEl.value, 10) || 0;
      const u = parseInt(unitEl.value, 10);
      hiddenEl.value = v * u;
    }
    valueEl.addEventListener('input', sync);
    unitEl.addEventListener('change', sync);
  })();

  // --- First slot only toggle styling ---
  (function() {
    const toggle = document.getElementById('first-slot-toggle');
    const track = document.getElementById('first-slot-track');
    const knob = document.getElementById('first-slot-knob');
    if (!toggle || !track || !knob) return;
    function updateStyle() {
      if (toggle.checked) {
        track.style.background = 'var(--accent, #6366f1)';
        knob.style.transform = 'translateX(20px)';
      } else {
        track.style.background = '#71717a';
        knob.style.transform = 'translateX(0)';
      }
    }
    updateStyle();
    toggle.addEventListener('change', updateStyle);
  })();

  // --- Booking frequency limits ---
  (function() {
    const toggle = document.getElementById('freq-limit-toggle');
    const container = document.getElementById('freq-limits-container');
    const list = document.getElementById('freq-limits-list');
    const addBtn = document.getElementById('add-freq-limit');
    const hidden = document.getElementById('frequency_limits');
    const track = document.getElementById('freq-toggle-track');
    const knob = document.getElementById('freq-toggle-knob');
    const periods = ['day', 'week', 'month', 'year'];
    const periodLabels = ETF_I18N.periodLabels;

    function updateToggleStyle() {
      if (toggle.checked) {
        track.style.background = 'var(--accent)';
        knob.style.transform = 'translateX(20px)';
      } else {
        track.style.background = '#71717a';
        knob.style.transform = 'translateX(0)';
      }
    }

    function updateAddBtn() {
      const used = list.querySelectorAll('select').length;
      addBtn.style.display = used >= periods.length ? 'none' : '';
    }

    // Per-member checkbox only makes sense on team event types. Mirrors the
    // isTeam detection used by the scheduling-mode block below.
    function isTeamSelected() {
      var sel = document.getElementById('team_id');
      if (sel) return !!sel.value;
      return {{ is_group is defined and is_group and "true" or "false" }};
    }

    function serialize() {
      if (!toggle.checked) { hidden.value = ''; return; }
      const rows = list.querySelectorAll('[data-freq-row]');
      const parts = [];
      const team = isTeamSelected();
      rows.forEach(function(row) {
        const count = parseInt(row.querySelector('input[type=number]').value, 10) || 0;
        const period = row.querySelector('select').value;
        const perMember = team && row.querySelector('[data-per-member]').checked;
        if (count > 0) {
          parts.push(count + ':' + period + (perMember ? ':m' : ''));
        }
      });
      hidden.value = parts.join(',');
      updateAddBtn();
    }

    function applyPerMemberVisibility() {
      const team = isTeamSelected();
      list.querySelectorAll('[data-per-member-wrap]').forEach(function(el) {
        el.style.display = team ? '' : 'none';
      });
      if (!team) {
        // Drop any stale per-member state so we don't quietly save it as a
        // hidden flag on a personal event type.
        list.querySelectorAll('[data-per-member]').forEach(function(cb) {
          cb.checked = false;
        });
      }
      serialize();
    }

    function createRow(count, period, perMember) {
      const row = document.createElement('div');
      row.setAttribute('data-freq-row', '1');
      row.style.cssText = 'display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;';

      const input = document.createElement('input');
      input.type = 'number';
      input.min = '1';
      input.max = '999';
      input.value = count || 1;
      input.style.cssText = 'width: 70px; padding: 0.5rem 0.625rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; background: var(--surface); color: var(--text); font-family: inherit;';
      input.addEventListener('input', serialize);

      const select = document.createElement('select');
      select.style.cssText = 'padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; background: var(--surface); color: var(--text); font-family: inherit;';
      periods.forEach(function(p) {
        const opt = document.createElement('option');
        opt.value = p;
        opt.textContent = periodLabels[p];
        if (p === period) opt.selected = true;
        select.appendChild(opt);
      });
      select.addEventListener('change', serialize);

      const memberWrap = document.createElement('label');
      memberWrap.setAttribute('data-per-member-wrap', '1');
      memberWrap.style.cssText = 'display: ' + (isTeamSelected() ? 'inline-flex' : 'none') + '; align-items: center; gap: 0.375rem; font-size: 0.85rem; color: var(--text-muted); cursor: pointer;';
      const memberCheck = document.createElement('input');
      memberCheck.type = 'checkbox';
      memberCheck.setAttribute('data-per-member', '1');
      memberCheck.checked = !!perMember;
      memberCheck.style.cssText = 'accent-color: var(--accent); width: 0.95rem; height: 0.95rem;';
      memberCheck.addEventListener('change', serialize);
      memberWrap.appendChild(memberCheck);
      memberWrap.appendChild(document.createTextNode(' Per team member'));

      const del = document.createElement('button');
      del.type = 'button';
      del.textContent = '\u{1F5D1}';
      del.title = {{ t('etf-js-remove-limit') | tojson }};
      del.style.cssText = 'padding: 0.375rem 0.5rem; border: none; background: none; cursor: pointer; font-size: 1rem; color: var(--text-muted); opacity: 0.6; transition: opacity 0.15s; margin-left: auto;';
      del.addEventListener('mouseenter', function() { del.style.opacity = '1'; });
      del.addEventListener('mouseleave', function() { del.style.opacity = '0.6'; });
      del.addEventListener('click', function() { row.remove(); serialize(); updateAddBtn(); });

      row.appendChild(input);
      row.appendChild(select);
      row.appendChild(memberWrap);
      row.appendChild(del);
      list.appendChild(row);
    }

    // Initialize from saved value (only enable toggle if there are saved limits)
    const saved = hidden.value;
    if (saved && saved.trim()) {
      toggle.checked = true;
      container.style.display = 'block';
      saved.split(',').forEach(function(part) {
        const s = part.split(':');
        if (s.length >= 2) {
          const perMember = s.length >= 3 && s[2] === 'm';
          createRow(parseInt(s[0], 10), s[1], perMember);
        }
      });
      updateAddBtn();
    } else {
      // Explicitly reset — browser may restore checkbox state on back/forward navigation
      toggle.checked = false;
      container.style.display = 'none';
      list.innerHTML = '';
      hidden.value = '';
    }
    updateToggleStyle();

    toggle.addEventListener('change', function() {
      updateToggleStyle();
      if (toggle.checked) {
        container.style.display = 'block';
        if (list.children.length === 0) createRow(1, 'day', false);
        serialize();
      } else {
        container.style.display = 'none';
        list.innerHTML = '';
        serialize();
      }
    });

    addBtn.addEventListener('click', function() {
      // Find first unused period
      const used = [];
      list.querySelectorAll('select').forEach(function(s) { used.push(s.value); });
      var next = periods.find(function(p) { return used.indexOf(p) === -1; });
      if (!next) return;
      createRow(1, next, false);
      serialize();
    });

    // Re-evaluate per-member visibility if the user switches team during
    // creation. On edit forms there's no team selector, so this is a no-op.
    var teamSelEl = document.getElementById('team_id');
    if (teamSelEl) {
      teamSelEl.addEventListener('change', applyPerMemberVisibility);
    }
  })();

  // Auto-generate slug from title
  {% if not editing %}
  const titleEl = document.getElementById('title');
  const slugEl = document.getElementById('slug');
  let slugManuallyEdited = slugEl.value !== '';
  slugEl.addEventListener('input', () => { slugManuallyEdited = true; });
  titleEl.addEventListener('input', () => {
    if (!slugManuallyEdited) {
      slugEl.value = titleEl.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
    }
  });
  {% endif %}

  // --- Dynamic Group Link URL builder with autocomplete ---
  (function() {
    var searchInput = document.getElementById('dg-search-input');
    if (!searchInput) return;
    var resultsDiv = document.getElementById('dg-search-results');
    var membersDiv = document.getElementById('dg-members');
    var urlBox = document.getElementById('dg-url-box');
    var urlInput = document.getElementById('dg-url');
    var copyBtn = document.getElementById('dg-copy-btn');
    var owner = '{{ owner_username }}';
    var slug = '{{ form_slug }}';
    var selected = []; // [{username, name, id, hasAvatar, initials}]

    var allUsers = [
      {% for u in dg_eligible_users %}
      { id: '{{ u.id }}', username: '{{ u.username }}', name: '{{ u.name }}', hasAvatar: {{ u.has_avatar|lower }}, initials: '{{ u.initials }}' }{% if not loop.last %},{% endif %}
      {% endfor %}
    ];

    function updateUrl() {
      if (selected.length === 0) { urlBox.style.display = 'none'; return; }
      var combined = [owner].concat(selected.map(function(u) { return u.username; })).join('+');
      var base = location.origin || (location.protocol + '//' + location.host);
      urlInput.value = base + '/u/' + combined + '/' + slug;
      urlBox.style.display = '';
    }

    function renderMembers() {
      membersDiv.innerHTML = '';
      selected.forEach(function(u, i) {
        var tag = document.createElement('span');
        tag.style.cssText = 'display:inline-flex;align-items:center;gap:0.375rem;padding:0.25rem 0.5rem;background:var(--surface-hover);border-radius:var(--radius);font-size:0.8rem;';
        var av = document.createElement('span');
        av.style.cssText = 'width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:0.5rem;font-weight:600;flex-shrink:0;overflow:hidden;';
        if (u.hasAvatar) {
          av.innerHTML = '<img src="/avatar/' + u.id + '" style="width:100%;height:100%;object-fit:cover;">';
        } else {
          av.textContent = u.initials;
        }
        tag.appendChild(av);
        var nameSpan = document.createElement('span');
        nameSpan.textContent = u.name;
        tag.appendChild(nameSpan);
        var rm = document.createElement('button');
        rm.type = 'button';
        rm.textContent = '\u00d7';
        rm.style.cssText = 'background:none;border:none;color:var(--error-text);cursor:pointer;font-size:1rem;padding:0;line-height:1;margin-left:0.125rem;';
        rm.onclick = function() { selected.splice(i, 1); renderMembers(); updateUrl(); };
        tag.appendChild(rm);
        membersDiv.appendChild(tag);
      });
    }

    function renderResults(query) {
      var q = (query || '').toLowerCase();
      var selectedIds = {};
      selected.forEach(function(u) { selectedIds[u.id] = true; });
      var matches = allUsers.filter(function(u) {
        if (selectedIds[u.id]) return false;
        if (q === '') return true;
        return u.name.toLowerCase().indexOf(q) !== -1 || u.username.toLowerCase().indexOf(q) !== -1;
      }).slice(0, 8);

      if (matches.length === 0) {
        resultsDiv.style.display = 'none';
        return;
      }
      resultsDiv.innerHTML = '';
      matches.forEach(function(u) {
        var row = document.createElement('div');
        row.style.cssText = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;cursor:pointer;';
        row.onmouseenter = function() { row.style.background = 'var(--surface-hover)'; };
        row.onmouseleave = function() { row.style.background = ''; };
        var av = document.createElement('span');
        av.style.cssText = 'width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:0.55rem;font-weight:600;flex-shrink:0;overflow:hidden;';
        if (u.hasAvatar) {
          av.innerHTML = '<img src="/avatar/' + u.id + '" style="width:100%;height:100%;object-fit:cover;">';
        } else {
          av.textContent = u.initials;
        }
        row.appendChild(av);
        var info = document.createElement('div');
        var nameDiv = document.createElement('div');
        nameDiv.style.fontSize = '0.85rem';
        nameDiv.textContent = u.name;
        var usernameDiv = document.createElement('div');
        usernameDiv.style.cssText = 'font-size:0.75rem;color:var(--text-muted);';
        usernameDiv.textContent = '@' + u.username;
        info.appendChild(nameDiv);
        info.appendChild(usernameDiv);
        row.appendChild(info);
        row.onclick = function() {
          selected.push(u);
          searchInput.value = '';
          resultsDiv.style.display = 'none';
          renderMembers();
          updateUrl();
        };
        resultsDiv.appendChild(row);
      });
      resultsDiv.style.display = '';
    }

    searchInput.addEventListener('input', function() { renderResults(this.value); });
    searchInput.addEventListener('focus', function() { renderResults(this.value); });
    document.addEventListener('click', function(e) {
      if (!searchInput.contains(e.target) && !resultsDiv.contains(e.target)) {
        resultsDiv.style.display = 'none';
      }
    });

    copyBtn.onclick = function() {
      urlInput.select();
      navigator.clipboard.writeText(urlInput.value).then(function() {
        copyBtn.textContent = {{ t('settings-copied') | tojson }};
        setTimeout(function() { copyBtn.textContent = {{ t('settings-copy') | tojson }}; }, 2000);
      });
    };
  })();
</script>
{% endblock dashboard_content %}