@props([
    'product' => null,
    'items' => [],
])

@if($product)
<div {{ $attributes->merge(['class' => 'product shadow-sm p-3 br-1']) }} 
    x-data="{showMore: false}"  
>
    <div class="product-head mb-0">
        <div class="product-title" x-on:click="showMore = ! showMore">
            <img src="{{ asset($product->bank_img) }}" 
                class="me-3 img-fluid w-max-100px shadow rounded bg-white" style="height: 43px"/>
            <div class="product-info">
                <h6 class="title">{{ $product->name }}</h6>
                <span class="sub-text">{{ $product->bank->name }} &bull; {{ $product->type->name }}</span>
            </div>
        </div>
        @if($product->media->count())
        <x-ui.button 
            color="primary"
            class="btn-sm btn-dim mt-1 btn-icon"
            x-on:click="$wire.emit('showModal', 'modals.documents.document-viewer-modal', '{{ $product->media[0]['original_url'] ?? '' }}')"
            icon="file-text-fill"
            x-data="tooltip"
            data-bs-title="Voir la documentation"
        />
        @endif
    </div>
    <div x-show="showMore" @transition x-cloak>
        <hr/>
        <div class="product-details">
            <x-profile.profile-ud-list-alt :format-default-value="true" :$items :wider="false"/>
        </div>
    </div>
</div>
@endif