@props([
    'rule' => null,
    'modelPrefix' => null,
    'valuePrefix' => 'max_value',
])

<div x-data="{open: @entangle($modelPrefix.'.checked').defer}" class="d-flex align-items-center">
    <span x-text="open? '&check;' : ''" class="me-2"></span>
    <div>
        <x-ui.custom-switch 
            x-on:click="open = ! open"
            model="{{ $modelPrefix }}.checked" 
            :label="$rule->name" size="xs" 
            :no-control="true" 
        />
    </div>

    <div @class(['ms-2', 'd-none' =>  ! $rule->has_value]) x-show="open" x-cloak>
        <x-ui.input model="{{ $modelPrefix }}.{{ $valuePrefix }}" mask="integer" size="sm" placeholder="Total"/>
    </div>

    <div @class(['ms-1', 'd-none' =>  ! $rule->has_value_2]) x-show="open" x-cloak>
        <x-ui.input model="{{ $modelPrefix }}.{{ $valuePrefix }}_2" mask="integer" size="sm" 
            :placeholder="$rule->name === 'Impayé sur facture' ? 'Dont régularisés' : 'Dont crédit immo'"/>
    </div>
</div>