{% extends 'tops/base.html' %}
{% load static i18n %}

{% block title %}{% trans "Top Online" %}{% endblock %}

{% block tops_content %}
<div class="tops-online">
    <div class="tops-header-section">
        <h1>{% trans "Top Online" %}</h1>
        <p class="lead">{% trans "Jogadores online no momento" %}</p>
    </div>

    <div class="tops-table-container">
        {% if ranking %}
        <div class="tops-table-responsive">
            <table class="tops-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>{% trans "Jogador" %}</th>
                        <th>{% trans "Clã" %}</th>
                        <th>{% trans "Nível" %}</th>
                        <th>{% trans "Classe" %}</th>
                        <th>{% trans "Status" %}</th>
                        <th>{% trans "Tempo Online" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for player in ranking %}
                    <tr>
                        <td>
                            {% if forloop.counter == 1 %}
                                <span class="tops-badge gold">🥇</span>
                            {% elif forloop.counter == 2 %}
                                <span class="tops-badge silver">🥈</span>
                            {% elif forloop.counter == 3 %}
                                <span class="tops-badge bronze">🥉</span>
                            {% else %}
                                <span class="tops-text-muted">{{ forloop.counter }}</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="tops-flex">
                                {% if player.crest %}
                                    <img src="data:image/png;base64,{{ player.crest }}" alt="Crest" class="tops-crest">
                                {% endif %}
                                <span class="tops-player-name">{{ player.char_name }}</span>
                            </div>
                        </td>
                        <td>
                            {% if player.clan_name %}
                                <div class="tops-flex">
                                    {% if player.clan_crest %}
                                        <img src="data:image/png;base64,{{ player.clan_crest }}" alt="Clan Crest" class="tops-crest">
                                    {% endif %}
                                    <span>{{ player.clan_name }}</span>
                                </div>
                            {% else %}
                                <span class="tops-text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="tops-badge info">{{ player.level|default:"-" }}</span>
                        </td>
                        <td>
                            <span class="tops-text-muted">{{ player.class_name|default:"-" }}</span>
                        </td>
                        <td>
                            {% if player.online > 0 %}
                                <span class="tops-badge success">🟢 {% trans "Online" %}</span>
                            {% else %}
                                <span class="tops-badge secondary">⚪ {% trans "Offline" %}</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="tops-badge secondary">{{ player.human_onlinetime|default:"-" }}</span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="tops-empty-state">
            <i class="fas fa-exclamation-triangle"></i>
            <h3>{% trans "Nenhum jogador online" %}</h3>
            <p>{% trans "Não há jogadores online no momento." %}</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}