@isset($DiscordProvider)
    <div class="card mb-2">
        <div class="card-header">
            <p>
                {{ __('sidebar.discord.title') }} {{ __('sidebar.discord.online', ['online' => $DiscordProvider['presence_count']]) }}
            </p>
        </div>
        <div class="card-body">
            <ul class="list-group small h-25 overflow-auto py-1 pl-1 discord">
                @forelse($DiscordProvider['members'] as $discord)
                    <li class="pb-1 d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <img src="{{ $discord['avatar_url'] }}" class="img-fluid rounded-circle mr-2"
                                 loading="lazy" style="max-width: 20px"/>
                            <div class="discord-name text-truncate">{{ $discord['username'] }}</div>
                        </div>

                        @if(array_key_exists('game', $discord) && !empty($discord['game']))
                            <div
                                class="small pt-1 pr-2 discord-playing text-truncate">{{ $discord['game']['name'] }}</div>
                        @endif
                    </li>
                @empty
                    {{ __('sidebar.discord.empty') }}
                @endforelse
            </ul>
        </div>
        @if(array_key_exists('instant_invite', $DiscordProvider) && $DiscordProvider['instant_invite'] !== null)
            <div class="card-footer bg-transparent text-center border-top-0 rounded-0">
                <a href="{{ $DiscordProvider['instant_invite'] }}" class="btn btn-link" target="_blank" rel="noopener">
                    {{ __('sidebar.discord.join') }}
                </a>
            </div>
        @endif
    </div>
@endisset