{% auth "user" %}
{% if not data %}

<!-- 🔐 LOGIN ORIGINAL - MANTIDO -->
<form id="login" name="register" class="ui form" style="
    background: linear-gradient(180deg, #0b1121 0%, #111c3a 100%);
    border: 1px solid #3b82f6;
    border-radius: 10px;
    padding: 20px;
    color: #cce2ff;
    box-shadow: 0 0 18px rgba(59,130,246,0.25);
">
  <h3 style="text-align:center; color:#60a5fa; font-size:18px; margin-bottom:15px; text-shadow:0 0 10px rgba(59,130,246,0.5);">
    🔐 Login de Acesso
  </h3>

  <div id="login-error" class="ui message error" style="
      display:none;
      background:rgba(59,130,246,0.1);
      border-left:4px solid #3b82f6;
      color:#bcd3ff;
      font-weight:bold;
      border-radius:6px;
      padding:8px 12px;
      margin-bottom:10px;
  ">Falha na autenticação</div>

  <div class="required field">
    <div class="ui input">
      <input id="login-username" placeholder="Usuário" type="text"
             oninput="this.value=this.value.toLowerCase()" maxlength="10"
             style="background:#111b33; border:1px solid #2563eb; color:#fff; border-radius:6px; padding:10px;">
    </div>
  </div>

  <div class="required field">
    <div class="ui input">
      <input id="login-password" placeholder="Senha" type="password"
             style="background:#111b33; border:1px solid #2563eb; color:#fff; border-radius:6px; padding:10px;">
    </div>
  </div>

  <div class="field" style="text-align:right; margin-bottom:10px;">
    <a id="forgot-password" href="#" style="color:#93c5fd; font-size:13px;">Esqueci a senha</a>
  </div>

  <div class="field">
    <button id="login-submit" type="button" class="ui fluid primary button" role="button"
      style="background-color:#2563eb; color:white; font-weight:bold; border-radius:6px; padding:12px; transition:background 0.3s;">
      Entrar
    </button>
  </div>
</form>

<!-- 🔁 MODAL ESQUECI SENHA -->
<div class="ui modal forgot-password tiny">
  <div class="header" style="background:#0b1121; color:#60a5fa;">Esqueci a senha</div>
  <div class="content" style="background:#111b33; color:#cce2ff;">
    <p>Por favor preencha os dados para iniciar o processo de recuperação de senha.</p>
    <form id="forgot" name="register" class="ui form">
      <div id="forgot-error" class="ui message error" style="display:none;">Falha na autenticação</div>

      <div class="required field">
        <div class="ui input">
          <input id="forgot-username" placeholder="Usuário" type="text"
                 oninput="this.value=this.value.toLowerCase()" maxlength="10"
                 style="background:#0f1935; border:1px solid #2563eb; color:#fff;">
        </div>
      </div>

      <div class="required field">
        <div class="ui input">
          <input id="forgot-email" placeholder="Email" type="text"
                 style="background:#0f1935; border:1px solid #2563eb; color:#fff;">
        </div>
      </div>
    </form>
  </div>
  <div class="actions" style="background:#0b1121;">
    <div id="forgot-submit" class="ui green button">Recuperar</div>
    <div class="ui cancel button">Cancelar</div>
  </div>
</div>

{% else %}

<!-- 🔷 MENU JOGADOR PROFISSIONAL -->
<style>
.mu-menu {
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(180deg, #0b1121 0%, #101a35 100%);
  border: 1px solid rgba(59,130,246,0.4);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(59,130,246,0.25);
  padding: 15px;
  margin-top: 10px;
}

.mu-menu h2 {
  color: #60a5fa;
  text-align: center;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-shadow: 0 0 8px rgba(96,165,250,0.4);
}

.mu-buttons a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: rgba(25,35,65,0.85);
  border: 1px solid rgba(96,165,250,0.2);
  transition: all 0.25s ease;
  color: #e5e9ff;
}

.mu-buttons a i {
  min-width: 18px;
  text-align: center;
  opacity: 0.9;
}

.mu-buttons a:hover {
  background: rgba(59,130,246,0.2);
  box-shadow: 0 0 10px rgba(96,165,250,0.3);
  transform: scale(1.02);
}

/* Cores personalizadas */
.mu-buttons a.golds { color: #ffd54f; border-left: 3px solid #facc15; }
.mu-buttons a.premium { color: #a5b4fc; border-left: 3px solid #6366f1; }
.mu-buttons a.coin { color: #34d399; border-left: 3px solid #10b981; }
.mu-buttons a.cash { color: #d1d5db; border-left: 3px solid #9ca3af; }
.mu-buttons a.confirm { color: #60a5fa; border-left: 3px solid #3b82f6; }

/* 🌟 CENTRAL DE PRÊMIOS — Roxinho Premium */
.mu-buttons a.premios {
  color: #d8b4fe;
  border-left: 3px solid #a855f7;
  background: rgba(50, 20, 70, 0.85);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}
.mu-buttons a.premios:hover {
  background: linear-gradient(90deg, #a855f7, #c084fc);
  color: #fff;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.6);
  transform: scale(1.03);
}

/* 💎 COMPRAR MOEDAS — Destaque especial */
.mu-buttons a.comprar-golds {
  color: #60a5fa;
  border-left: 3px solid #3b82f6;
  background: linear-gradient(90deg, rgba(10,25,50,0.8), rgba(50,10,90,0.75));
  font-weight: 800;
  text-shadow: 0 0 10px rgba(96,165,250,0.5);
}
.mu-buttons a.comprar-golds:hover {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  color: #fff;
  box-shadow: 0 0 18px rgba(139,92,246,0.6);
  transform: scale(1.04);
}

/* 🔸 Comprar VIP */
.mu-buttons a.vip {
  color: #facc15;
  border-left: 3px solid #fbbf24;
  background: rgba(30,25,5,0.8);
  font-weight: 700;
}
.mu-buttons a.vip:hover {
  background: linear-gradient(90deg, #fbbf24, #facc15);
  color: #1e1e1e;
  box-shadow: 0 0 15px rgba(250,204,21,0.5);
}

.mu-logout {
  margin-top: 14px;
  display: block;
  width: 100%;
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
  color: white;
  text-align: center;
  font-weight: 700;
  border-radius: 6px;
  padding: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.mu-logout:hover {
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  box-shadow: 0 0 16px rgba(59,130,246,0.4);
  transform: scale(1.03);
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<div class="mu-menu">
  <h2><i class="fa-solid fa-user-shield"></i> Painel do Jogador</h2>

  <div class="mu-buttons">
    <a href="/painel.html"><i class="fa-solid fa-house-user"></i> Minha Conta</a>
    <a href="/painel-personagens.html"><i class="fa-solid fa-users"></i> Meus Personagens</a>
   <a href="/shop_premios.html" class="premios">
      <i class="fa-solid fa-box-open"></i> Central de Prêmios
    </a>
  </div>

  <div class="mu-divider"></div>

  <h2><i class="fa-solid fa-store"></i> Shops</h2>

  <div class="mu-buttons">
    <a href="/shop_golds.html" class="golds"><i class="fa-solid fa-gem"></i> Shop Golds</a>
    <a href="/shop_premium.html" class="premium"><i class="fa-solid fa-star"></i> Shop Premium</a>
    <a href="/shop_gamecoin.html" class="coin"><i class="fa-solid fa-coins"></i> Shop GameCoin</a>
    <a href="/shop_cash.html" class="cash"><i class="fa-solid fa-money-bill-wave"></i> Shop Cash</a>
  

    <!-- 💎 Comprar Moedas — Destaque Especial -->
    <a href="/compras.html" class="comprar-golds">
      <i class="fa-solid fa-cart-shopping"></i> Comprar Moedas
    </a>

    <a href="/contavip.html" class="vip"><i class="fa-solid fa-crown"></i> Comprar VIP</a>
    <a href="/confirmar_pagamento.html" class="confirm"><i class="fa-solid fa-circle-check"></i> Confirmar Pagamento</a>
  </div>

  <a id="logout" href="#" class="mu-logout"><i class="fa-solid fa-right-from-bracket"></i> Sair</a>
</div>

{% endif %}
{% endauth %}