{{! ── Driver selector (only in global scheduler context) ─────────────── }} {{#if this.hasManyDrivers}}

{{/if}} {{! ── Mode toggle ─────────────────────────────────────────────────────── }}

{{! ══════════════════════════════════════════════════════════════════════ }} {{! SINGLE SHIFT MODE }} {{! ══════════════════════════════════════════════════════════════════════ }} {{#unless this.isRecurring}}

{{t "scheduler.break-start"}} ({{t "common.optional"}})

{{t "scheduler.break-end"}} ({{t "common.optional"}})

</div>

{{! ══════════════════════════════════════════════════════════════════════ }}
            {{! RECURRING SCHEDULE MODE                                                }}
            {{! ══════════════════════════════════════════════════════════════════════ }}
            {{#if this.isRecurring}}

<div class="input-group">
                    <label>{{t "scheduler.schedule-name"}} <span class="text-gray-400">({{t "common.optional"}})</span></label>
                    <Input @value={{@options.templateName}} @type="text" placeholder={{t "scheduler.schedule-name-placeholder"}} class="w-full form-input" />
                </div>

{{! Day-of-week selector }}
                <div class="input-group">
                    <label>{{t "scheduler.working-days"}}</label>
                    <div class="flex gap-1.5 mt-1">
                        {{#each this.dayOptions as |day|}}
                            <button
                                type="button"
                                class="flex-1 py-2 rounded-md text-xs font-semibold border transition-colors
                                    {{if
                                        (this.isDaySelected day.code)
                                        'bg-indigo-600 border-indigo-600 text-white'
                                        'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-indigo-400'
                                    }}"
                                {{on "click" (fn this.toggleDay day.code)}}
                            >
                                {{day.label}}
                            </button>
                        {{/each}}
                    </div>
                </div>

{{! Shift time window }}
                <div class="grid grid-cols-2 gap-4">
                    <InputGroup @name={{t "scheduler.shift-start-time"}} @type="time" @value={{@options.shiftStartTime}} @onChange={{this.updateShiftStartTime}} />
                    <InputGroup @name={{t "scheduler.shift-end-time"}} @type="time" @value={{@options.shiftEndTime}} @onChange={{this.updateShiftEndTime}} />
                </div>

{{! Break window (optional) }}
                <div class="grid grid-cols-2 gap-4">
                    <InputGroup
                        @name={{concat (t "scheduler.break-start") " (" (t "common.optional") ")"}}
                        @type="time"
                        @value={{@options.breakStartTime}}
                        @onChange={{this.updateBreakStartTime}}
                    />
                    <InputGroup
                        @name={{concat (t "scheduler.break-end") " (" (t "common.optional") ")"}}
                        @type="time"
                        @value={{@options.breakEndTime}}
                        @onChange={{this.updateBreakEndTime}}
                    />
                </div>

{{! Optional date range }}
                <div class="grid grid-cols-2 gap-4">
                    <div class="input-group">
                        <label>{{t "scheduler.recurrence-start"}} <span class="text-gray-400">({{t "common.optional"}})</span></label>
                        <DateTimeInput
                            @value={{@options.recurrenceStartDate}}
                            @onChange={{this.updateRecurrenceStartDate}}
                            placeholder={{t "scheduler.select-date"}}
                            class="w-full form-input"
                        />
                    </div>
                    <div class="input-group">
                        <label>{{t "scheduler.recurrence-end"}} <span class="text-gray-400">({{t "common.optional"}})</span></label>
                        <DateTimeInput @value={{@options.recurrenceEndDate}} @onChange={{this.updateRecurrenceEndDate}} placeholder={{t "scheduler.select-date"}} class="w-full form-input" />
                    </div>
                </div>

{{! Live recurrence preview }}
                {{#if this.recurrenceSummary}}
                    <div class="rounded-lg bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-700 px-3 py-2">
                        <p class="text-indigo-700 dark:text-indigo-300 font-medium">
                            <FaIcon @icon="rotate" class="mr-1.5" />
                            {{this.recurrenceSummary}}
                        </p>
                    </div>
                {{/if}}

</div>
    </div>
</Modal::Default>