@props(['online', 'realms'])

<div {{ $attributes->merge(['class' => 'realm-status-widget']) }}>
    <div class="realm-status-header text-center mb-4">
        <div class="realm-stats-display d-flex justify-content-center align-items-center gap-4">
            <div class="total-players-stat">
                <div class="stat-number display-4 text-phoenix-gold" id="total-online-players">{{ number_format($online) }}</div>
                <p class="stat-label mb-0 text-light">{{ __('Всего игроков онлайн') }}</p>
            </div>
            <div class="realms-count-stat">
                <div class="stat-number display-4 text-phoenix-orange">{{ count($realms) }}</div>
                <p class="stat-label mb-0 text-light">{{ __('Всего миров') }}</p>
            </div>
        </div>
    </div>

    <div class="realm-status-content">
        <h4 class="text-phoenix-gold mb-3 realm-status-title">
            <i class="fas fa-server me-2 text-phoenix-gold"></i>{{ __('Статус серверов:') }}
        </h4>
        <ul id="realm-status-list" class="list-group list-group-flush realm-status-list">
            @forelse($realms as $realm)
                <li class="list-group-item realm-status-item d-flex flex-column flex-md-row justify-content-between align-items-md-center p-3 mb-2">
                    <div class="realm-name-container d-flex align-items-center mb-2 mb-md-0">
                        <i class="fas fa-dungeon me-3 text-phoenix-gold fs-5"></i>
                        <span class="text-white fs-5 fw-bold">{{ $realm->name }}</span>
                        @if($realm->realmflags === 1)
                            <span class="badge bg-danger ms-2 px-2 py-1 fs-6">
                                <i class="fas fa-shield-alt me-1"></i>{{ strtoupper($realm->type) }}
                            </span>
                        @elseif($realm->realmflags === 2)
                            <span class="badge bg-success ms-2 px-2 py-1 fs-6">
                                <i class="fas fa-scroll me-1"></i>{{ strtoupper($realm->realmflags) }}
                            </span>
                        @else
                            <span class="badge bg-primary ms-2 px-2 py-1 fs-6">
                                <i class="fas fa-users me-1"></i>{{ strtoupper($realm->realmflags) }}
                            </span>
                        @endif
                    </div>
                    <div class="realm-status-info d-flex align-items-center gap-3">
                        <div class="realm-status-indicator d-flex align-items-center">
                            <span class="status-dot me-2 {{ $realm->status == 'Online' ? 'online' : 'offline' }}"></span>
                            <span class="badge {{ $realm->status == 'Online' ? 'bg-success' : 'bg-danger' }} px-3 py-2 fs-6">
                                {{ $realm->status }}
                            </span>
                        </div>
                        <div class="realm-players-count d-flex align-items-center">
                            <i class="fas fa-user-friends me-2 text-phoenix-gold"></i>
                            <span class="badge bg-primary px-3 py-2 fs-6">
                                {{ __('Онлайн:') }} {{ number_format($realm->onlinePlayersCount) }}
                            </span>
                        </div>
                        <div class="realm-population d-flex align-items-center">
                            <i class="fas fa-chart-line me-2 text-phoenix-gold"></i>
                            @php
                                $populationLevel = \App\Helpers\RealmHelper::getPopulationLevel($realm->population);
                            @endphp
                            <span class="badge bg-{{ $populationLevel['class'] }} px-3 py-2 fs-6">
                                {{ $populationLevel['text'] }}
                            </span>
                        </div>
                    </div>
                </li>
            @empty
                <li class="list-group-item text-center py-5 realm-status-placeholder">
                    <div class="d-flex flex-column align-items-center justify-content-center">
                        <i class="fas fa-sync fa-spin fa-2x text-phoenix-gold mb-3"></i>
                        <p class="text-light mb-0 fs-5">{{ __('Загрузка статуса реалмов...') }}</p>
                        <small class="text-muted mt-2">{{ __('Пожалуйста, подождите') }}</small>
                    </div>
                </li>
            @endforelse
        </ul>
    </div>
</div>