@props([
    'field' => null,
    'profileEnum' => null
])

@php
    $fieldEnum = ProductFields::tryFrom($field['name']);
@endphp

@if($fieldEnum)
{{-- {{ dd($fieldEnum->label()); }} --}}
<div class="row form-group">
    <label class="form-label col-sm-3" for="{{ $fieldEnum }}">
        {{ $fieldEnum->label() }}
    </label>
    <div class="col-sm-9">
        @if(! count(($field['data']['bounds'] ?? [])))
        <div class="input-group">
            <x-fields.field-input :field="$fieldEnum" model="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.static" style="flex: 100"/>
            @if($fieldEnum->bounds())
            <div class="input-group-append">
                <x-ui.button click="addBound('{{ $fieldEnum }}')" icon="opt-alt" color="white" class="btn-outline-lighter btn-standard btn-sm text-muted" />
                {{-- <button
                    class="btn btn-icon btn-outline-lighter dropdown-toggle dropdown-toggle-split btn-standard" 
                    data-bs-toggle="dropdown"> 
                        <x-ui.nicon name="chevron-down"/>
                        <span class="visually-hidden">Actions</span> 
                </button>
                <div class="dropdown-menu">
                    <ul class="link-list-opt no-bdr">
                        <li><a wire:click="addBound('{{ $fieldEnum }}')">@lang('Add bound')</a></li>
                        <li><a wire:click="removeField('{{ $fieldEnum }}')">@lang('Remove field')</a></li>
                    </ul>
                </div> --}}
            </div>
            @endif
        </div>
        @endif

        @if($fieldEnum->value === 'max_mandate_percent')
            <x-ui.check model="fields.{{ $profileEnum }}.{{ $fieldEnum }}.meta.fixed_mandate_percent" check-label="Le % mandat est forfaitaire" />
        @endif

        @foreach(($field['data']['bounds'] ?? []) as $i => $bound)
        <div class="form-group form-xs d-flex gx-1 mb-1">
            <x-fields.field-input :field="$fieldEnum" model="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.val" class="w-150px"/>
            <x-ui.nicon name="equal-sm" class="align-self-center"/>
            <x-ui.select model="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.var" :options="$fieldEnum->bounds() ?? []" form-group-class="w-150px" placeholder="Champs"/>
            <x-ui.select model="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.oplb" :options="['gte' => '>=', 'gt' => '>']" placeholder="Op."/>
            <x-ui.input model="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.lb" mask="currency" class="w-120px"/>
            <x-ui.select model="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.opub" :options="['lt' => '<', 'lte' => '<=']" placeholder="Op."/>
            <x-ui.input model="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.ub" mask="currency" class="w-100px" />
            <x-ui.button icon="minus-sm" click="removeBound('{{ $fieldEnum }}', {{ $i }})" color="lighter" class="btn-xs"/>
        </div>
        @endforeach
        @if(count(($field['data']['bounds'] ?? [])))
            <x-ui.button icon="plus-sm" click="addBound('{{ $fieldEnum }}')" color="lighter" class="btn-xs"/>
        @endif
    </div>
</div>
@endif