{% extends 'workflows/base_shell.html' %}
{% load static i18n %}

{% block title %}{% trans "Anmeldung" %}{% endblock %}

{% block extra_head %}
<style>
    body { margin: 0; font-family: Arial, sans-serif; min-height: 100vh; background: linear-gradient(160deg, #eef6ff, #fff3f3); padding: 24px; }
    .card { width: min(420px, calc(100% - 28px)); margin: 0 auto; background: #fff; border: 1px solid #d9e3f0; border-radius: 14px; padding: 20px; box-shadow: 0 12px 30px rgba(28, 45, 79, 0.12); }
    h1 { margin: 0 0 8px; font-size: 24px; }
    p { margin: 0 0 14px; color: #607086; }
    .field { margin-bottom: 12px; }
    label { display: block; font-weight: 600; margin-bottom: 6px; }
    input { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 8px; }
    .btn { width: 100%; }
    .errorlist { color: #b91c1c; margin: 6px 0; }
  </style>
{% endblock %}

{% block shell_header %}
{% include 'workflows/includes/app_header.html' %}
{% endblock %}

{% block shell_body %}
<div class="card"><h1>{% trans "Anmeldung" %}</h1>
    <p>{% trans "Bitte melden Sie sich mit Ihrem Benutzerkonto an." %}</p>

    <form method="post" action="/accounts/login/">
      {% csrf_token %}
      {% if form.errors %}
        <div class="errorlist">{% trans "Anmeldung fehlgeschlagen. Bitte Zugangsdaten prüfen." %}</div>
      {% endif %}
      <div class="field">{{ form.username.label_tag }}{{ form.username }}</div>
      <div class="field">{{ form.password.label_tag }}{{ form.password }}</div>
      <button class="btn btn-primary" type="submit">{% trans "Anmelden" %}</button>
    </form>
  </div>
{% endblock %}
{% endblock %}