@props([
    'label' => null,
    'direction' => '',
    'outlined' => null,
    'forid' => '',
    'wireignore' => false,
    'rowWidth' => 9,
    'formGroupClass' => null,
    'withAlpineInit' => true,
])

@php
    $isRow = $direction === 'row';
    $labelClass = $isRow? ['col-sm-' . (12 - $rowWidth)] : [];
    $labelClass[] = $outlined? 'form-label-outlined' : null;
@endphp

<div
    {{ 
        $attributes
            ->class([
                'form-group',
                'row' => $isRow,
                $formGroupClass
            ])
            ->merge([
                'wire:ignore' => $wireignore
            ])
    }}    
>

    @if(!$outlined)
        <x-ui.label :label="$label" :class="implode(' ', $labelClass)" for="{{ $forid }}"/>
    @endif

    <div 
        @class([
            'col-sm-'.$rowWidth => $isRow, 
            'form-control-wrap'
        ])
        @if($withAlpineInit)
            x-data="{ 
                focus: false, 
                input: $refs.input?.value,
            }"
            x-on:mousedown.away="focus = false"
            x-bind:class="this.input || this.focus? 'focused' : ''"
        @endif
    >
        {{ $slot ?? '' }}

        @if($outlined)
            <x-ui.label :label="$label" :class="implode(' ', $labelClass)" for="{{ $forid }}"/>
        @endif
    </div>
</div>