{# ==========================================================================
   Grundgeruest fuer Seiten ohne Anwendungsrahmen: Anmeldung, zweiter Faktor,
   Kundenportal, Self-Service.

   Wichtiger Unterschied zu base.html: Flash-Meldungen werden hier **sichtbar
   serverseitig** gerendert, nicht ueber die JSON-Bruecke. Der Vorgaenger hatte
   dieselbe Trennung; sie ist wichtig, weil diese Seiten auch ohne JavaScript
   nutzbar bleiben muessen (und weil Tests hier direkt auf Text pruefen).
   ========================================================================== #}
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="robots" content="noindex, nofollow">
  <title>{% block title %}{{ self.heading() }} &middot; {{ app_name }}{% endblock %}</title>
  <link rel="icon" href="{{ asset_url('img/favicon.svg') }}" type="image/svg+xml">
  <link rel="stylesheet" href="{{ asset_url('css/base.css') }}">
  <link rel="stylesheet" href="{{ asset_url('css/components.css') }}">
  {% block extra_head %}{% endblock %}
</head>
<body data-csrf="{{ csrf_token() }}">
<div class="auth-page">
  {% if auth_tagline %}
    {# Wortmarke mit Funktionszeile als tatsaechlicher Seitenhintergrund --
       uebernommen vom Vorgaenger. Bewusst inline und mit Themen-Tokens statt
       zweier Dateien fuer hell und dunkel: bei der Einstellung "System" und
       beim Umschalten von Hand waere die versteckte Variante die falsche.
       ``aria-hidden``, weil der Name schon in der Ueberschrift steht. #}
    <div class="auth-backdrop" aria-hidden="true">
      <svg viewBox="0 0 620 190" xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(150,15)">
          <circle cx="298" cy="70" r="15" fill="var(--logo-mark)" opacity="0.22"/>
          <polyline points="0,70 90,70 100,70 108,20 116,120 124,70 134,70 200,70 210,70
                            218,35 226,105 234,70 244,70 300,70"
                    fill="none" stroke="var(--logo-mark)" stroke-width="3.2"
                    stroke-linecap="round" stroke-linejoin="round" opacity="0.85"/>
          <text x="14" y="98" font-family="var(--font-mono)" font-weight="800"
                font-size="82" letter-spacing="2" fill="var(--logo-text)">TESM</text>
          <circle cx="298" cy="70" r="8" fill="var(--logo-mark)"/>
        </g>
        <text x="310" y="178" text-anchor="middle" font-family="var(--font-sans)"
              font-weight="600" font-size="13" letter-spacing="1.5"
              fill="var(--logo-mark)">{{ auth_tagline }}</text>
      </svg>
    </div>
  {% endif %}
  <div class="auth-card {% block card_class %}{% endblock %}">
    <div class="auth-brand">
      <span class="auth-brand__mark" aria-hidden="true">{{ app_short }}</span>
      <h1>{% block heading %}{{ app_name }}{% endblock %}</h1>
      {% set sub %}{% block subheading %}{% endblock %}{% endset %}
      {% if sub | trim %}<p>{{ sub }}</p>{% endif %}
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        <div class="stack stack--tight">
          {% for category, message in messages %}
            {% set kind = {'error': 'danger', 'danger': 'danger', 'success': 'success',
                           'warning': 'warning'}.get(category, 'info') %}
            <div class="alert alert--{{ kind }}" role="alert">
              {{ icon('info' if kind == 'info' else ('check' if kind == 'success' else 'alert'), size=18) }}
              <div class="alert__body">{{ message }}</div>
            </div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}

    {% block content %}{% endblock %}

    <p class="auth-footnote">{{ app_name }} {{ app_version }} &middot; &copy; {{ current_year }} WiS GmbH</p>
  </div>
</div>
<script type="module" src="{{ asset_url('js/app.js') }}" nonce="{{ csp_nonce }}"></script>
{% block scripts %}{% endblock %}
</body>
</html>
