@php
    $social = App\Models\Social::find($socialsOptionSelected);
    $needsServer = $social && Str::contains($social->url_structure, '#');
    $canEnable = $social && $userOnSocial && (!$needsServer || $serverOfSocial);
@endphp

<form>
    <div class="grid col-span3 sm:col-span-3 mt-3">
        <x-select id="create"
            placeholder="{{ __('Select social media') }}"
            wire:model.live="socialsOptionSelected"
            class="placeholder-gray-300"
            >
            @foreach ($socialsOptions as $option)
                <x-select.option src="{{ Storage::url($option->icon) }}" label="{{ $option->name}}" value="{{ $option->id }}" />
            @endforeach
        </x-select>
    </div>

    <div class="grid col-span3 sm:col-span-3 my-2">
        @if(App\Models\Social::find($socialsOptionSelected))
            @if(App\Models\Social::find($socialsOptionSelected)->url_structure === '')
            <x-jetstream.input wire:model.live="userOnSocial" label="{{ __('Link to your page on social media') }}" placeholder="{{ __('Link or URL address') }}" prefix=" " class="placeholder-gray-300"/>
            @else
                <x-jetstream.input wire:model.live="userOnSocial" label="{{ __('Your username on social media') }}" placeholder="{{ __('account-name') }}" prefix="@ " class="placeholder-gray-300 my-2"/>
            @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="@ " class="placeholder-gray-300"/>
            @endif
            @endif

        @endif
    </div>

   <button
        wire:click.prevent="store()"
        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"
        @disabled(!$canEnable)
    >
        {{ __('Add social media') }}
    </button>
        @if (session()->has('message'))
        <span x-data="{show: true}" x-init="setTimeout(() => show = false, 2000)" x-show="show" x-transition:leave.opacity.duration.1500ms>
            <span class="ml-3 text-sm text-theme-secondary">
                {{ session('message') }}
            </span>
        </span>
        @endif

</form>