<div id="updateFocus">
<x-label>{{ __('Social media profiles') }}</x-label>
<div class="grid col-span3 sm:col-span-3">
        <table class="table border-none">
            <tbody>
                @if ($socials)
                    @foreach ($socials as $value)
                        @php
                            // Determine the display text and URL based on social network type
                            $isBlueSky = $value->id == 3; // Assuming Blue Sky has ID 3
                            $isFullUrl = str_starts_with($value->pivot->user_on_social, 'https://');

                            if ($isBlueSky) {
                                // For Blue Sky, the handle already includes the domain (user.bsky.social)
                                $displayText = '@' . $value->pivot->user_on_social;
                                $url = "https://bsky.app/profile/{$value->pivot->user_on_social}";
                            } elseif ($isFullUrl) {
                                // For other services that store full URLs (like WhatsApp links)
                                $displayText = Str::of($value->pivot->user_on_social)->limit(44);
                                $url = $value->pivot->user_on_social;
                            } elseif ($value->pivot->server_of_social) {
                                // For Mastodon and similar services with servers
                                $displayText =
                                    '@' . $value->pivot->user_on_social . '@' . $value->pivot->server_of_social;
                                $url =
                                    str_replace('#', $value->pivot->server_of_social, $value->url_structure) .
                                    $value->pivot->user_on_social;
                            } else {
                                // For standard services (Facebook, Twitter, etc.)
                                $displayText = '@' . $value->pivot->user_on_social;
                                $url = $value->url_structure . $value->pivot->user_on_social;
                            }
                        @endphp

                        <tr class="flex mt-3">
                            <td class="flex-none">
                                <img alt="{{ $value->name }}" class="h-5 w-5 sm:mr-3" src="{{ Storage::url($value->icon) }}" />
                            </td>
                            <td class="grow">
                                <a class="text-theme-secondary transition hover:border-theme-primary hover:text-theme-primary focus:border-theme-accent focus:text-theme-primary focus:outline-none"
                                   href="{{ $url }}" target="_blank">
                                    {{ Str::of($displayText)->limit(43) }}
                                </a>
                            </td>
                            <td class="text-end">
                                <button class="inline-flex items-center px-2 py-1 text-xs uppercase tracking-widest text-theme-secondary transition hover:text-theme-primary focus:rounded-sm focus:border-theme-accent focus:outline-none focus:ring-1 focus:ring-theme-accent active:text-theme-primary disabled:opacity-25"
                                        wire:click.prevent="edit({{ $value->pivot->id }})">
                                    <x-icon class="h-4 w-4" name="pencil" />
                                </button>
                                <button class="inline-flex items-center px-2 py-1 text-xs uppercase tracking-widest text-theme-secondary transition hover:text-theme-primary focus:rounded-sm focus:border-theme-accent focus:outline-none focus:ring-1 focus:ring-theme-accent active:text-theme-primary disabled:opacity-25"
                                        wire:click.prevent="delete({{ $value->pivot->id }})">
                                    <x-icon class="h-4 w-4" name="trash" />
                                </button>
                            </td>
                        </tr>
                    @endforeach
                @endif
            </tbody>
        </table>
        <div id="update">
        @if (!$updateMode)
            @include('livewire.profile.socials-form-create')
        @else
            @include('livewire.profile.socials-form-update')
        @endif
    </div>
    </div>

    <script type="text/javascript">
        window.addEventListener('contentChanged', e => {
            $("#selected-focus").attr('class', 'text-theme-secondary uppercase');
        })
    </script>

</div>
