{% extends "workspace_base.html" %}
{% block body_class %}workspace-page terminal-page{% endblock %}
{% block extra_head %}
<link rel="preload"
      href="{{ url_for('static', path='vendor/d2koding-ligature-nerd-font-mono-3.5.0-core-hangul.woff2') }}?v=3.5.0.1"
      as="font"
      type="font/woff2"
      crossorigin>
<link rel="stylesheet" href="{{ url_for('static', path='terminal-font.css') }}?v=2">
<link rel="stylesheet" href="{{ url_for('static', path='vendor/xterm.css') }}?v=6.0.0">
{% endblock %}
{% block workspace_content_class %}terminal-screen{% endblock %}
{% block workspace_content %}
<div class="terminal-chrome">
  <nav class="terminal-tabs" aria-label="{{ t('terminal.switch') }}">
    {% for item in terminals %}
    <a class="{% if item.id == terminal.id %}active{% endif %}"
       href="/w/{{ workspace.id }}/terminal?terminal={{ item.id }}"
       data-terminal-activity-tab="{{ item.id }}"
       data-terminal-role="{{ item.role | default('shell') }}">{{ item.name }}{% if (item.role | default('shell')) == 'shell' %}<span class="terminal-unread-dot terminal-tab-unread" data-terminal-activity-tab-unread hidden><span class="sr-only">{{ t('terminal.activity.new_output') }}</span></span>{% endif %}</a>
    {% endfor %}
  </nav>
  <div class="terminal-top-actions">
    <span id="terminal-status" class="terminal-status" role="status">
      <span class="terminal-status-dot" aria-hidden="true"></span>
      <span class="terminal-status-label">{{ t('terminal.connecting') }}</span>
    </span>
    <a class="terminal-tool-button terminal-output-action"
       href="/w/{{ workspace.id }}/terminal/{{ terminal.id }}/scrollback"
       aria-label="{{ t('terminal.output') }}">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 7h14M5 12h14M5 17h9"/></svg>
      <span class="terminal-tool-label">{{ t('terminal.output') }}</span>
    </a>
    <div class="new-terminal-menu terminal-manage-menu" data-popover>
      <button class="terminal-tool-button"
              type="button"
              data-popover-trigger
              aria-expanded="false"
              aria-controls="terminal-manage-popover"
              aria-label="{{ t('terminal.manage') }}">
        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>
      </button>
      <form id="terminal-manage-popover"
            method="post"
            action="/w/{{ workspace.id }}/terminals/{{ terminal.id }}"
            class="terminal-manage-form"
            data-popover-panel
            hidden>
        <input type="hidden" name="_csrf" value="{{ csrf_token }}">
        <section class="terminal-display-settings" aria-labelledby="terminal-display-settings-title">
          <span class="terminal-display-heading">
            <strong id="terminal-display-settings-title">{{ t('terminal.display') }}</strong>
            <span>{{ t('terminal.font_size') }}</span>
          </span>
          <div class="terminal-font-size-controls">
            <button id="terminal-font-decrease" type="button" aria-label="{{ t('terminal.font_smaller') }}">−</button>
            <output id="terminal-font-size-value" aria-live="polite">{{ t('terminal.font_size_value', size=14) }}</output>
            <button id="terminal-font-increase" type="button" aria-label="{{ t('terminal.font_larger') }}">+</button>
            <button id="terminal-font-reset" class="terminal-font-reset" type="button">{{ t('terminal.font_reset') }}</button>
          </div>
        </section>
        {% if (terminal.role | default('shell')) == 'shell' %}
          <label>
            <span>{{ t('terminal.name') }}</span>
            <input name="name" value="{{ terminal.name }}" maxlength="32" required aria-label="{{ t('terminal.rename') }}">
          </label>
          <button type="submit" name="action" value="rename">{{ t('terminal.rename') }}</button>
          <button type="submit"
                  name="action"
                  value="delete"
                  class="danger-button"
                  formnovalidate
                  data-confirm="{{ t('terminal.close_confirm') }}">{{ t('terminal.close') }}</button>
        {% endif %}
      </form>
    </div>
    <div class="new-terminal-menu" data-popover>
      <button class="terminal-tool-button terminal-new-button"
              type="button"
              data-popover-trigger
              aria-expanded="false"
              aria-controls="terminal-new-popover"
              aria-label="{{ t('terminal.new') }}">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
      </button>
      <form id="terminal-new-popover"
            method="post"
            action="/w/{{ workspace.id }}/terminals"
            data-popover-panel
            hidden>
        <input type="hidden" name="_csrf" value="{{ csrf_token }}">
        <input name="name" value="shell" maxlength="32" aria-label="{{ t('terminal.name') }}">
        <button type="submit">{{ t('common.create') }}</button>
      </form>
    </div>
  </div>
</div>
{% if error %}<p class="terminal-error-banner" role="alert" title="{{ error }}">{{ error }}</p>{% endif %}
{% if file_run %}
<aside class="file-run-bar file-run-terminal-bar {{ file_run.display_state }}"
       data-file-run
       data-state="{{ file_run.state }}"
       data-status-url="{{ file_run.status_url }}"
       data-started-at="{{ file_run.started_at or '' }}">
  <span class="file-run-summary">
    <span class="state-chip {% if file_run.active %}running{% endif %}">
      <span class="status-dot" aria-hidden="true"></span>
      <strong data-file-run-state>{{ file_run.state_label }}</strong>
    </span>
    <code title="{{ file_run.relative_path }}">{{ file_run.relative_path }}</code>
    <small data-file-run-duration>{% if file_run.duration_seconds is not none %}{{ t('file_run.duration', seconds=file_run.duration_seconds) }}{% endif %}</small>
    <small data-file-run-exit>{% if file_run.exit_code is not none %}{{ t('file_run.exit_code', code=file_run.exit_code) }}{% endif %}</small>
    <small class="file-run-error" data-file-run-error {% if not file_run.error_detail %}hidden{% endif %}>{{ file_run.error_detail or '' }}</small>
  </span>
  <span class="file-run-actions">
    <a class="secondary-button" href="{{ file_run.editor_url }}">{{ t('file_run.back_to_file') }}</a>
    <form method="post"
          action="{{ file_run.stop_url }}"
          data-file-run-stop
          {% if not file_run.active or file_run.needs_force %}hidden{% endif %}>
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <input type="hidden" name="return_to" value="terminal">
      <button class="secondary-button" type="submit">{{ t('file_run.stop') }}</button>
    </form>
    <form method="post"
          action="{{ file_run.kill_url }}"
          data-file-run-force
          {% if not file_run.needs_force %}hidden{% endif %}>
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <input type="hidden" name="return_to" value="terminal">
      <button class="danger-button" type="submit" data-confirm="{{ t('file_run.force_confirm') }}">{{ t('file_run.force_stop') }}</button>
    </form>
  </span>
</aside>
{% endif %}
<div id="terminal"
     class="terminal-host"
     data-terminal-id="{{ terminal.id }}"
     data-workspace-id="{{ workspace.id }}"
     data-device-id="{{ current_device_id }}"
     data-terminal-role="{{ terminal.role | default('shell') }}"></div>

<div class="terminal-composer">
  <div class="quick-keys" aria-label="{{ t('terminal.more_keys') }}">
    <div class="terminal-key-rail">
      <button class="terminal-keycap" type="button" data-terminal-key="\u001b">Esc</button>
      <button class="terminal-keycap" type="button" data-terminal-key="\t">Tab</button>
      <button class="terminal-keycap" type="button" id="ctrl-key" aria-pressed="false">Ctrl</button>
      <button class="terminal-keycap terminal-keycap-symbol" type="button" data-terminal-action="arrow-up">↑</button>
      <button class="terminal-keycap terminal-keycap-symbol" type="button" data-terminal-action="arrow-down">↓</button>
      <button class="terminal-keycap" type="button" data-terminal-key="\u0003">C-c</button>
    </div>
    <div class="more-keys" data-popover>
      <button class="terminal-keycap terminal-keycap-symbol"
              type="button"
              data-popover-trigger
              aria-expanded="false"
              aria-controls="terminal-more-keys-popover"
              aria-label="{{ t('terminal.more_keys') }}">•••</button>
      <div id="terminal-more-keys-popover" class="more-keys-panel" data-popover-panel hidden>
        <header class="more-keys-heading">
          <strong>{{ t('terminal.more_keys') }}</strong>
          <button id="close-more-keys"
                  class="more-keys-close"
                  type="button"
                  data-close-popover
                  aria-label="{{ t('common.close') }}">×</button>
        </header>
        <div class="more-key-grid">
          <button type="button" data-terminal-action="arrow-left">←</button>
          <button type="button" data-terminal-action="arrow-right">→</button>
          <button type="button" data-terminal-key="\u0004">C-d</button>
          <button type="button" data-terminal-key="/">/</button>
          <button type="button" data-terminal-key="-">-</button>
          <button type="button" data-terminal-key="_">_</button>
          <button type="button" data-terminal-key="|">|</button>
          <button type="button" data-terminal-key="~">~</button>
        </div>
        <div class="terminal-secondary-actions">
          <button type="button" id="focus-terminal">{{ t('terminal.keyboard') }}</button>
          <button type="button" id="paste-terminal">{{ t('terminal.paste') }}</button>
        </div>
      </div>
    </div>
    <button id="open-command-editor" class="terminal-command-trigger" type="button" aria-label="{{ t('terminal.command_edit') }}">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19l3.5-.7L18 8.8 15.2 6 5.7 15.5 5 19zM13.8 7.4l2.8 2.8"/></svg>
      <span>{{ t('terminal.command_edit') }}</span>
    </button>
  </div>
  <div class="terminal-compose-pane" hidden>
    <header class="terminal-compose-heading">
      <span>
        <strong>{{ t('terminal.command_edit') }}</strong>
        <small>{{ t('terminal.command_edit_hint') }}</small>
      </span>
      <button id="close-command-editor"
              class="terminal-compose-close"
              type="button"
              aria-label="{{ t('terminal.command_edit_close') }}">×</button>
    </header>
    <form id="command-form" class="command-bar">
      <div class="command-input-shell">
        <textarea id="command-input"
                  name="command"
                  rows="1"
                  placeholder="{{ t('terminal.command_placeholder') }}"
                  autocomplete="off"
                  autocapitalize="off"
                  autocorrect="off"
                  spellcheck="false"></textarea>
        <span id="command-meta" class="command-meta">{{ t('terminal.command_hint') }}</span>
      </div>
      <button class="send-command" type="submit">{{ t('terminal.run') }}</button>
    </form>
    {% if commands %}
    <div class="recent-command-strip" aria-label="{{ t('terminal.recent_commands_aria') }}">
      <span class="recent-command-label">{{ t('terminal.recent_commands') }}</span>
      {% for command in commands[:5] %}
      <button type="button" data-command-reuse="{{ command }}">{{ command }}</button>
      {% endfor %}
      <form method="post" action="/w/{{ workspace.id }}/commands/clear" class="recent-command-clear-form">
        <input type="hidden" name="_csrf" value="{{ csrf_token }}">
        <input type="hidden" name="terminal" value="{{ terminal.id }}">
        <button type="submit" class="recent-command-clear">{{ t('terminal.clear_recent') }}</button>
      </form>
    </div>
    {% else %}
    <p class="terminal-first-hint">{{ t('terminal.first_hint') }}</p>
    {% endif %}
  </div>
</div>
{% endblock %}
{% block workspace_scripts %}
<script src="{{ url_for('static', path='vendor/xterm.js') }}?v=6.0.0"></script>
<script src="{{ url_for('static', path='terminal.js') }}?v=45"></script>
{% endblock %}