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

  <!-- LOGIN -->
  <div style="
    background: linear-gradient(180deg, #ffffff 0%, #f3f6ff 100%);
    border: 1px solid #c6d8ff;
    border-radius: 16px;
    box-shadow: 0 3px 16px rgba(43,109,243,0.12);
    padding: 28px 22px;
    font-family: 'Poppins', sans-serif;
    color: #1a1a1a;
    text-align: center;
  ">

    <h2 style="
      color: #2b6df3;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 22px;
      text-shadow: 0 0 10px rgba(43,109,243,0.25);
    ">🔐 Login</h2>

    <form id="login" name="register" class="ui form">
      <div id="login-error" class="ui message error" style="display:none;">Falha na autenticação</div>

      <div class="required field" style="margin-bottom:14px;">
        <div class="ui icon input" style="width:100%;">
          <i class="user icon" style="color:#2b6df3;"></i>
          <input id="login-username" placeholder="Usuário" type="text" oninput="this.value=this.value.toLowerCase()" maxlength="10"
            style="border-radius:8px; border:1px solid #c6d8ff; padding:10px;">
        </div>
      </div>

      <div class="required field" style="margin-bottom:14px;">
        <div class="ui icon input" style="width:100%;">
          <i class="lock icon" style="color:#2b6df3;"></i>
          <input id="login-password" placeholder="Senha" type="password"
            style="border-radius:8px; border:1px solid #c6d8ff; padding:10px;">
        </div>
      </div>

      <div class="field" style="margin-bottom:16px;">
        <a id="forgot-password" href="#" style="color:#2b6df3; text-decoration:none; font-size:13px;">Esqueci a senha</a>
      </div>

      <div class="field">
        <button id="login-submit" type="button" class="ui fluid button" role="button"
          style="
            background: linear-gradient(90deg,#2b6df3 0%,#4b83f8 100%);
            color: white;
            font-weight: 600;
            border-radius: 8px;
            text-transform: uppercase;
            padding: 10px;
            box-shadow: 0 0 12px rgba(43,109,243,0.25);
          ">Entrar</button>
      </div>
    </form>
  </div>

  <!-- MODAL DE RECUPERAÇÃO -->
  <div class="ui modal forgot-password tiny">
    <div class="header" style="font-weight:bold;">Esqueci a senha</div>
    <div class="content" style="font-family:'Poppins',sans-serif;">
      <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" style="margin-bottom:10px;">
          <div class="ui icon input" style="width:100%;">
            <i class="user icon" style="color:#2b6df3;"></i>
            <input id="forgot-username" placeholder="Usuário" type="text"
              oninput="this.value=this.value.toLowerCase()" maxlength="10"
              style="border-radius:8px; border:1px solid #c6d8ff; padding:10px;">
          </div>
        </div>
        <div class="required field">
          <div class="ui icon input" style="width:100%;">
            <i class="mail icon" style="color:#2b6df3;"></i>
            <input id="forgot-email" placeholder="Email" type="text"
              style="border-radius:8px; border:1px solid #c6d8ff; padding:10px;">
          </div>
        </div>
      </form>
    </div>
    <div class="actions" style="text-align:center;">
      <div id="forgot-submit" class="ui green button">Recuperar</div>
      <div class="ui cancel button">Cancelar</div>
    </div>
  </div>

  <script>
    // Corrige modal "Esqueci a senha"
    document.addEventListener('DOMContentLoaded', function() {
      const forgotLink = document.getElementById('forgot-password');
      const modal = document.querySelector('.ui.modal.forgot-password');
      if (forgotLink && modal) {
        forgotLink.addEventListener('click', function(e) {
          e.preventDefault();
          $(modal).modal('show');
        });
      }
    });
  </script>

  {% else %}

  <!-- MENU LOGADO -->
  <div style="
    background: linear-gradient(180deg,#ffffff 0%,#f3f6ff 100%);
    border: 1px solid #c6d8ff;
    border-radius: 16px;
    box-shadow: 0 3px 18px rgba(43,109,243,0.12);
    padding: 28px 20px;
    font-family: 'Poppins', sans-serif;
    color: #1a1a1a;
  ">

    <h2 style="
      color: #2b6df3;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 18px;
      text-shadow: 0 0 10px rgba(43,109,243,0.25);
      text-align: center;
    ">
      ⚔️ Painel 
    </h2>

    <!-- MINHA CONTA -->
    <div style="margin-bottom: 20px;">
      <h3 style="color:#2b6df3; font-size:16px; margin-bottom:10px; text-align:center;">👤 Conta</h3>
      <a href="/painel.html" class="ui fluid button"
        style="background:#2b6df3; color:white; margin-bottom:8px; border-radius:8px; font-weight:600;">🏠 Minha conta</a>
      <a href="/painel-personagens.html" class="ui fluid button"
        style="background:#2b6df3; color:white; margin-bottom:8px; border-radius:8px; font-weight:600;">🧙‍♂️ Meus personagens</a>
      <a href="/painel-exchanges.html" class="ui fluid button"
        style="background:#2b6df3; color:white; border-radius:8px; font-weight:600;">💎 VIP e Trocas</a>
    </div>

    <!-- SHOP -->
    <div style="margin-bottom: 20px;">
      <h3 style="color:#2b6df3; font-size:16px; margin-bottom:10px; text-align:center;">🛒 Shop</h3>
      <a href="/shop_golds.html" class="ui fluid button"
        style="background:#4b83f8; color:white; margin-bottom:8px; border-radius:8px;">🥇 Shop Golds</a>
      <a href="/shop_premium.html" class="ui fluid button"
        style="background:#4b83f8; color:white; margin-bottom:8px; border-radius:8px;">💠 Shop Premium</a>
      <a href="/shop_rubi.html" class="ui fluid button"
        style="background:#4b83f8; color:white; margin-bottom:8px; border-radius:8px;">💎 Shop Rubi</a>
      <a href="/shop_alfacoin.html" class="ui fluid button"
        style="background:#4b83f8; color:white; margin-bottom:8px; border-radius:8px;">🌀 Shop AlfaCoin</a>
      <a href="/shop_cash.html" class="ui fluid button"
        style="background:#4b83f8; color:white; margin-bottom:8px; border-radius:8px;">💰 Shop Cash</a>
      <a href="/golds.html" class="ui fluid button"
        style="background:#4b83f8; color:white; margin-bottom:8px; border-radius:8px;">💵 Comprar Golds</a>
      <a href="/confirmar_pagamento.html" class="ui fluid button"
        style="background:#4b83f8; color:white; border-radius:8px;">📩 Confirmar Pagamento</a>
    </div>

    <!-- SAIR -->
    <a id="logout" href="#" class="ui fluid button"
      style="
        background: linear-gradient(90deg,#335eea 0%,#1f44c8 100%);
        color:white;
        font-weight:700;
        border-radius:10px;
        box-shadow:0 0 12px rgba(43,109,243,0.3);
      ">🚪 Sair</a>
  </div>

  {% endif %}
{% endauth %}