@props([
	'action' => route('frontend.search.vin.search'),
	'defaultOpen' => false,
])

<div
	class="card rounded-0 mb-4"
	x-data="{ busy:false }"
>
	<div class="card-header">
		<h6 class="mb-0">
			<span class="fw-bold">
				VIN番号
			</span>
		</h6>
	</div>
	<div class="card-body">
		<form
			class=""
			method="POST"
			action="{{ $action }}"
			@submit="busy=true"
			novalidate
		>
			@csrf
			<div class="input-group input-group-sm">
				<input
					class="form-control rounded-0 @error('vin') is-invalid @enderror"
					type="text"
					name="vin"
					value=""
					placeholder="例：1HGCM82633A004352"
					required
					disabled
				>
				<button
					type="submit"
					class="btn btn-primary rounded-0 disabled"
					wire:loading.attr="disabled"
					wire:target="search"
					:disabled="busy"
				>
					<span
						class="fw-bold"
						wire:loading.remove wire:target="search"
					>
						検索
					</span>
					<span class="spinner-border spinner-border-sm me-1" wire:loading wire:target="search"></span>
				</button>
			</div>
		</form>
	</div>
</div>