@props(['history' => []])
<div class="card shadow-sm border-0 mb-4">
    <div class="card-body">

        {{-- HEADER --}}
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="fw-bold mb-0">
                History
            </h4>
        </div>
        <div>
            @if(count($history))
                <ul class="activity-feed mb-0 ps-2">
                    @foreach($history as $item)
                        <li class="feed-item">
                            <div class="feed-item-list mb-2">
                                <p class="text-muted mb-0">{{ $item->action }}</p>
                                <small class="text-muted mb-1">{{ $item->created_at->diffForHumans() }} &bull; {{ $item->created_at->format("d/m/Y H:i") }}</small><br>
                                @if($item->user()->exists())
                                    <small>{{ $item->user->name_first }} {{ $item->user->name_last }}</small>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>
            @else
                <div class="text-center p-5 text-muted">
                    <i class="mdi mdi-history" style="font-size: 48px;"></i>
                    <p class="mt-3 fw-bold">No history is found for this.</p>
                </div>
            @endif
        </div>
    </div>
</div>