{% extends "base.html" %}
{% block title %}ورود — {{ APP_NAME }}{% endblock %}
{% block content %}
<div style="min-height:88vh; display:flex; flex-direction:column;">
  <div style="display:flex; justify-content:flex-end; padding:12px 0;">
    <button type="button" class="btn btn-ghost" onclick="window.NoorTheme.toggle()" style="width:70px;">☀ / 🌙</button>
  </div>
  <div style="flex:1; display:flex; align-items:center; justify-content:center;">
    <div class="glass-panel" style="width:100%; max-width:400px; min-height:400px; padding:40px 36px; text-align:center;">
      <div style="font-size:42px; color:var(--gold-bright);">✦</div>
      <h1 class="title" style="margin:8px 0 4px;">{{ APP_NAME }}</h1>
      <p class="subtitle" style="color:var(--text-secondary); font-weight:400; margin-bottom:18px;">مدیریت مشتریان — ورود به سیستم</p>

      <form method="post" style="display:flex; flex-direction:column; gap:10px; text-align:start;">
        {{ form.hidden_tag() }}
        {{ form.username(placeholder="نام کاربری", style="min-height:44px;", autofocus=true) }}
        {{ form.password(placeholder="رمز عبور", style="min-height:44px;") }}

        {% with messages = get_flashed_messages(category_filter=["error"]) %}
          {% if messages %}
          <div style="color:var(--danger); font-size:12px; text-align:center;">{{ messages[0] }}</div>
          {% endif %}
        {% endwith %}
        {% for field in [form.username, form.password] %}
          {% for err in field.errors %}
          <div style="color:var(--danger); font-size:12px; text-align:center;">{{ err }}</div>
          {% endfor %}
        {% endfor %}

        <button type="submit" class="btn btn-gold" style="min-height:46px; margin-top:6px;">ورود</button>
      </form>
    </div>
  </div>
  <p class="muted" style="text-align:center; padding-bottom:16px;">نسخه {{ "1.0.0-web" }}</p>
</div>
{% endblock %}