{% extends 'base.html' %}
{% block title %}Anmelden · {{ source.domain }} · imgsrx{% endblock %}
{% block content %}
<section id="source-login" data-source-id="{{ source.id }}" data-csrf="{{ csrf }}">
  <h1>Bei {{ source.domain }} anmelden</h1>
  <p>Blockiert die Website dieses Fenster? <a href="/sources/{{ source.id }}/session-import">Sitzung aus deinem normalen Browser übernehmen</a>.</p>
  <p>Bediene die Website im Fenster unten. Nach der Anmeldung einschließlich Zwei-Faktor-Code klickst du auf „Sitzung speichern“.</p>
  <p id="login-message" role="status" aria-live="polite">Anmeldebrowser wird gestartet …</p>
  <div class="inline-actions">
    <button id="login-save" type="button" disabled>Sitzung speichern</button>
    <button id="login-cancel" type="button" class="secondary">Abbrechen</button>
    <button id="login-retry" type="button" class="secondary" hidden>Browser erneut öffnen</button>
    <a href="/sources?source_id={{ source.id }}#source-{{ source.id }}">Zur Quelle</a>
  </div>
  <form id="login-address" class="login-address" autocomplete="off">
    <button id="login-back" type="button" class="secondary" aria-label="Zurück auf der Website">←</button>
    <label for="login-url">Adresse der Website</label>
    <input id="login-url" type="url" value="{{ source.start_url }}" autocomplete="off" spellcheck="false" required>
    <button type="submit" class="secondary">Öffnen</button>
    <button id="login-reload" type="button" class="secondary">Neu laden</button>
  </form>
  <div id="login-screen" class="login-screen" tabindex="0" role="group" aria-label="Interaktives Anmeldefenster. Website anklicken und mit der Tastatur bedienen.">
    <img id="login-frame" alt="Anmeldeseite der Website" draggable="false" width="1200" height="800" hidden>
  </div>
  <p class="muted">Felder im Bild anklicken, dann tippen. Tab wechselt zum nächsten Feld. Einfügen aus der Zwischenablage funktioniert ebenfalls.</p>
  <details><summary>Texteingabe für Touch-Geräte</summary>
    <p>Wähle zuerst das gewünschte Feld auf der Website. Gib dann den Text hier ein und sende ihn an das ausgewählte Feld.</p>
    <form id="login-text-form" autocomplete="off" class="inline-actions">
      <label>Text oder Passwort<input id="login-text" type="password" autocomplete="off" maxlength="4000"></label>
      <button type="submit" class="secondary">An Feld senden</button>
      <button id="login-enter" type="button" class="secondary">Enter</button>
      <button id="login-tab" type="button" class="secondary">Nächstes Feld</button>
    </form>
  </details>
  <p class="muted">Die Sitzung wird lokal verschlüsselt gespeichert. Bei Ablauf fordert die Quelle eine neue Anmeldung an und behält ihre Warteschlange.</p>
</section>
<script src="/static/source-login.js" defer></script>
{% endblock %}