@props(['content', 'url', 'searchId' => '', 'tooltip' => ''])

<div>
    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" {{ $attributes->merge(['colspan' => '']) }}>
        <div class="flex items-center">
            <div class="ml-5">
                <a class="text-blue-400 whitespace-no-wrap hover:underline relative" href="{{ $url }}"
                    target="_blank" x-data="{ tooltip: false }" @mouseenter="tooltip = true" @mouseleave="tooltip = false">
                    {{ $content }}
                    <div x-cloak x-show="tooltip" class="absolute bg-gray-800 text-white text-xs rounded py-1 px-2 bottom-full left-1/2 transform -translate-x-1/2 mb-2">
                        {{ $tooltip }}
                        <svg class="absolute text-gray-800 h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
                    </div>
                </a>

                @if ($searchId != '')
                    <a class="p-1 rounded-md text-black-400 whitespace-no-wrap cursor-pointer {{ $searchId }} hover:bg-green-600 hover:text-white transition-all duration-300">
                        <span class="fas fa-magnifying-glass"></span>
                    </a>
                @endif
            </div>
        </div>
    </td>
</div>

@push('additional_styles')
    <style>
        [x-cloak] { display: none !important; }
    </style>
@endpush