@props(['product'])
<article class="py-10 border-b border-blue-pastel">
    <h2 class="text-2xl text-blue font-semibold mb-2.5">{{$product->name}}</h2>
    <div class="lg:flex items-center justify-between">
        <div class="mb-5 lg:mb-0 md:flex items-center space-y-2.5 md:space-y-0 md:space-x-5 text-blue-pastel">
            @if($product->numcas) <span class="block flex-shrink-0">CAS: {{$product->numcas}}</span> @endif
            @if($product->codes->count() > 0)
                <div class="flex-shrink-0 hidden md:block h-1.5 w-1.5 bg-blue-contrast rounded-full"></div>
            @endif
            @foreach($product->codes as $code)
                <span class="block flex-shrink-0">{{$code->feature}}: {{$code->value}}</span>
                @if(!$loop->last)
                    <div class="flex-shrink-0 hidden md:block h-1.5 w-1.5 bg-blue-contrast rounded-full"></div>
                @endif
            @endforeach
        </div>
        <div class="flex items-center space-x-5">
            @if($product->files->count() > 0)
                <div class="flex flex-col space-y-1">
                    <x-dropdown>
                        <x-slot name="trigger">
                            <div
                                class="cursor-pointer flex-shrink-0 border border-blue-contrast text-blue-contrast hover:border-none hover:bg-blue-contrast hover:text-white transition-colors py-2.5 px-5 rounded-full inline-flex items-center space-x-3 ">
                                <svg width="16" height="19" viewBox="0 0 16 19" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7.5 1.5L7.5 16.5" stroke="currentColor" stroke-width="2"
                                          stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                    <path d="M14.5 18L1 18" stroke="currentColor" stroke-width="2"
                                          stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                    <path d="M7.5 16.5L11.0832 12.9168" stroke="currentColor" stroke-width="2"
                                          stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                    <path d="M7.5 16.5L3.91677 12.9168" stroke="currentColor" stroke-width="2"
                                          stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                </svg>
                                <span class="uppercase">FDS</span>
                            </div>
                        </x-slot>
                        <x-slot name="content">
                            @foreach($product->files as $file)
                                @if($file->friendly_name === 'FDS')
                                    <x-dropdown-link
                                        href="{{$file->url}}" target="_blank">{{$file->language}}</x-dropdown-link>
                                @endif
                            @endforeach
                        </x-slot>
                    </x-dropdown>
                </div>
                <div class="flex flex-col space-y-1">
                    <x-dropdown>
                        <x-slot name="trigger">
                            <div
                                class="cursor-pointer flex-shrink-0 border border-blue-contrast text-blue-contrast hover:border-none hover:bg-blue-contrast hover:text-white transition-colors py-2.5 px-5 rounded-full inline-flex items-center space-x-3 ">
                                <svg width="16" height="19" viewBox="0 0 16 19" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7.5 1.5L7.5 16.5" stroke="currentColor" stroke-width="2"
                                          stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                    <path d="M14.5 18L1 18" stroke="currentColor" stroke-width="2"
                                          stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                    <path d="M7.5 16.5L11.0832 12.9168" stroke="currentColor" stroke-width="2"
                                          stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                    <path d="M7.5 16.5L3.91677 12.9168" stroke="currentColor" stroke-width="2"
                                          stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                </svg>
                                <span class="uppercase">FT</span>
                            </div>
                        </x-slot>
                        <x-slot name="content">
                            @foreach($product->files as $file)
                                @if($file->friendly_name === 'FT')
                                    <x-dropdown-link
                                        href="{{$file->url}}" target="_blank">{{$file->language}}</x-dropdown-link>
                                @endif
                            @endforeach
                        </x-slot>
                    </x-dropdown>
                </div>
            @else
                <a href="{{route('contact.index', ['product' => $product->id])}}"
                   class="flex-shrink-0 border border-blue-contrast text-blue-contrast hover:border-none hover:bg-blue-contrast hover:text-white transition-colors py-2.5 px-5 rounded-full inline-flex items-center space-x-3 ">
                    {{ __('Contactez-nous') }}</a>
            @endif
        </div>
</article>