@props([
    'disabled' => false,
    'title' => '',
    'name' => $attributes->wire('model')->value() ?? '',
    'id' => '',
    'hint' => '',
    'isrequired' => false,
    'mb' => 'mb-3',
    'step' => 60,
])

@php
    $inputId = $id ?: $name;
    $inputClasses = 'kt-input cursor-pointer ps-10 [&::-webkit-calendar-picker-indicator]:hidden '.($errors->has($name) ? 'border-danger' : '');
@endphp

<div class="kt-form-item {{ $mb }} @error($name) has_error @enderror">
    @if($title !== '')
        <label
            for="{{ $inputId }}"
            class="kt-form-label {{ $attributes->has('required') || $isrequired ? 'required' : '' }}"
        >
            {{ $title }}
        </label>
    @endif

    <div class="relative">
        <input
            type="time"
            name="{{ $name }}"
            id="{{ $inputId }}"
            step="{{ $step }}"
            @if($isrequired) required @endif
            @disabled($disabled)
            @error($name) aria-invalid="true" @enderror
            x-on:click="if (typeof $el.showPicker === 'function') { $el.showPicker() }"
            {!! $attributes->merge(['class' => $inputClasses]) !!}
        />

        <span class="pointer-events-none absolute inset-y-0 start-3 flex items-center text-muted-foreground" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="9"></circle>
                <path d="M12 7v5l3 2"></path>
            </svg>
        </span>
    </div>

    @if($hint)
        <div class="kt-form-description">{{ $hint }}</div>
    @endif

    @error($name)
        <div class="kt-form-message JS_error has-error">
            {{ $message }}
        </div>
    @enderror

    <span class="JS_error text-danger has-error"></span>
</div>