@forelse ($personnel as $p)
    @php

        if (!empty($p->pas_photo)) {
            $avatar = Util::linkFile('pas-photo', $p->pas_photo);
        } else {
            $avatar = url('assets/img/avatars/placeholder.jpg');
        }

        $words = explode(' ', $p->name);
        $firstLetters = '';

        foreach ($words as $word) {
            $firstLetters .= strtoupper($word[0]);
        }
    @endphp

    <tr>
        <td class="has-text-centered">{{ $loop->index + 1 + $personnel->perPage() * ($personnel->currentPage() - 1) }}
        </td>
        <td>
            <div class="flex-media">
                <div class="h-avatar is-small">
                    <img class="avatar" src="{{ $avatar }}">
                </div>
                <div class="meta">
                    <span>{{ $p->name }}</span>
                </div>
            </div>
        </td>
        <td>{{ $p->username ?? $p->nik }}</td>
        <td class="has-text-centered">{{ $p->position }}</td>
        <td>
            @if ($p->gender == 'Male')
                <span style="background-color: #48A8EF !important;display: flex; align-items: center;"
                    class="tag is-info is-rounded">
                    <img src="{{ url('assets/img/icons/male.svg') }}" class="mr-2">
                    @lang('app.male')
                </span>
            @else
                <span style="background-color: #E62864 !important;display: flex; align-items: center;"
                    class="tag is-danger is-rounded fs-12 fw-500">
                    <img src="{{ url('assets/img/icons/female.svg') }}" class="mr-2">
                    @lang('app.female')
                </span>
            @endif
        </td>
    </tr>
@empty
    <tr>
        <td colspan="5" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse