{{--
    One row of the Edit Timeframe modal. $slot is null for the blank row
    template. Field names are written as slots[][field] placeholders and
    renumbered by index in row order before every submit (index.blade.php).
--}}
@php
    $locked = $slot && $slot->schedules_count > 0;
@endphp
<li class="tf-row" data-tf-row>
    <input type="hidden" data-field="id" value="{{ $slot?->id }}">

    <input type="time" class="form-control form-control-sm tf-time" data-field="start_time" aria-label="Start time" required
        value="{{ $slot ? \Carbon\Carbon::parse($slot->start_time)->format('H:i') : '' }}">
    <span class="tf-dash">–</span>
    <input type="time" class="form-control form-control-sm tf-time" data-field="end_time" aria-label="End time" required
        value="{{ $slot ? \Carbon\Carbon::parse($slot->end_time)->format('H:i') : '' }}">

    <div class="tf-label-wrap">
        <input type="text" class="form-control form-control-sm" data-field="label" maxlength="50" placeholder="Label (optional)" aria-label="Label"
            value="{{ $slot?->label }}">
        <span class="tf-duration" data-tf-duration></span>
    </div>

    <label class="tf-break" title="Break">
        <input type="hidden" data-field="is_break" value="0">
        <input type="checkbox" data-field="is_break" value="1" @checked($slot?->is_break)>
        <i class="bi bi-cup-hot"></i>
        <span class="visually-hidden">Break</span>
    </label>

    <div class="form-check form-switch tf-active m-0" title="Active">
        <input type="hidden" data-field="is_active" value="0">
        <input class="form-check-input" type="checkbox" role="switch" data-field="is_active" value="1" aria-label="Active" @checked($slot ? $slot->is_active : true)>
    </div>

    <div class="tf-actions">
        <button type="button" class="icon-btn" data-tf-move="up" title="Move up" aria-label="Move up"><i class="bi bi-arrow-up"></i></button>
        <button type="button" class="icon-btn" data-tf-move="down" title="Move down" aria-label="Move down"><i class="bi bi-arrow-down"></i></button>
        <button type="button" class="icon-btn danger" data-tf-remove
            title="{{ $locked ? 'Used in schedules - cannot be removed' : 'Remove' }}" aria-label="Remove slot" @disabled($locked)>
            <i class="bi {{ $locked ? 'bi-lock' : 'bi-trash' }}"></i>
        </button>
    </div>

    <div class="tf-error" data-tf-error hidden></div>
</li>