@if ($platforms->isNotEmpty())
    <div class="divide-y divide-neutral-100 dark:divide-neutral-800">
        @foreach ($platforms as $platform)
            <div wire:key="social-platform-{{ $platform->id }}" class="flex flex-col gap-3 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start sm:gap-4">
                <div class="flex min-w-0 items-center gap-3 sm:w-40 sm:shrink-0">
                    @if ($platform->icon_path)
                        <img src="{{ url($platform->icon_path) }}" alt="" class="h-10 w-10 rounded-xl border border-neutral-200 bg-white object-contain p-1.5 dark:border-neutral-700 dark:bg-neutral-900">
                    @else
                        <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-neutral-100 text-sm font-semibold dark:bg-neutral-800">{{ \Illuminate\Support\Str::substr($platform->name, 0, 1) }}</span>
                    @endif
                    <div>
                        <p class="text-sm font-medium">{{ $platform->name }}</p>
                        @if (! $platform->is_active || $platform->trashed())
                            <p class="text-xs text-neutral-400">Unavailable for new links</p>
                        @endif
                    </div>
                </div>

                <div class="min-w-0 flex-1">
                    <label for="social-url-{{ $platform->id }}" class="sr-only">{{ $platform->name }} profile URL</label>
                    <input
                        id="social-url-{{ $platform->id }}"
                        type="url"
                        inputmode="url"
                        autocomplete="url"
                        wire:model.blur="urls.{{ $platform->id }}"
                        placeholder="https://{{ strtolower($platform->slug) }}.com/your-profile"
                        class="block w-full rounded-xl border border-neutral-300 bg-white px-3.5 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:focus:border-white dark:focus:ring-white"
                    >
                    @error('urls.'.$platform->id) <p class="mt-1.5 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                </div>
            </div>
        @endforeach
    </div>
    <p class="mt-4 text-xs text-neutral-500 dark:text-neutral-400">Leave a field empty to remove that profile link.</p>
@else
    <div class="py-8 text-center">
        <x-heroicon-o-link class="mx-auto h-8 w-8 text-neutral-400" />
        <p class="mt-3 font-medium">No social platforms are available yet</p>
        <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">Ask an administrator to add the platforms your business uses.</p>
    </div>
@endif