<!DOCTYPE html>
<html lang="de" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login · TESM</title>
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='images/icon-dark.svg') }}" id="app-favicon">
<link rel="stylesheet" href="{{ asset_url('css/style.css') }}">
</head>
<body>

<div class="login-page">
  <div class="login-bg">
    <img src="{{ url_for('static', filename='images/logo-dark-subline.svg') }}" alt="TESM" id="login-bg-logo">
  </div>
  <div class="login-card">
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <div class="field" style="margin-bottom:18px;">
          {% for message in messages %}
          <div class="toast danger" style="position:static; animation:none;">{{ message }}</div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}

    <form method="post" data-no-unsaved-guard>
      <div class="field">
        <label for="username">Benutzername</label>
        <input type="text" id="username" name="username" autocomplete="username" required autofocus>
      </div>
      <div class="field">
        <label for="password">Passwort</label>
        <input type="password" id="password" name="password" autocomplete="current-password" required>
      </div>
      <button type="submit" class="btn btn-primary btn-block" style="margin-top:6px;">Anmelden</button>
    </form>
    <div style="margin-top:16px; font-size:10.5px; color:var(--text-faint); text-align:center;">TESM v{{ tesm_version }}</div>
  </div>
</div>

<script src="{{ asset_url('js/app.js') }}"></script>
</body>
</html>
