@isset($DiscordProvider)
    <div class="card card-bgs discord">
        <div class="card-header">
            <p class="font-weight-light font-weight-bold pt-3">
                {{ __('sidebar.discord.title') }} {{ __('sidebar.discord.online', ['online' => $DiscordProvider['presence_count']]) }}
            </p>
        </div>
        <div class="card-body">
            <ul class="list-group small overflow-auto py-1 pl-1 discord-users">
                @forelse($DiscordProvider['members'] as $discord)
                    <li class="py-1 d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center discord-name">
                            <img src="{{ $discord['avatar_url'] }}" class="img-fluid rounded-circle mr-2"
                                 loading="lazy" style="max-width: 20px; max-height: 20px;" alt="{{ $discord['username'] }}"/>
                            <div class="text-truncate">
                                {{ $discord['username'] }}
                            </div>
                        </div>
                        @if(array_key_exists('game', $discord))
                            <div class="discord-playing text-truncate">
                                {{ $discord['game']['name'] }}
                            </div>
                        @endif
                    </li>
                @empty
                    {{ __('sidebar.discord.empty') }}
                @endforelse
            </ul>
        </div>
        <div class="card-footer">
            @if(array_key_exists('instant_invite', $DiscordProvider) && $DiscordProvider['instant_invite'] !== null)
                <a class="button-small mx-auto" href="{{ $DiscordProvider['instant_invite'] }}" target="_blank"
                   rel="noopener">
                    {{ __('sidebar.discord.join') }}
                </a>
            @endif
        </div>
    </div>
@endisset