{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
  Browser SSH terminal for a WEBSITE'S OWN system user (never root).
  Three states, chosen server-side so a client cannot skip a check by editing
  the DOM: no domain yet (site picker), shell access turned off (link to
  /websites/siteSSH), or the terminal itself.
{% endcomment %}

{% block title %}Terminal{% if domain %} · {{ domain }}{% endif %}{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{% static 'webTerminal/webTerminal.css' %}">
{% endblock %}

{% block content %}
<div ng-controller="webTerminalController" data-domain="{{ domain }}">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1"><i class="fa-solid fa-terminal me-2 text-muted"></i>Terminal</h1>
      <p class="text-muted mb-0 small" ng-if="domain">
        <span ng-bind="domain"></span> &middot; system user <span ng-bind="systemUser"></span>
        {% if domain %}&middot; <a ng-href="/websites/manage?domain={{ domain|urlencode }}">back to Manage</a>{% endif %}
      </p>
    </div>
  </div>

  {% if not domain %}
  {# -------------------------------------------------- (1) site picker #}
  <div class="card">
    <div class="card-header">Choose a website</div>
    <div class="card-body">
      {% if websites %}
      <div class="input-group" style="max-width: 480px">
        <select class="form-select" id="cpTerminalDomain">
          <option value="">Select a website&hellip;</option>
          {% for site in websites %}
            <option value="{{ site }}">{{ site }}</option>
          {% endfor %}
        </select>
        <button type="button" class="btn btn-primary" onclick="var v=document.getElementById('cpTerminalDomain').value; if(v){window.location='/terminal/?domain='+encodeURIComponent(v);}">
          <i class="fa-solid fa-arrow-right me-1"></i>Open terminal
        </button>
      </div>
      {% else %}
      <p class="text-muted mb-0">No websites are available to your account yet.</p>
      {% endif %}
    </div>
  </div>

  {% elif suspended %}
  {# -------------------------------------------------- suspended #}
  <div class="alert alert-warning">
    <i class="fa-solid fa-triangle-exclamation me-1"></i>
    This website is suspended. A terminal session cannot be opened while it is.
  </div>

  {% elif not shellEnabled %}
  {# -------------------------------------------------- (1) shell disabled #}
  <div class="alert alert-warning d-flex align-items-center justify-content-between flex-wrap gap-2">
    <span>
      <i class="fa-solid fa-lock me-1"></i>
      SSH shell access is turned off for <span ng-bind="systemUser"></span>.
    </span>
    <a class="btn btn-sm btn-outline-secondary" href="{{ sshSettingsUrl }}">
      <i class="fa-solid fa-gear me-1"></i>Enable shell access
    </a>
  </div>

  {% else %}
  {# -------------------------------------------------- (1) the terminal #}
  {% if passwordAuthDisabled %}
  <div class="alert alert-warning py-2 px-3" role="alert">
    <i class="fa-solid fa-triangle-exclamation me-1"></i>
    This server's SSH daemon has password logins turned off
    (<code>PasswordAuthentication no</code> on the SSH-hardening page). A
    terminal connection needs a password and will be refused until password
    logins are allowed, at least for this server's own loopback address.
  </div>
  {% endif %}
  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>

  <div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
      <span>
        <i class="fa-solid fa-circle me-1" ng-class="connected ? 'text-success' : (connecting ? 'text-warning' : 'text-muted')"></i>
        <span class="small text-muted" ng-bind="statusText"></span>
      </span>
      <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-outline-secondary" ng-click="disconnect()" ng-if="connected">
          <i class="fa-solid fa-plug-circle-xmark me-1"></i>Disconnect
        </button>
      </div>
    </div>

    <div class="card-body" ng-show="!connected && !connecting">
      <form novalidate ng-submit="connect()" autocomplete="off">
        <label class="form-label small" for="cpTerminalPassword">
          SSH password for <strong ng-bind="systemUser"></strong>
        </label>
        <div class="input-group" style="max-width: 420px">
          <input type="password" class="form-control" id="cpTerminalPassword"
                 ng-model="form.password" autocomplete="new-password" required
                 placeholder="Never stored, sent once at connect">
          <button type="submit" class="btn btn-primary" ng-disabled="!form.password">
            <i class="fa-solid fa-plug me-1"></i>Connect
          </button>
        </div>
        <p class="form-text small text-muted mb-0">
          This password is sent once, over this encrypted connection, and is
          never written to disk or to a log.
        </p>
      </form>
    </div>

    <div class="card-body" ng-show="connecting && !connected">
      <p class="text-muted mb-0"><i class="fa-solid fa-spinner fa-spin me-1"></i>Connecting&hellip;</p>
    </div>

    <div class="cp-terminal-wrap" ng-show="connected">
      <pre id="cpTerminalGrid" class="cp-terminal-grid" tabindex="0" aria-label="Terminal"></pre>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_SITE_DOMAIN = "{{ domain|escapejs }}";
  window.CP_TERMINAL_CONFIG = {
    domain: "{{ domain|escapejs }}",
    systemUser: "{{ systemUser|escapejs }}",
    shellEnabled: {{ shellEnabled|yesno:"true,false" }},
    suspended: {{ suspended|yesno:"true,false" }},
    wsPath: "/ws/terminal/"
  };
</script>
<script src="{% static 'webTerminal/webTerminal.js' %}"></script>
{% endblock %}