@forelse ($group_users as $gu)
    @php
        $avatar = Util::linkFile('pas_photo', $gu->user[0]->pas_photo);

        $url_delete = route('group.delete-user-from-group', ['id' => $gu->id]);
    @endphp
    <tr>
        <td>
            <div class="flex-media">
                <div class="meta">
                    <span class="fs-12 fw-500 text-dark">{{ $gu->group->name }}</span>
                </div>
                <div class="meta">
                    <span class="fs-12 fw-300 text-grey">{{ $gu->group->description }}</span>
                </div>
            </div>
        </td>
        <td>
            <div class="dropdown is-spaced is-dots is-right" data-id="{{ $gu->id }}">
                <div class="dropdown-trigger">
                    <div class="is-trigger" aria-haspopup="true">
                        @include('components.icons.more-vertical')
                    </div>
                </div>
                <div class="dropdown-menu" role="menu">
                    <div class="dropdown-content">
                        <a class="dropdown-item is-media"
                            onclick="openModalDelete('{{ $gu->group->name }}','{{ $avatar }}','{{ $url_delete }}')">
                            <div class="icon">
                                <i class="lnil lnil-trash"></i>
                            </div>
                            <div class="meta">
                                <span>@lang('app.delete')</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </td>
    </tr>
@empty
    <td colspan="2">
        <div class="has-text-centered">
            <img src="{{ url('assets/img/illustrations/empty-state.svg') }}" style="width: 120px">
            <div class="fs-14 fw-700" style="margin-top: -10px">@lang('app.data_not_available')</div>
            <div class="fs-12 fw-500">
                @lang('app.empty_state')
            </div>
        </div>
    </td>
@endforelse

<script>
    $('.dropdown-trigger').on('click', function() {
        const dropdown = $(this).closest('.dropdown');
        const dropdownMenu = dropdown.find('.dropdown-menu');
        const dropdownOffset = dropdown.offset();
        const dropdownHeight = dropdownMenu.outerHeight();
        const viewportHeight = $('.table-wrapper').height();

        if (dropdownOffset.top + dropdownHeight > viewportHeight) {
            dropdown.addClass('is-up');
        } else {
            dropdown.removeClass('is-up');
        }

        dropdown.toggleClass('is-active');

        $('.dropdown').not(dropdown).removeClass('is-active');
    })
</script>