{% extends "base.html" %}

{% block title %}
  {% if current_lang == 'de' %}Editor Login{% else %}Editor Login{% endif %}
{% endblock %}

{% block content %}
<div class="card login-card">
  <div style="text-align: center; margin-bottom: 24px;">
    <h2 style="font-family: var(--font-title); font-size: 1.8rem; font-weight: 700; margin: 0;">
      {% if current_lang == 'de' %}Editor Anmeldung{% else %}Editor Login{% endif %}
    </h2>
    <p style="color: var(--text-muted); font-size: 0.9rem; margin-top: 8px;">
      {% if current_lang == 'de' %}Bitte geben Sie Ihren Benutzernamen und Ihr Passwort ein.{% else %}Please enter your username and password.{% endif %}
    </p>
  </div>

  {% if error %}
    <div class="flash-message flash-danger">
      <span>{% if current_lang == 'de' %}{{ error.de }}{% else %}{{ error.en }}{% endif %}</span>
    </div>
  {% endif %}

  <form action="/login?next={{ next }}" method="POST" class="editor-form">
    <div class="form-group" style="margin-bottom: 16px;">
      <label class="form-label" for="login-username">
        {% if current_lang == 'de' %}Benutzername{% else %}Username{% endif %}
      </label>
      <input type="text" id="login-username" name="username" class="form-input" placeholder="admin" required autofocus autocomplete="username">
    </div>

    <div class="form-group">
      <label class="form-label" for="login-password">
        {% if current_lang == 'de' %}Passwort{% else %}Password{% endif %}
      </label>
      <input type="password" id="login-password" name="password" class="form-input" placeholder="••••••••" required autocomplete="current-password">
    </div>

    <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 24px;">
      {% if current_lang == 'de' %}Anmelden{% else %}Login{% endif %}
    </button>
  </form>
</div>
{% endblock %}