{% auth "user" %}
{% if not data %}
  <form id="login" name="register" class="ui form" style="
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border-left: 5px solid #ff7b00;
    border-radius: 10px;
    padding: 22px;
    box-shadow: 0 0 20px rgba(255, 120, 0, 0.25);
    color: #f0f0f0;
    font-family: 'Segoe UI', sans-serif;
  ">
    <h2 style="text-align:center; color:#ff7b00; text-transform:uppercase; margin-bottom:15px;">
      🔐 Acesso ao Painel
    </h2>

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

    <div class="required field">
      <div class="ui inverted input">
        <input id="login-username" placeholder="Usuário" type="text" oninput="this.value=this.value.toLowerCase()" maxlength="10">
      </div>
    </div>

    <div class="required field">
      <div class="ui inverted input">
        <input id="login-password" placeholder="Senha" type="password">
      </div>
    </div>

    <div class="field" style="text-align:right;">
      <a id="forgot-password" href="#" style="color:#ffae66;">Esqueci a senha</a>
    </div>

    <button id="login-submit" type="button" class="ui fluid button" style="
      background: linear-gradient(90deg, #ff7b00, #ff5e00);
      color: white;
      font-weight: bold;
      border-radius: 8px;
      transition: 0.3s;
    " onmouseover="this.style.filter='brightness(1.2)';" onmouseout="this.style.filter='brightness(1)';">
      Entrar
    </button>
  </form>

  <!-- Modal: Esqueci minha senha -->
  <div class="ui modal forgot-password tiny" style="
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    color: #f0f0f0;
    border: 1px solid rgba(255, 123, 0, 0.4);
    box-shadow: 0 0 20px rgba(255, 120, 0, 0.35);
    font-family: 'Segoe UI', sans-serif;
  ">
    <div class="header" style="
      background: linear-gradient(90deg, #ff7b00, #ff5e00);
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 700;
    ">
      Esqueci a senha
    </div>
    <div class="content" style="background: transparent; color: #f0f0f0;">
      <p style="color:#f0f0f0;">Por favor, preencha os dados para iniciar a 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>
        <table style="width:100%; border-collapse:collapse;">
          <tr>
            <td style="padding:6px 0;">
              <div class="ui input" style="width:100%;">
                <input id="forgot-username" placeholder="Usuário" type="text"
                       oninput="this.value=this.value.toLowerCase()" maxlength="10"
                       style="background:#2a2a2a; border:1px solid rgba(255,123,0,0.3); color:#fff; width:100%; padding:8px; border-radius:5px;">
              </div>
            </td>
          </tr>
          <tr>
            <td style="padding:6px 0;">
              <div class="ui input" style="width:100%;">
                <input id="forgot-email" placeholder="E-mail" type="text"
                       style="background:#2a2a2a; border:1px solid rgba(255,123,0,0.3); color:#fff; width:100%; padding:8px; border-radius:5px;">
              </div>
            </td>
          </tr>
        </table>
      </form>
    </div>
    <div class="actions" style="
      background: rgba(0,0,0,0.3);
      border-top: 1px solid rgba(255,123,0,0.2);
      text-align:right;
      padding:10px;
    ">
      <div id="forgot-submit" class="ui button" style="
        background: linear-gradient(90deg, #ff7b00, #ff5e00);
        color:#fff;
        font-weight:bold;
        border-radius:6px;
        transition:0.3s;
        margin-right:5px;
      " onmouseover="this.style.filter='brightness(1.2)';" onmouseout="this.style.filter='brightness(1)';">
        Recuperar
      </div>

      <div class="ui cancel button" style="
        background:#3a3a3a;
        color:#ccc;
        font-weight:bold;
        border-radius:6px;
        transition:0.3s;
      " onmouseover="this.style.filter='brightness(1.2)';" onmouseout="this.style.filter='brightness(1)';">
        Cancelar
      </div>
    </div>
  </div>

{% else %}

  <div style="
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border-left: 5px solid #ff7b00;
    border-radius: 10px;
    padding: 18px 20px;
    color: #f0f0f0;
    box-shadow: 0 0 20px rgba(255, 120, 0, 0.25);
    font-family: 'Segoe UI', sans-serif;
  ">
    <h3 style="
      text-transform: uppercase;
      color: #ff7b00;
      text-align: center;
      margin-bottom: 12px;
    ">⚙️ Menu do Painel</h3>

    <div class="ui vertical fluid buttons">
      <a href="/painel.html" class="ui fluid button" style="margin-bottom:4px; background-color:#33221f; color:#ffae66; font-weight:bold;">
        <i class="user circle icon"></i> Minha Conta
      </a>
      <a href="/painel-personagens.html" class="ui fluid button" style="margin-bottom:4px; background-color:#33221f; color:#ffae66; font-weight:bold;">
        <i class="users icon"></i> Meus Personagens
      </a>
      <a href="/painel-exchanges.html" class="ui fluid button" style="margin-bottom:4px; background-color:#33221f; color:#ffae66; font-weight:bold;">
        <i class="gem icon"></i> VIP e Trocas
      </a>
    </div>

    <div class="ui divider" style="border-color: rgba(255, 120, 0, 0.3); margin: 10px 0;"></div>

    <h3 style="text-transform: uppercase; color: #ff7b00; text-align:center; margin-bottom: 10px;">🛒 Loja</h3>

    <div class="ui vertical fluid buttons">
      <a href="/shopping.html" class="ui fluid button" style="margin-bottom:4px; background-color:#33221f; color:#ffae66; font-weight:bold;">
        <i class="shopping cart icon"></i> Shopping
      </a>
      <a href="/golds.html" class="ui fluid button" style="margin-bottom:4px; background-color:#33221f; color:#ffae66; font-weight:bold;">
        <i class="money bill alternate icon"></i> Comprar Golds
      </a>
      <a href="/confirmar_pagamento.html" class="ui fluid button" style="margin-bottom:4px; background-color:#33221f; color:#ffae66; font-weight:bold;">
        <i class="credit card icon"></i> Confirmar Pagamento
      </a>
    </div>

    <div class="ui divider" style="border-color: rgba(255, 120, 0, 0.3); margin: 10px 0;"></div>

    <a id="logout" href="#" class="ui fluid button" style="
      background-color: #793733;
      color: white;
      font-weight: bold;
      transition: 0.3s;
    " onmouseover="this.style.filter='brightness(1.3)';" onmouseout="this.style.filter='brightness(1)';">
      <i class="sign-out alternate icon"></i> Sair
    </a>
  </div>

  <!-- Modal: Alterar Senha (ISOLADO PARA O MENU) -->
  <div class="ui modal change-password-menu tiny" style="
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    color: #f0f0f0;
    border: 1px solid rgba(255, 123, 0, 0.4);
    box-shadow: 0 0 20px rgba(255, 120, 0, 0.35);
    font-family: 'Segoe UI', sans-serif;
  ">
    <div class="header" style="
      background: linear-gradient(90deg, #ff7b00, #ff5e00);
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 700;
    ">
      Alterar Senha
    </div>

    <div class="content" style="background: transparent; color: #f0f0f0;">
      <p>Preencha os campos abaixo para alterar sua senha com segurança.</p>
      <form id="change-password-form-menu" class="ui form">
        <div id="change-password-error" class="ui message error" style="display:none;">
          Falha ao alterar a senha. Verifique os dados.
        </div>
        <table style="width:100%; border-collapse:collapse;">
          <tr>
            <td style="padding:6px 0;">
              <input id="old-password" type="password" placeholder="Senha atual"
                     style="background:#2a2a2a; border:1px solid rgba(255,123,0,0.3); color:#fff; width:100%; padding:8px; border-radius:5px;">
            </td>
          </tr>
          <tr>
            <td style="padding:6px 0;">
              <input id="new-password" type="password" placeholder="Nova senha"
                     style="background:#2a2a2a; border:1px solid rgba(255,123,0,0.3); color:#fff; width:100%; padding:8px; border-radius:5px;">
            </td>
          </tr>
          <tr>
            <td style="padding:6px 0;">
              <input id="confirm-password" type="password" placeholder="Confirmar nova senha"
                     style="background:#2a2a2a; border:1px solid rgba(255,123,0,0.3); color:#fff; width:100%; padding:8px; border-radius:5px;">
            </td>
          </tr>
        </table>
      </form>
    </div>

    <div class="actions" style="
      background: rgba(0,0,0,0.3);
      border-top: 1px solid rgba(255,123,0,0.2);
      text-align:right;
      padding:10px;
    ">
      <div id="change-password-submit-menu" class="ui button" style="
        background: linear-gradient(90deg, #ff7b00, #ff5e00);
        color:#fff;
        font-weight:bold;
        border-radius:6px;
        transition:0.3s;
        margin-right:5px;
      ">
        Alterar
      </div>
      <div class="ui cancel button" style="
        background:#3a3a3a;
        color:#ccc;
        font-weight:bold;
        border-radius:6px;
        transition:0.3s;
      ">
        Cancelar
      </div>
    </div>
  </div>

  <script>
    // Corrigido: cada modal abre isoladamente
    $('#change-password-button').on('click', function() {
      $('.ui.modal.change-password-menu').modal('show');
    });
    $('#forgot-password').on('click', function() {
      $('.ui.modal.forgot-password').modal('show');
    });
  </script>

{% endif %}
{% endauth %}