@props([])

<div class="card border shadow-none mb-4 border-start border-primary border-3">
    <div class="card-body">
        <div class="d-flex align-items-center gap-2 mb-4">
            <span class="badge bg-label-primary rounded-2 p-2 lh-1"><i class="ti tabler-settings-automation ti-sm"></i></span>
            <h6 class="mb-0 fw-bold text-uppercase text-primary">{{ __('CAM specifications') }}</h6>
        </div>

        <div class="row g-4">
            <div class="col-md-4">
                <label class="form-label" for="cam_model">{{ __('Cam model') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-settings-automation"></i></span>
                    <input type="text" id="cam_model" class="form-control @error('form.camDetails.cam_model') is-invalid @enderror"
                        wire:model.defer="form.camDetails.cam_model" placeholder="{{ __('e.g. Stäubli S2') }}">
                </div>
                @error('form.camDetails.cam_model') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-4">
                <label class="form-label" for="cam_total_levers">{{ __('Total number of levers on the loom') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-adjustments"></i></span>
                    <input type="text" id="cam_total_levers" inputmode="decimal" maxlength="10" class="form-control @error('form.camDetails.total_levers') is-invalid @enderror"
                        wire:model.defer="form.camDetails.total_levers" placeholder="{{ __('e.g. 16') }}">
                </div>
                @error('form.camDetails.total_levers') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-4">
                <label class="form-label" for="cam_levers_in_use">{{ __('Levers installed/in use on the loom') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-adjustments-check"></i></span>
                    <input type="text" id="cam_levers_in_use" inputmode="decimal" maxlength="10" class="form-control @error('form.camDetails.levers_in_use') is-invalid @enderror"
                        wire:model.defer="form.camDetails.levers_in_use" placeholder="{{ __('e.g. 12') }}">
                </div>
                @error('form.camDetails.levers_in_use') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
        </div>
    </div>
</div>