@if ($errors->any())
    <div class="row">
        <div class="col-md-12">
            <div class="mb-3">
                <div class="alert alert-primary" role="alert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="row">
    <div class="col-12 col-md-6">
        <div class="mb-3">
            <label class="col-form-label">Status <span class="text-danger">*</span></label>
            <input type="text" wire:model="form.status" class="form-control" placeholder="Enter Status">
            @error('form.status')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="col-12 col-md-6">
        <div class="mb-3">
            <label class="col-form-label">Colour <span class="text-danger">*</span></label>
            <select id="color" wire:model.change="form.color" class="form-select">
                <option value="" selected disabled hidden>Select Colour</option>
                @foreach ($colors as $code => $color)
                    <option value="{{ $code }}" class="text-{{$code}}"> {{ \Str::of($color)->title() }} </option>
                @endforeach
            </select>
            @error('form.color')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="col-12 col-md-6">
        <div class="mb-3">
            <label class="col-form-label">Enabled <span class="text-danger">*</span></label>
            <select id="enabled" wire:model.change="form.enabled" class="form-select">
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
            @error('form.enabled')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>
</div>