@foreach($topUsers as $user)
    <div class="d-flex align-items-center mb-3 border p-3 rounded">
        {{-- User Image --}}
        <div class="me-3">
            @if (empty($user->image))
                <i class="las la-user-circle avatar-icon me-3 rounded-circle" style="font-size: 34px; width: 34px; height: 34px;"></i>
            @else
                <img class="rounded-circle header-profile-user" src="{{ asset($user->image) }}" alt="Profile">
            @endif
        </div>

        {{-- User Info --}}
        <div class="flex-grow-1">
            <strong>{{ $user->name }}</strong><br>
            <small>{{ $user->email_id }} | {{ $user->country }}</small>
        </div>

        {{-- Percentage Input --}}
        <div class="ms-3" style="width: 120px;">
            <div class="input-group">
                <input type="hidden" name="user_ids[]" value="{{ $user->user_id }}">
                <input type="number" name="rank_percent[]" class="form-control" min="0" max="100" step="0.01" placeholder="%" required oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                <span class="input-group-text">%</span>
            </div>
        </div>
    </div>
@endforeach

@if($limit > $topUsers->count())
    <div class="alert alert-warning alert-dismissible fade show">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>{{ translate('Warning!') }}</strong> {{ translate('Not enough users found. Only '  .  $topUsers->count() . ' users will be eligible for rewards.') }}
    </div>
@endif