{% auth "user" %}
  {% if not data %}
    <form id="login" name="register" class="ui form">
      <div id="login-error" class="ui message error">Falha na autenticação</div>
      <div class="required field">
        <div class="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>
      <div class="required field">
        <div class="field">
          <div class="ui inverted input">
            <input id="login-password" placeholder="Senha" type="password">
          </div>
        </div>
      </div>
      <div class="field">
        <a id="forgot-password" href="#">Esqueci a senha</a>
      </div>
      <div class="field">
        <button id="login-submit" type="button" class="ui orange fluid button" role="button">Entrar</button>
      </div>
    </form>

    <div class="ui modal forgot-password tiny">
      <div class="header">Esqueci a senha</div>
      <div class="content">
        <p class="corpreta">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">Falha na autenticação</div>
          <div class="required field">
            <div class="field">
              <div class="ui input">
                <input id="forgot-username" placeholder="Usuário" type="text" oninput="this.value=this.value.toLowerCase()" maxlength="10">
              </div>
            </div>
          </div>
          <div class="required field">
            <div class="field">
              <div class="ui input">
                <input id="forgot-email" placeholder="Email" type="text">
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="actions">
        <div id="forgot-submit" class="ui green button">Recuperar</div>
        <div class="ui cancel button">Cancelar</div>
      </div>
    </div>

  {% else %}
    <h3>Menu</h3>
    <div class="ui vertical black fluid buttons">
      <a href="/painel.html" class="ui fluid button" style="margin-bottom:2px; background-color: #212121;" role="button">Minha conta</a>
      <a href="/painel-personagens.html" class="ui fluid button" style="margin-bottom:2px; background-color: #212121; role="button">Meus personagens</a>
      <a href="/painel-exchanges.html" class="ui fluid button" style="margin-bottom:2px; background-color: #212121; role="button">VIP e Trocas</a>
    </div>
	<div class="ui hidden divider" style="margin: 2px;"></div>
	 <h3>Shop</h3>
    <div class="ui vertical black fluid buttons">
	  <a href="/shop_golds.html" class="ui fluid button" style="margin-bottom:2px; background-color: #212121; role="button">Shop Golds</a>
	  	<a href="/shop_premium.html" class="ui fluid button" style="margin-bottom:2px; background-color: #212121; role="button">Shop Premium</a>
	<a href="/shop_rubi.html" class="ui fluid button" style="margin-bottom:2px; background-color: #212121; role="button">Shop Rubi</a>
		<a href="/shop_cash.html" class="ui fluid button" style="margin-bottom:2px; background-color: #212121; role="button">Shop Cash</a>
	  <a href="/golds.html" class="ui fluid button" style="margin-bottom:2px; background-color: #212121; role="button">Comprar Moedas</a>
	 <a href="/confirmar_pagamento.html" class="ui fluid button" style="margin-bottom:2px; background-color: #212121; role="button">Confirmar Pagamento</a>
    </div>
    <div class="ui hidden divider" style="margin: 2px;"></div>
    <a id="logout" href="#" class="ui black fluid button" style="background-color: #212121; role="button">Sair</a>
  {% endif %}
{% endauth %}