{% extends "document.html" %}
{% block title %}{{ view.hostname if view else 'Session ended' }} · Lab RDP{% endblock %}
{% block head %}
  <link rel="stylesheet" href="{{ asset('desktop.css') }}">
  <script src="{{ asset('desktop.js') }}" defer></script>
{% endblock %}
{% block page %}desktop{% endblock %}
{% block body %}
<div id="desktop-app" data-token="{{ token if view else '' }}" data-host="{{ view.hostname if view else '' }}" data-state="{{ 'login' if view else 'ended' }}">
  {% if view %}
  <section class="win-screen" data-panel="login">
    <form id="win-login" class="win-card">
      <div class="win-avatar">{{ icon('user', 72) }}</div>
      <h1>{{ view.hostname }}</h1>
      <p id="win-note">Sign in with your Windows account</p>
      <input id="win-user" name="username" placeholder="User name" autocomplete="username" spellcheck="false" autofocus required>
      <div class="win-password">
        <input id="win-pass" name="password" type="password" placeholder="Password" autocomplete="current-password">
        <button type="submit" aria-label="Sign in">{{ icon('arrow-right', 18) }}</button>
      </div>
      <p class="win-domain">Sign in to: {{ config.rdp_default_domain or view.hostname }}</p>
      <div id="win-error" class="win-error" role="alert" hidden></div>
      <button type="button" class="win-link" id="win-cancel">Cancel</button>
    </form>
    {% if config.relay_enabled %}<a class="win-foot" href="/connect/{{ token }}" target="_blank" rel="noopener">Having trouble? Use the Remote Desktop app</a>{% endif %}
  </section>

  <section class="win-screen" data-panel="connecting">
    <div class="win-spinner" aria-hidden="true"></div>
    <p class="win-welcome">Welcome</p>
  </section>

  <section class="remote" data-panel="desktop">
    <header class="remote-bar">
      <span class="remote-name"><i></i>{{ view.hostname }}</span>
      <div class="remote-actions">
        <button type="button" id="send-cad">Ctrl+Alt+Del</button>
        <button type="button" id="toggle-full" title="Full screen">{{ icon('maximize', 14) }}Full screen</button>
        <button type="button" id="disconnect" class="danger">Disconnect</button>
      </div>
    </header>
    <canvas id="remote-screen" tabindex="0" aria-label="Remote desktop of {{ view.hostname }}"></canvas>
  </section>
  {% endif %}

  <section class="win-screen" data-panel="ended">
    <div class="win-card">
      <h1 id="ended-title">This session has ended</h1>
      <p id="ended-text">{{ '' if view else 'The machine was released. Go back and click Connect to start again.' }}</p>
      <div class="win-buttons">
        <button type="button" id="reconnect" {{ 'hidden' if not view }}>Sign in again</button>
        <a href="/">Back to machines</a>
      </div>
    </div>
  </section>
</div>
{% endblock %}