@props([])

<div class="card border shadow-none mb-4">
    <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-tool ti-sm"></i></span>
            <h6 class="mb-0 fw-bold text-uppercase text-primary">{{ __('Loom accessories & feeders') }}</h6>
        </div>

        <div class="row g-4">
            <div class="col-md-4">
                <label class="form-label" for="la_n_frames">{{ __('Quantity frames') }}</label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-frame"></i></span>
                    <input type="text" id="la_n_frames" inputmode="decimal" maxlength="10" class="form-control"
                        wire:model.defer="form.loomAccessories.n_frames" placeholder="{{ __('e.g. 4') }}">
                </div>
                <small class="text-muted">{{ __('Only for CAM and Dobby movements') }}</small>
            </div>
            <div class="col-md-4">
                <label class="form-label" for="la_n_healds">{{ __('Quantity healds') }}</label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-grid-dots"></i></span>
                    <input type="text" id="la_n_healds" inputmode="decimal" maxlength="10" class="form-control"
                        wire:model.defer="form.loomAccessories.n_healds" placeholder="{{ __('e.g. 8') }}">
                </div>
                <small class="text-muted">{{ __('Only for CAM and Dobby movements') }}</small>
            </div>
            <div class="col-md-4">
                <label class="form-label" for="la_n_colors">{{ __('Quantity of colors') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-palette"></i></span>
                    <input type="text" id="la_n_colors" inputmode="decimal" maxlength="10" class="form-control @error('form.loomAccessories.n_colors') is-invalid @enderror"
                        wire:model.defer="form.loomAccessories.n_colors" placeholder="{{ __('e.g. 8') }}">
                </div>
                @error('form.loomAccessories.n_colors') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-4">
                <label class="form-label" for="la_n_weft">{{ __('Quantity weft-feeders') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-arrow-autofit-width"></i></span>
                    <input type="text" id="la_n_weft" inputmode="decimal" maxlength="10" class="form-control @error('form.loomAccessories.n_weft_feeders') is-invalid @enderror"
                        wire:model.defer="form.loomAccessories.n_weft_feeders" placeholder="{{ __('e.g. 4') }}">
                </div>
                @error('form.loomAccessories.n_weft_feeders') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-4">
                <label class="form-label" for="la_n_droppers">{{ __('Quantity droppers') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-droplet"></i></span>
                    <input type="text" id="la_n_droppers" inputmode="decimal" maxlength="10" class="form-control @error('form.loomAccessories.n_droppers') is-invalid @enderror"
                        wire:model.defer="form.loomAccessories.n_droppers" placeholder="{{ __('e.g. 8000') }}">
                </div>
                @error('form.loomAccessories.n_droppers') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
        </div>
    </div>
</div>