@props([
    'name',
    'value' => [],
    'label' => '',
    'class' => '',
    'errorName' => null,
    'placeholder' => null,
    'star' => false,
    'id' => null,
])
@php
    $errorName ??= dotted_string($name);
    $splitAttributes = implode(' ', explode(' ', $attributes));
    $invalidClass = $errors->has($errorName) ? 'is-invalid' : '';
    $defaultPlaceHolder = $placeholder ?? __('Select') . ' ' . $label;
    $class = "{$invalidClass} form-control {$class}";
$values = is_array($value) ? implode(', ', $value) : $value;
    $id = $id ?? dotted_string($name);
@endphp

<div class="col-sm-12">
    <div class="form-group row no-gutters">
        <label class="col-sm-12 col-form-label text-start {{ $errors->has($errorName) ? 'text-danger' : '' }}">
            {{ $label }}
            @if ($star)
                <i class="fa fa-asterisk fa-xs errorMessage" aria-hidden="true"></i>
            @endif
        </label>
        <div class="col-sm-12">
            <input id="{{ $id }}" {!! $splitAttributes !!} data-placeholder="{{ $defaultPlaceHolder }}"
                   name="{{ $name }}" class="{{ $class }}" value="{{ $values }}">
            </input>
            @error($errorName)
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
            <span class="errorMessage error_{{ $errorName }}"></span>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        var tagInput = document.querySelector("#{{ $id }}");
        new Tagify(tagInput);
    </script>
@endpush