{% extends "tesm_core/base.html" %}
{% from "tesm_core/macros.html" import alert, pill %}

{% 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 %}
{# Die Zugangsdaten stehen in einem eigenen JSON-Block statt in einem
   data-Attribut: ein Attribut steht im Quelltext der Seite zwischen der
   Beschriftung und wird beim Kopieren einer Zeile mitgenommen. Beides ist
   derselbe Inhalt -- der Unterschied ist, wie leicht er einem versehentlich
   unter die Augen kommt. #}
<script type="application/json" id="screen-credentials-data">{{ vorgaben | tojson }}</script>

<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.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 %}
            Angebotene Anmeldeverfahren:
            {% for nummer in zugang.verfahren %}{{ verfahren_name(nummer) }}{% if not loop.last %}, {% endif %}{% endfor %}.
          {% endif %}
        </div>
      </div>
      <div class="row row--tight">
        <button class="btn btn--sm" type="button" id="screen-cad" hidden
                title="Strg+Alt+Entf an das Gerät senden">Strg+Alt+Entf</button>
        <button class="btn btn--sm" type="button" id="screen-disconnect" hidden>Trennen</button>
        <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">
      <div id="screen-status" class="screen__status">Wird vorbereitet …</div>

      <form id="screen-credentials" class="row row--tight" hidden onsubmit="return false">
        <label class="field">
          <span class="field__label">Benutzer</span>
          <input class="input" type="text" id="screen-username" autocomplete="off"
                 value="{{ vorgaben.username }}">
        </label>
        <label class="field">
          <span class="field__label">Passwort</span>
          <input class="input" type="password" id="screen-password" autocomplete="off">
        </label>
        <button class="btn btn--primary" type="button" id="screen-send">Anmelden</button>
      </form>

      <div id="screen" class="screen"
           data-socket="{{ websocket_path }}"
           data-ziel="{{ zugang.ziel }}:{{ zugang.port }}"
           data-verfahren="{{ zugang.verfahren | join(',') }}"
           data-blockiert="{{ '1' if zugang.hinderungsgrund else '0' }}"
           data-grund="{{ zugang.hinderungsgrund }}">
        <div id="screen-canvas" class="screen__canvas" hidden></div>
      </div>

      {% 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 %}