<form>

    <div class="grid col-span3 sm:col-span-3">
        <x-select id="update"
            label=" {{ __('Select social media profile')}}"
            placeholder="{{$selectedPlaceholder->name}}"
            option-label="name"
            option-value="id"
            wire:model.live="socialsOptionSelected"
            wire:key="{{ $socialsOptionSelected}}.select">
            @foreach ($socialsOptions as $socialOption)
                <x-select.user-option src="{{ Storage::url($socialOption->icon) }}" label="{{$socialOption->name}}" value="{{ $socialOption->id }}"/>
            @endforeach
        </x-select>
    </div>
        <div class="grid grid-cols-1 gap-6 mt-3 mb-3 md:grid-cols-2">
        <x-jetstream.input wire:model.live="userOnSocial" label="{{ __('Your username on social media') }}" placeholder="{{ __('account-name') }}" prefix="@ " />
        @if(App\Models\Social::find($socialsOptionSelected))
            @if(Str::contains(App\Models\Social::find($socialsOptionSelected)->url_structure, '#'))
            <x-jetstream.input wire:model.live="serverOfSocial" label="{{ __('Server of social media') }}" placeholder="{{ __('server-name.org') }}" prefix="@ " />
            @endif
        @endif
        </div>
        <div>
            <button wire:click.prevent="update()" class="inline-flex items-center px-4 py-2 mr-3 bg-gray-100 border border-theme-border rounded-md font-semibold text-xs text-theme-primary uppercase tracking-widest shadow-sm hover:bg-gray-200 hover:text-theme-secondary focus:outline-none focus:border-theme-accent focus:ring-1 focus:ring-theme-accent active:text-theme-primary active:bg-gray-50 disabled:opacity-25 transition">{{__('Update')}}</button>
            <button wire:click.prevent="cancel()" class="inline-flex items-center px-4 py-2 bg-gray-100 border border-theme-border rounded-md font-semibold text-xs text-theme-primary uppercase tracking-widest shadow-sm hover:bg-gray-200 hover:text-theme-secondary focus:outline-none focus:border-theme-accent focus:ring-1 focus:ring-theme-accent active:text-theme-primary active:bg-gray-50 disabled:opacity-25 transition">{{__('Cancel')}}</button>
        </div>
</form>