<div x-data="{ canShare: !!navigator.share }" class="flex flex-wrap gap-2 {{ $class }}">
    @foreach ($services as $service)
        <a x-show="!canShare"
           x-cloak
           class="inline-flex items-center justify-center rounded-md border border-theme-border bg-theme-surface p-2 transition-all duration-200 hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-theme-surface focus:ring-offset-2"
           href="{{ $service->url() }}"
           target="_blank"
           rel="noopener nofollow"
           title="{{ $service->label }}">
            @php
                $iconPath = storage_path('app/public/app-images/' . $service->name . '.svg');
            @endphp
            @if(file_exists($iconPath))
                <img src="{{ asset('storage/app-images/' . $service->name . '.svg') }}" alt="{{ $service->label }}" class="h-6 w-6" />
            @else
                <span class="inline-flex h-6 w-6 items-center justify-center">
                    {!! $service->icon() !!}
                </span>
            @endif
        </a>
    @endforeach

    <button
        x-show="canShare"
        x-cloak
        @click="navigator.share({ url: window.location.href })"
        class="inline-flex items-center justify-center rounded-md border border-theme-border bg-theme-surface p-2 transition-all duration-200 hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-theme-surface focus:ring-offset-2"
        title="{{ __('Share') }}"
        type="button">
        <span class="inline-flex h-6 w-6 items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
            </svg>
        </span>
    </button>

    <button
        x-data="{ copied: false }"
        @click="navigator.clipboard.writeText(window.location.href); copied = true; setTimeout(() => copied = false, 2000)"
        class="inline-flex items-center justify-center rounded-md border border-theme-border bg-theme-surface p-2 transition-all duration-200 hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-theme-surface focus:ring-offset-2"
        :title="copied ? '{{ __('Copied!') }}' : '{{ __('Copy link') }}'"
        type="button">
        <span class="inline-flex h-6 w-6 items-center justify-center">
            <template x-if="!copied">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
                </svg>
            </template>
            <template x-if="copied">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-green-500">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                </svg>
            </template>
        </span>
    </button>
</div>
