{{-- 変更履歴ボタンコンポーネント
    使用方法:
        <x-audit-history.button
            auditableType="order-header"
            :auditableId="$order->id"
            :relatedModels="json_encode([['type' => 'order-detail', 'id' => $order->id]])"
        />
    イベント:
        open-audit-history が dispatch され <x-audit-history.modal /> が受け取る
--}}
@props([
    'auditableType',
    'auditableId',
    'relatedModels' => '[]',
])

@if(auth()->id() === 0)
<button
    type="button"
    @click="$dispatch('open-audit-history', {
        auditableType: '{{ $auditableType }}',
        auditableId: {{ $auditableId }},
        relatedModels: {{ $relatedModels }}
    })"
    class="btn-base btn-sub btn-secondary-alt bg-white"
>
    <span class="button-inline-x flex flex-nowrap items-center justify-center w-full">
        <svg class="w-4 h-4 mr-1 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z">
            </path>
        </svg>
        <span class="text-nowrap tracking-wider mr-1 -mt-[0.125rem]">変更履歴</span>
    </span>
</button>
@endif