{% extends 'layouts/base-auth.html' %}
{% load static widget_tweaks i18n %}
{% load static socialaccount %}
{% get_providers as socialaccount_providers %}

{% block content %}
<style>
  body {
    background: url("{{ background_url }}") no-repeat center center fixed;
    background-size: cover;
  }

  .login-panel {
    background-color: rgba(15, 15, 15, 0.92);
    color: #f0e6d2;
    border-radius: 1rem;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
    border: 1px solid #e0c36b;
  }

  .login-panel h1 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: #e0c36b;
    text-shadow: 0 0 10px rgba(255, 215, 100, 0.4);
  }

  .login-panel .form-control {
    background-color: #1a1a1a;
    border-color: #444;
    color: #fff;
  }

  .login-panel .form-control::placeholder {
    color: #aaa;
  }

  .btn-login {
    background: linear-gradient(to right, #b89b56, #d5c170);
    color: #000;
    font-weight: bold;
    text-shadow: 0 0 5px #fff8dc;
    border: none;
  }

  .btn-login:hover {
    background: linear-gradient(to right, #d5c170, #b89b56);
  }

  .auth-link a {
    color: #e0c36b;
  }

  .auth-link a:hover {
    color: #fff;
    text-decoration: underline;
  }

  /* Estilos para o ícone de olho */
  .password-field {
    position: relative;
  }

  .password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #e0c36b;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
    z-index: 10;
  }

  .password-toggle:hover {
    color: #fff;
  }

  .password-toggle:focus {
    outline: none;
    box-shadow: none;
  }

  .password-field .form-control {
    padding-right: 40px; /* Espaço para o ícone */
  }

  /* Estilos para mensagens de suspensão */
  .alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
    color: #f8d7da;
  }

  .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: #ffc107;
    color: #fff3cd;
  }

  .alert strong {
    color: #e0c36b;
  }

  .alert small {
    color: #aaa;
  }

</style>

<section class="vh-100 d-flex align-items-center justify-content-center">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6 col-lg-5">
        <div class="p-4 login-panel">
          <div class="text-center mb-4">
            <h1>{% trans "Entre no Reino" %}</h1>
          </div>
          <form method="post" class="mt-4">
            {% csrf_token %}

            {% if form.non_field_errors %}
              {% for error in form.non_field_errors %}
                {% if "🔴" in error or "🟡" in error %}
                  <!-- Mensagem de suspensão/banimento -->
                  <div class="alert alert-danger border-danger mb-3" role="alert">
                    <div class="d-flex align-items-start">
                      <i class="bi bi-exclamation-triangle-fill me-2 mt-1" style="font-size: 1.2em;"></i>
                      <div class="flex-grow-1">
                        {{ error|linebreaks }}
                      </div>
                    </div>
                  </div>
                {% else %}
                  <!-- Outras mensagens de erro -->
                  <div class="alert alert-warning border-warning mb-3" role="alert">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                    {{ error }}
                  </div>
                {% endif %}
              {% endfor %}
            {% endif %}

            <div class="mb-3">
              <label for="email" class="form-label">{{ form.username.label|default:"{% trans 'Usuário' %}" }}</label>
              <div class="input-group">
                <span class="input-group-text bg-dark border-secondary text-light">
                  <i class="bi bi-person-fill"></i>
                </span>
                {{ form.username|add_class:"form-control bg-dark border-secondary text-light" }}
              </div>
            </div>

            <div class="mb-3">
              <label for="password" class="form-label">{{ form.password.label|default:"{% trans 'Senha' %}" }}</label>
              <div class="password-field">
                <div class="input-group">
                  <span class="input-group-text bg-dark border-secondary text-light">
                    <i class="bi bi-lock-fill"></i>
                  </span>
                  {{ form.password|add_class:"form-control bg-dark border-secondary text-light" }}
                </div>
                <button type="button" class="password-toggle" onclick="togglePassword('id_password')">
                  <i class="bi bi-eye" id="eye-icon-password"></i>
                </button>
              </div>
            </div>

            <div class="d-flex justify-content-between align-items-center mb-4">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="remember">
                <label class="form-check-label" for="remember">{% trans "Lembrar de mim" %}</label>
              </div>
              <div class="auth-link small">
                <a href="{% url 'password_reset' %}">{% trans "Esqueceu a senha?" %}</a>
              </div>
            </div>

            {% if requires_captcha %}
              <div class="mb-3">
                <div class="alert alert-warning" role="alert">
                  <i class="bi bi-exclamation-triangle-fill me-2"></i>
                  {% trans "Múltiplas tentativas de login detectadas. Por favor, complete o captcha para continuar." %}
                  <br>
                  <small class="text-muted">
                    {% trans "Tentativas:" %} {{ login_attempts }} (limite: {{ max_attempts }})
                  </small>
                </div>
                <div class="h-captcha" data-sitekey="{{ hcaptcha_site_key }}" data-callback="onCaptchaSuccess" data-expired-callback="onCaptchaExpired"></div>
                <input type="hidden" name="captcha_token" id="captcha_token">
              </div>
            {% endif %}

            <div class="d-grid">
              <button type="submit" class="btn btn-login btn-block">{% trans "Entrar no Reino" %}</button>
            </div>
          </form>

          {% if SOCIAL_LOGIN_ENABLED and SOCIAL_LOGIN_SHOW_SECTION %}
            <div class="mt-3 mb-4 text-center">
              <span class="fw-normal">{% trans "Ou faça login com:" %}</span>
            </div>
            <div class="d-flex justify-content-center my-4 gap-3">
              {% if SOCIAL_LOGIN_GOOGLE_ENABLED %}
                <form action="{% provider_login_url 'google' %}" method="post">
                  {% csrf_token %}

                  <button type="submit" class="btn btn-icon-only btn-pill btn-outline-gray-500" aria-label="google button"
                    title="google button">
                    <svg class="icon icon-xxs" fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                    viewBox="0 0 210 210" xml:space="preserve">
                      <path d="M0,105C0,47.103,47.103,0,105,0c23.383,0,45.515,7.523,64.004,21.756l-24.4,31.696C133.172,44.652,119.477,40,105,40
                        c-35.841,0-65,29.159-65,65s29.159,65,65,65c28.867,0,53.398-18.913,61.852-45H105V85h105v20c0,57.897-47.103,105-105,105
                        S0,162.897,0,105z"/>
                    </svg>
                  </button>
                </form>
              {% endif %}
              
              {% if SOCIAL_LOGIN_DISCORD_ENABLED %}
                <form action="{% provider_login_url 'discord' %}" method="post">
                  {% csrf_token %}

                  <button type="submit" class="btn btn-icon-only btn-pill btn-outline-gray-500" aria-label="discord button" title="discord button">
                    <svg class="icon icon-xxs" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord"
                      role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 55">
                      <path fill="currentColor"
                        d="M60.104 4.552A58.42 58.42 0 0 0 46.852 0a41.593 41.593 0 0 0-1.972 4.06 55.088 55.088 0 0 0-16.09 0A41.593 41.593 0 0 0 26.818 0 58.42 58.42 0 0 0 13.562 4.552 61.728 61.728 0 0 0 1.5 45.48a58.638 58.638 0 0 0 17.638 9.019 43.73 43.73 0 0 0 3.765-6.093 36.66 36.66 0 0 1-5.885-2.792c.495-.364.979-.74 1.45-1.13a38.134 38.134 0 0 0 32.023 0c.474.39.958.766 1.453 1.13a36.66 36.66 0 0 1-5.89 2.792 43.73 43.73 0 0 0 3.765 6.093 58.638 58.638 0 0 0 17.638-9.019A61.728 61.728 0 0 0 60.104 4.552zM23.35 37.108c-3.244 0-5.887-2.982-5.887-6.654 0-3.672 2.621-6.654 5.887-6.654 3.277 0 5.91 3.005 5.887 6.654 0 3.672-2.621 6.654-5.887 6.654zm24.3 0c-3.244 0-5.887-2.982-5.887-6.654 0-3.672 2.621-6.654 5.887-6.654 3.277 0 5.91 3.005 5.887 6.654 0 3.672-2.61 6.654-5.887 6.654z">
                      </path>
                    </svg>
                  </button>
                </form>
              {% endif %}
              
              {% if SOCIAL_LOGIN_GITHUB_ENABLED %}
                <form action="{% provider_login_url 'github' %}" method="post">
                  {% csrf_token %}

                  <button type="submit" class="btn btn-icon-only btn-pill btn-outline-gray-500" aria-label="github button"
                    title="github button">
                    <svg class="icon icon-xxs" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github"
                      role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
                      <path fill="currentColor"
                        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
                      </path>
                    </svg>
                  </button>
                </form>
              {% endif %}
            </div>
          {% endif %}

          <div class="text-center mt-4 auth-link">
            {% trans "Ainda não tem conta?" %}
            <a href="{% url 'register' %}" class="fw-bold">{% trans "Forje seu destino" %}</a>
          </div>

          <div class="text-center mt-3">
            <div class="auth-link small">
              <a href="{% url 'index' %}">
                ← {% trans "Voltar para o início" %}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
function togglePassword(inputId) {
  const input = document.getElementById(inputId);
  const icon = document.getElementById('eye-icon-' + inputId.split('_')[1]);
  
  if (input.type === 'password') {
    input.type = 'text';
    icon.classList.remove('bi-eye');
    icon.classList.add('bi-eye-slash');
  } else {
    input.type = 'password';
    icon.classList.remove('bi-eye-slash');
    icon.classList.add('bi-eye');
  }
}

{% if requires_captcha %}
// Script para captcha - Callbacks globais
window.onCaptchaSuccess = function(token) {
  console.log('Captcha completado:', token);
  document.getElementById('captcha_token').value = token;
};

window.onCaptchaExpired = function() {
  console.log('Captcha expirado');
  document.getElementById('captcha_token').value = '';
};

document.addEventListener('DOMContentLoaded', function() {
  // Função para inicializar o hCaptcha
  function initHcaptcha() {
    if (typeof hcaptcha !== 'undefined' && hcaptcha.onReady) {
      hcaptcha.onReady(function() {
        console.log('hCaptcha carregado com sucesso');
      });
    } else {
      // Se hcaptcha ainda não estiver disponível, tenta novamente em 100ms
      setTimeout(initHcaptcha, 100);
    }
  }
  
  // Inicia a verificação
  initHcaptcha();
});
{% endif %}
</script>
{% if requires_captcha %}
<script src="https://hcaptcha.com/1/api.js" async defer></script>
{% endif %}
{% endblock content %}