{# templates/Application/<theme>/includes/aside.html.twig #}
<aside class="stack">
  <section class="frame card" id="sidebar-server">
    <div class="head">
      <div>
        <h2>{{ 'Serveur'|trans }}</h2>
        <p>{{ 'Statut & accès rapide.'|trans }}</p>
      </div>
      <span class="tag" style="outline:2px solid var(--line2); outline-offset:-2px;">EU-1</span>
    </div>

    <div class="serverBody">
      <div class="serverLine">
        <div class="serverLeft">
          {{ render(path('check.server', { _locale: app.request.locale, variant: 'line' })) }}
        </div>

        <span class="tag" style="outline:2px solid var(--accent); outline-offset:-2px;">EU-1</span>
      </div>

      <div class="stat">
        <b>06:00</b>
        <span>{{ 'Maintenance (UTC+1)'|trans }}</span>
      </div>

      <div class="serverBtns">
        <a class="btn primary" href="#play">{{ 'Jouer'|trans }}</a>
      </div>
    </div>
  </section>

  {# IMPORTANT: ids renommés pour éviter les doublons avec les ancres main (#shop, #ranking) #}
  <section class="frame card" id="sidebar-shop">
    <div class="head">
      <div>
        <h2>Derniers items boutique</h2>
        <p>Nouveautés CashShop.</p>
      </div>
      <a class="btn ghost" href="#shop">Boutique</a>
    </div>

    <div class="shopGrid">
      <a class="shopItem" href="#shop">
        <div class="shopArt" aria-hidden="true"></div>
        <div class="shopBody">
          <b>Pack Monture Aurore</b>
          <span>Monture + aura lumineuse.</span>
          <div class="priceRow"><span class="price">1 200 EP</span><span class="tag">Nouveau</span></div>
        </div>
      </a>

      <a class="shopItem" href="#shop">
        <div class="shopArt" aria-hidden="true"></div>
        <div class="shopBody">
          <b>Émote « Salutation »</b>
          <span>Animation stylisée en ville.</span>
          <div class="priceRow"><span class="price">300 EP</span><span class="tag">Populaire</span></div>
        </div>
      </a>

      <a class="shopItem" href="#shop">
        <div class="shopArt" aria-hidden="true"></div>
        <div class="shopBody">
          <b>Pass Saison S-03</b>
          <span>Récompenses, titres, skins.</span>
          <div class="priceRow"><span class="price">2 000 EP</span><span class="tag accent">Offre</span></div>
        </div>
      </a>
    </div>
  </section>

  <section class="frame card" id="sidebar-ranking">
    <div class="head">
      <div>
        <h2>Top 10 niveaux</h2>
        <p>Les joueurs les plus haut level.</p>
      </div>
      <a class="btn ghost" href="#ranking">Classement</a>
    </div>

    <div class="tableWrap">
      <table aria-label="Top 10">
        <thead>
          <tr><th>#</th><th>Joueur</th><th>Niv</th><th>Classe</th></tr>
        </thead>
        <tbody>
          <tr><td class="rank top">1</td><td>Nyx</td><td>87</td><td>Éther</td></tr>
          <tr><td class="rank">2</td><td>Riven</td><td>85</td><td>Pyro</td></tr>
          <tr><td class="rank">3</td><td>Kael</td><td>84</td><td>Aqua</td></tr>
          <tr><td class="rank">4</td><td>Sol</td><td>82</td><td>Terra</td></tr>
          <tr><td class="rank">5</td><td>Lysa</td><td>81</td><td>Anemo</td></tr>
          <tr><td class="rank">6</td><td>Orion</td><td>79</td><td>Éther</td></tr>
          <tr><td class="rank">7</td><td>Mira</td><td>78</td><td>Pyro</td></tr>
          <tr><td class="rank">8</td><td>Valk</td><td>77</td><td>Aqua</td></tr>
          <tr><td class="rank">9</td><td>Eden</td><td>76</td><td>Terra</td></tr>
          <tr><td class="rank">10</td><td>Sable</td><td>75</td><td>Anemo</td></tr>
        </tbody>
      </table>
    </div>
  </section>
</aside>