<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Rankings</title>
  <link rel="stylesheet" href="style-rankings.css" />
  <script src="qwebchannel.js"></script>
  <script defer src="script-rankings.js"></script>
</head>
<body>
  <div class="content">
    <!-- ⬆️ Верхний статус -->
    <div class="top-bar">
      <div class="status">
        <img id="status-icon" src="../images/icon_on0.png" alt="Status Icon" />
        <div class="status-container">
          <span id="online-label">Online Players: <span id="online-count">?</span>/500</span>
          <div class="online-bar">
            <div id="online-fill" style="width: 0%"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- ⬇️ Главная секция -->
    <div class="center">
      <h1 id="rankings-title" style="font-size: 40px;">Player Rankings</h1>

      <!-- Tabs -->
      <div class="rankings-tabs">
        <button class="tab active" data-category="General">General</button>
        <button class="tab" data-category="Top Online">Online</button>
        <button class="tab" data-category="Top PvP">PvP</button>
        <button class="tab" data-category="Guilds">Guilds</button>
		<button class="tab" data-category="ELO">ELO</button>
      </div>

      <!-- Filters -->
      <div class="filters">
       <select id="class-filter">
         <option value="All">All Classes</option>
         <option value="dw">Dark Wizard</option>
         <option value="dk">Dark Knight</option>
         <option value="elf">Fairy Elf</option>
         <option value="mg">Magic Gladiator</option>
         <option value="dl">Dark Lord</option>
         <option value="sum">Summoner</option>
         <option value="rf">Rage Fighter</option>
         <option value="gl">Grow Lancer</option>
         <option value="rw">Rune Wizard</option>
         <option value="sl">Slayer</option>
         <option value="gc">Gun Crusher</option>
         <option value="lw">Light Wizard</option>
         <option value="lemuria">Lemuria Mage</option>
         <option value="illusion">Illusion Knight</option>
         <option value="alc">Alchemist</option>
       </select>



        <input type="text" id="search-input" placeholder="Search player..." />
      </div>

	  <!-- Loader -->
	  <div id="loading-indicator" class="loader" style="display:none;">
	  <span>Loading...</span>
	  </div>

      <!-- Таблица рейтинга -->
      <div class="ranking-table" id="ranking-table"></div>
      <!-- Пагинация -->
      <div class="pagination" id="pagination"></div>
    </div>

  </div>
</body>
</html>
