@props([
    'name',
    'value' => '',
    'label' => null,
    'fontFamilyName' => null,
    'fontFamilyValue' => '',
])

<div class="google-font-selector"
     data-google-font-selector
     data-search-url="{{ route('admin.settings.google-fonts.search') }}"
     data-loading-text="{{ __('labels.loading_google_fonts') }}"
     data-error-text="{{ __('labels.google_fonts_catalog_unavailable') }}"
     data-empty-text="{{ __('labels.no_google_fonts_found') }}"
     data-help-text="{{ __('labels.google_font_search_hint') }}">
    @if ($label)
        <label class="form-label" for="{{ $name }}-search">{{ $label }}</label>
    @endif
    <div>
        <select class="form-select"
                id="{{ $name }}-search"
                name="{{ $name }}"
                placeholder="{{ __('labels.search_google_fonts') }}"
                data-google-font-search>
            @if ($value)
                <option value="{{ $value }}" selected>{{ $value }}</option>
            @endif
        </select>
        @if ($fontFamilyName)
            <input type="hidden" name="{{ $fontFamilyName }}" value="{{ $fontFamilyValue }}" data-google-font-stack>
        @endif
    </div>
    <div class="form-hint" data-google-font-status>{{ __('labels.google_font_search_hint') }}</div>
    <div class="google-font-selector__preview{{ $value ? '' : ' d-none' }}" data-google-font-preview>
        {{ __('labels.google_font_preview_text') }}
    </div>
</div>