<?php /** @var \App\Models\Language $language */ ?>
<div class="languages-selector form-group level" x-data="{
    search: '',
    selected: @js((array) $selected),
    toggle(value){
        const i = this.selected.indexOf(value);
        i === -1 ? this.selected.push(value) : this.selected.splice(i,1);
    },
    valueSelect(value){
        return this.selected.includes(value);
    },
    get count(){ return this.selected.length; }
}">
    <div class="language-search">
        <i data-lucide="search"></i>
        <input type="text" x-model="search" placeholder="Search language" autocomplete="off">
        <button class="btn" type="button" x-show="search !== ''" @click="search = ''" x-cloak>
            <i data-lucide="x"></i>
        </button>
    </div>
    <div class="language-list" x-ref="languagesGroup" id="languages-group">
        @foreach( $languages as $language )
            <label class="language-item" x-show="'{{ strtolower($language->name) }}'.includes(search.toLowerCase())">
                <input type="checkbox" name="languages[]" value="{{ $language->id }}" x-model="selected" :value="{{ $language->id }}" {{ in_array($language->id, $selected) ? 'checked' : '' }}> {{ $language->name }}
            </label>
        @endforeach
    </div>
</div>
