{% extends 'base.html' %}

{% block title %}Login — 2N Painel{% endblock %}

{% block head %}
<style>
  .login-page {
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .login-box {
    width: 100%;
    max-width: 380px;
  }
  .login-logo {
    text-align: center;
    margin-bottom: 32px;
  }
  .login-logo .brand {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text);
  }
  .login-logo .brand span { color: var(--accent); }
  .login-logo .sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
  .login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
  }
  .login-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
  .login-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
  .login-footer { text-align: center; margin-top: 20px; font-size: 12px; color: var(--text-dim); }
</style>
{% endblock %}

{% block auth_content %}
<div class="login-page">
  <div class="login-box">
    <div class="login-logo">
      <div class="brand">2N <span>Painel</span></div>
      <div class="sub">Agência Digital — Área interna</div>
    </div>
    <div class="login-card">
      <div class="login-title">Entrar</div>
      <div class="login-sub">Use suas credenciais de acesso</div>

      {% with messages = get_flashed_messages(with_categories=true) %}
        {% for cat, msg in messages %}
          <div class="alert alert-{{ cat }}" style="margin-bottom:16px;">{{ msg }}</div>
        {% endfor %}
      {% endwith %}

      <form method="POST">
        <div class="form-group">
          <label class="form-label">E-mail</label>
          <input type="email" name="email" class="form-control" placeholder="seu@email.com" required autofocus>
        </div>
        <div class="form-group">
          <label class="form-label">Senha</label>
          <input type="password" name="password" class="form-control" placeholder="••••••••" required>
        </div>
        <button type="submit" class="btn btn-primary w-full" style="margin-top:8px; justify-content:center;">
          Entrar no Painel
        </button>
      </form>
    </div>
    <div class="login-footer">2N Agência Digital · Sistema interno</div>
  </div>
</div>
{% endblock %}