{% extends "tesm_core/base.html" %}
{% from "tesm_core/macros.html" import alert, pill %}
{% from "tesm/_vnc_flaeche.html" import vnc_flaeche, vnc_status, vnc_zugangsdaten, vnc_tasten %}

{% block page_title %}Bildschirm: {{ device.name }}{% endblock %}
{% block page_sub %}{{ zugang.ziel }}:{{ zugang.port }}{% endblock %}

{% block breadcrumb %}
<nav class="breadcrumb">
  <span><a href="{{ url_for('devices.overview') }}">Clients</a></span>
  <span><a href="{{ url_for('devices.detail', device_id=device.id) }}">{{ device.name }}</a></span>
  <span>Bildschirm</span>
</nav>
{% endblock %}

{% block content %}
<div class="stack">
  {% if zugang.hinderungsgrund %}
    {{ alert(zugang.hinderungsgrund, 'warning') }}
  {% endif %}

  <section class="card">
    <div class="card__header">
      <div class="flex-1">
        <div class="card__title">
          {{ icon('monitor', size=17) }} {{ device.name }}
          {% if zugang.absage %}{{ pill('Verbindung abgelehnt', 'warning') }}
          {% elif zugang.verfahren %}
            {% if zugang.browsertauglich %}{{ pill('Browser-Sitzung möglich', 'online') }}
            {% else %}{{ pill('Verfahren nicht unterstützt', 'warning') }}{% endif %}
          {% endif %}
        </div>
        <div class="card__sub">
          Tastatur und Maus gehen an das Gerät, sobald das Bild steht. Die Zwischenablage
          bleibt getrennt.
          {% if zugang.verfahren %}
            Zuletzt angebotene Anmeldeverfahren:
            {% for nummer in zugang.verfahren %}{{ verfahren_name(nummer) }}{% if not loop.last %}, {% endif %}{% endfor %}.
          {% else %}
            Welche Anmeldeverfahren das Gerät anbietet, ist nicht bekannt – die Seite
            fragt es nicht von sich aus.
          {% endif %}
        </div>
      </div>
      <div class="row row--tight">
        {{ vnc_tasten() }}
        {# Ausdrücklich ein Knopf und keine Nebenwirkung des Seitenaufbaus: die
           Prüfung bricht eine Protokollverhandlung ab, und RealVNC zählt das.
           Wer sucht, drückt ihn; wer nur arbeiten will, merkt nichts davon. #}
        <form method="post" data-no-guard
              action="{{ url_for('screen.probe', device_id=device.id) }}">
          <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
          <button class="btn btn--sm btn--ghost" type="submit"
                  title="Fragt das Gerät, welche Anmeldeverfahren es anbietet. Das ist
eine eigene Verbindung, die abgebrochen wird – ein RealVNC Server zählt so etwas mit.
Nicht unmittelbar vor dem Verbinden drücken.">
            Verfahren prüfen
          </button>
        </form>
        <a class="btn btn--sm btn--ghost"
           href="{{ url_for('devices.vnc_connection', device_id=device.id) }}">
          {{ icon('download', size=14) }} Verbindungsdatei
        </a>
      </div>
    </div>

    <div class="card__body stack" id="screen" data-sitzung="{{ quelle }}">
      {{ vnc_status() }}
      {{ vnc_zugangsdaten() }}
      {{ vnc_flaeche() }}

      {% if not darf_geheimnis and device.credential_id %}
        <p class="fs-xs faint">
          Für diesen Client sind Zugangsdaten hinterlegt. TESM gibt sie nur an Konten
          heraus, die Geheimnisse ohnehin einsehen dürfen – sonst wären sie über den
          Umweg einer Bildschirmsitzung für jeden lesbar, der sie öffnen darf. Tragen
          Sie sie oben ein; sie werden nicht gespeichert.
        </p>
      {% endif %}
    </div>
  </section>
</div>
{% endblock %}

{% block scripts %}
<script type="module" src="{{ asset_url('js/screen.js') }}" nonce="{{ csp_nonce }}"></script>
{% endblock %}