{% extends "base.html" %}
{% set remote_run = workspace.remote_run | default(none) %}
{% set server_terminal = workspace.is_server_terminal | default(false) %}
{% set remote_run_state_key = ('remote_run.state.' ~ (remote_run_display_state or remote_run.state)) if remote_run else '' %}
{% set remote_run_terminal = remote_run and remote_run.state in ('finished', 'stopped', 'failed', 'lost') %}
{% if remote_run %}
  {% set workspace_kind_label = 'remote_run.workspace_mode' %}
{% elif server_terminal %}
  {% set workspace_kind_label = 'server_terminal.mode' %}
{% elif workspace.backend_kind == 'remote' %}
  {% set workspace_kind_label = 'workspace.kind.remote' %}
{% else %}
  {% set workspace_kind_label = 'workspace.kind.local' %}
{% endif %}
{% set workspace_sidebar_status = t('server_terminal.mode') if server_terminal else t(session_status_label) %}
{% set workspace_sidebar_detail = t('common.terminal') ~ ' ' ~ terminal_count %}
{% macro workspace_run_menu(placement) %}
{% if workspace_commands_visible %}
<details class="workspace-run-menu workspace-run-menu-{{ placement }}" data-workspace-run-menu>
  <summary aria-label="{{ t('workspace.run.open') }}" title="{{ t('workspace.run.open') }}">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 10 7-10 7Z"/></svg>
    <span>{{ t('workspace.run.open') }}</span>
  </summary>
  <section class="workspace-run-popover">
    <header>
      <div class="workspace-run-heading">
        <strong>{{ t('workspace.run.heading') }}</strong>
        <small>{{ t('workspace.run.copy') }}</small>
      </div>
      <button class="workspace-run-close"
              type="button"
              data-workspace-run-close
              aria-label="{{ t('common.close') }}"
              title="{{ t('common.close') }}">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="m7 7 10 10M17 7 7 17"/>
        </svg>
      </button>
    </header>
    {% if workspace_commands_supported %}
    <form id="workspace-run-command-config-{{ placement }}"
          method="post"
          action="/w/{{ workspace.id }}/run-commands">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    </form>
    <div class="workspace-run-command-list">
      {% for index in range(3) %}
      {% set item = workspace_commands[index] if workspace_commands | length > index else none %}
      <article class="workspace-run-command-card{% if not item %} is-empty{% endif %}">
        <details class="workspace-run-command-editor">
          <summary aria-label="{{ t('workspace.run.configure') }} · {{ t('workspace.run.slot', number=index + 1) }}"
                   title="{{ t('workspace.run.configure') }}">
            <code>{{ item.command if item else t('workspace.run.slot', number=index + 1) }}</code>
            <span class="workspace-run-command-edit-action">
              <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('workspace.run.configure') }}</span>
            </span>
          </summary>
          <div class="workspace-run-command-fields">
            <label>
              <span>{{ t('workspace.run.slot', number=index + 1) }}</span>
              <input name="commands"
                     value="{{ item.command if item else '' }}"
                     form="workspace-run-command-config-{{ placement }}"
                     maxlength="4096"
                     autocomplete="off"
                     spellcheck="false"
                     placeholder="{{ t('workspace.run.placeholder') }}">
            </label>
            <button class="primary-button"
                    type="submit"
                    form="workspace-run-command-config-{{ placement }}">{{ t('workspace.run.save') }}</button>
          </div>
        </details>
        {% if item %}
        <form class="workspace-run-command-launch"
              method="post"
              action="/w/{{ workspace.id }}/run-commands/{{ item.slot }}"
              data-workspace-command-run
              data-workspace-command-starting-label="{{ t('workspace.run.starting') }}">
          <input type="hidden" name="_csrf" value="{{ csrf_token }}">
          <input type="hidden" name="launch_id" value="{{ item.launch_id }}">
          <input type="hidden" name="command_digest" value="{{ item.command_digest }}">
          <button type="submit" title="{{ item.command }}">
            <span data-workspace-command-label>{{ t('workspace.run.command') }}</span>
          </button>
        </form>
        {% endif %}
      </article>
      {% endfor %}
    </div>
    {% else %}
    <p class="workspace-run-empty">{{ t('workspace.run.unsupported_node') }}</p>
    {% endif %}
  </section>
</details>
{% endif %}
{% endmacro %}
{% block body_class %}workspace-page{% endblock %}
{% block body %}
<p class="sr-only"
   role="status"
   aria-live="polite"
   aria-atomic="true"
   data-workspace-command-announcer></p>
<header class="workspace-header">
  <div class="workspace-brand-row">
    <a class="workspace-brand" href="/" aria-label="{{ t('app.home') }}">
      <span class="brand-mark" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M6 7l5 5-5 5M13 17h5"/></svg>
      </span>
      <span>Termroom</span>
    </a>
    <span class="workspace-brand-actions">
      <span class="workspace-mode">{{ workspace.connection_label or t('home.this_computer') }} · {{ t(workspace_kind_label) }}</span>
      <a class="workspace-activity-link"
         href="/activity"
         data-activity-link
         data-summary-url="/api/activity/summary"
         data-claim-url="/api/activity/notifications/claim"
         data-csrf="{{ csrf_token }}"
         aria-label="{{ t('activity.heading') }}"
         title="{{ t('activity.heading') }}">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9a6 6 0 0 1 12 0c0 7 3 7 3 7H3s3 0 3-7M9.5 19h5"/></svg>
        <strong class="activity-unread-badge" data-activity-unread hidden></strong>
      </a>
      {{ user_settings_menu('workspace-desktop', workspace) }}
    </span>
  </div>
  <div class="workspace-project-row">
    <a class="workspace-home-button" href="{% if server_terminal %}/computers/{{ workspace.computer_id }}{% else %}/{% endif %}" aria-label="{% if server_terminal %}{{ t('server_terminal.settings') }}{% else %}{{ t('common.home') }}{% endif %}">
      <span aria-hidden="true">←</span>
    </a>
    <div class="workspace-title">
      <strong title="{{ workspace.display_name }}">{{ workspace.display_name }}</strong>
      <small title="{{ workspace.canonical_path }}">{{ workspace.connection_label or t('home.this_computer') }} · {{ t(workspace_kind_label) }}</small>
    </div>
    <span class="workspace-mobile-actions">
      <span class="workspace-mobile-mode">
        <strong>{{ workspace.connection_label or t('home.this_computer') }}</strong>
        <small>{{ t(workspace_kind_label) }}</small>
      </span>
      {% if not workspace.transient %}
      <details class="workspace-usage-menu"
               data-workspace-usage-view
               data-usage-url="/api/workspaces/{{ workspace.id }}/usage">
        <summary aria-label="{{ t('workspace.usage.heading') }}"
                 title="{{ t('workspace.usage.heading') }}">
          <span>{{ t('workspace.usage.cpu') }}</span>
          <strong data-workspace-usage-cpu>—</strong>
        </summary>
        <section class="workspace-usage-popover">
          <header>
            <strong>{{ t('workspace.usage.heading') }}</strong>
            <small>{{ t('workspace.usage.estimated') }}</small>
          </header>
          <dl>
            <div><dt>{{ t('workspace.usage.cpu') }}</dt><dd data-workspace-usage-cpu>—</dd></div>
            <div><dt>{{ t('workspace.usage.memory') }}</dt><dd data-workspace-usage-memory>—</dd></div>
            <div><dt>{{ t('workspace.usage.processes') }}</dt><dd data-workspace-usage-processes>—</dd></div>
          </dl>
          <p data-workspace-usage-meta>{{ t('workspace.usage.loading') }}</p>
        </section>
      </details>
      {% endif %}
      <a class="workspace-activity-link"
         href="/activity"
         data-activity-link
         data-summary-url="/api/activity/summary"
         data-claim-url="/api/activity/notifications/claim"
         data-csrf="{{ csrf_token }}"
         aria-label="{{ t('activity.heading') }}"
         title="{{ t('activity.heading') }}">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9a6 6 0 0 1 12 0c0 7 3 7 3 7H3s3 0 3-7M9.5 19h5"/></svg>
        <strong class="activity-unread-badge" data-activity-unread hidden></strong>
      </a>
      {{ user_settings_menu('workspace-mobile', workspace) }}
    </span>
  </div>
</header>
{% if remote_run %}
<aside class="remote-workspace-bar{% if remote_run_terminal %} is-terminal{% endif %}"
       aria-label="{{ t('remote_run.workspace_mode') }}"
       data-remote-run-workspace
       data-status-url="/api/remote-runs/{{ remote_run.id }}/status"
       data-state="{{ remote_run.state }}">
  <span>
    <span class="state-chip {% if remote_run.state == 'running' %}running{% endif %}">
      <span class="status-dot" aria-hidden="true"></span>
      <span data-run-workspace-state>{{ t(remote_run_state_key) }}</span>
    </span>
    {% if remote_run.exit_code is not none %}<strong>{{ t('remote_run.exit_code', code=remote_run.exit_code) }}</strong>{% endif %}
    <code title="{{ remote_run.command }}">{{ remote_run.command.splitlines()[0] }}</code>
    {% if remote_run_terminal and remote_run.expires_at %}
    <small class="remote-run-retention"
           data-run-retention
           data-expires-at="{{ remote_run.expires_at }}"
           data-template="{{ t('remote_run.retention_until', time='{time}') }}"
           title="{{ t('remote_run.retention_copy', computer=workspace.connection_label) }}">{{ t('remote_run.retention_until', time=remote_run.expires_at) }}</small>
    <span class="sr-only">{{ t('remote_run.retention_copy', computer=workspace.connection_label) }}</span>
    {% endif %}
  </span>
  <span class="remote-workspace-actions">
    {% if remote_run.state in ('preparing', 'running') %}
    {% if remote_run.stop_requested_at %}
    <span class="remote-run-stop-waiting">{{ t('remote_run.stop_waiting') }}</span>
    <form method="post"
          action="/remote-runs/{{ remote_run.id }}/kill"
          data-run-force-stop
          data-stop-requested-at="{{ remote_run.stop_requested_at }}"
          hidden>
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <button class="danger-button" type="submit" data-confirm="{{ t('remote_run.stop_waiting_copy') }}">{{ t('remote_run.force_stop') }}</button>
    </form>
    {% else %}
    <form method="post" action="/remote-runs/{{ remote_run.id }}/stop">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <button class="secondary-button" type="submit">{{ t('remote_run.stop') }}</button>
    </form>
    {% endif %}
    {% else %}
    <a class="primary-button" href="/remote-runs/{{ remote_run.id }}/result.zip" download>{{ t('remote_run.result_download') }}</a>
    {% if remote_run_source_url %}
    <a class="secondary-button" href="/remote-runs/{{ remote_run.id }}/collect">{{ t('remote_run.collect.open') }}</a>
    {% endif %}
    {% if remote_run_display_state == 'failed' and remote_run_source_url and remote_run_retry_url %}
    <a class="secondary-button" href="{{ remote_run_source_url }}">{{ t('remote_run.open_source') }}</a>
    <a class="secondary-button" href="{{ remote_run_retry_url }}">{{ t('remote_run.retry_setup') }}</a>
    {% endif %}
    <form method="post" action="/remote-runs/{{ remote_run.id }}/delete">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <button class="danger-button" type="submit" data-confirm="{{ t('remote_run.delete_confirm') }}">{{ t('remote_run.delete_now') }}</button>
    </form>
    {% endif %}
  </span>
</aside>
{% endif %}
<main class="workspace-content {% block workspace_content_class %}{% endblock %}">
  {% block workspace_content %}{% endblock %}
</main>
<nav class="bottom-nav"
     aria-label="{% if server_terminal %}{{ t('server_terminal.title') }}{% else %}{{ t('common.workspace') }}{% endif %}"
     data-workspace-terminal-activity
     data-activity-url="/api/workspaces/{{ workspace.id }}/terminal-activity">
  <span class="workspace-nav-label">{% if server_terminal %}{{ t('server_terminal.title') }}{% else %}{{ t('common.workspace') }}{% endif %}</span>
  <a class="{% if active_tab == 'terminal' %}active{% endif %}" href="/w/{{ workspace.id }}/terminal" data-terminal-activity-nav>
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 7l4 5-4 5M11 17h8"/></svg>
    <span>{{ t('common.terminal') }}</span>
    <span class="terminal-unread-dot terminal-nav-unread" data-terminal-activity-nav-unread hidden>
      <span class="sr-only">{{ t('terminal.activity.new_output') }}</span>
    </span>
  </a>
  {% if server_terminal %}
  <a href="/open/{{ workspace.computer_id }}">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h6l2 2h8v10H4z"/></svg>
    <span>{{ t('server_terminal.workspaces') }}</span>
  </a>
  <a href="/computers/{{ workspace.computer_id }}">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4"/></svg>
    <span>{{ t('server_terminal.settings') }}</span>
  </a>
  {% else %}
  <a class="{% if active_tab == 'files' %}active{% endif %}" href="/w/{{ workspace.id }}/files">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h6l2 2h8v10H4z"/></svg>
    <span>{{ t('common.files') }}</span>
  </a>
  {% if recent_supported | default(true) %}
  <a class="{% if active_tab == 'recent' %}active{% endif %}" href="/w/{{ workspace.id }}/recent">
    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l3 2"/></svg>
    <span>{{ t('common.recent') }}</span>
  </a>
  {% endif %}
  {% endif %}
  {{ workspace_run_menu('navigation') }}
</nav>
{% if workspace.transient %}
<footer class="workspace-sidebar-footer"
        aria-label="{% if server_terminal %}{{ t('server_terminal.title') }}{% else %}{{ t('common.workspace') }}{% endif %}">
  <span class="status-dot {% if session_active %}is-active{% endif %}"{% if not workspace.transient %} data-workspace-usage-dot{% endif %}></span>
  <span class="workspace-sidebar-copy">
    <strong title="{{ workspace_sidebar_status }}">{{ workspace_sidebar_status }}</strong>
    <small title="{{ workspace_sidebar_detail }}">{{ workspace_sidebar_detail }}</small>
  </span>
</footer>
{% else %}
<details class="workspace-sidebar-footer workspace-usage-menu workspace-sidebar-usage-menu"
         data-workspace-usage-view
         data-usage-url="/api/workspaces/{{ workspace.id }}/usage">
  <summary aria-label="{{ t('workspace.usage.heading') }}"
           title="{{ t('workspace.usage.heading') }}">
    <span class="status-dot {% if session_active %}is-active{% endif %}" data-workspace-usage-dot></span>
    <span class="workspace-sidebar-copy">
      <strong data-workspace-usage-summary>{{ t('workspace.usage.heading') }}</strong>
      <small data-workspace-usage-meta>{{ t('workspace.usage.estimated') }}</small>
    </span>
  </summary>
  <section class="workspace-usage-popover">
    <header>
      <strong>{{ t('workspace.usage.heading') }}</strong>
      <small>{{ t('workspace.usage.estimated') }}</small>
    </header>
    <dl>
      <div><dt>{{ t('workspace.usage.cpu') }}</dt><dd data-workspace-usage-cpu>—</dd></div>
      <div><dt>{{ t('workspace.usage.memory') }}</dt><dd data-workspace-usage-memory>—</dd></div>
      <div><dt>{{ t('workspace.usage.processes') }}</dt><dd data-workspace-usage-processes>—</dd></div>
    </dl>
    <p data-workspace-usage-meta>{{ t('workspace.usage.loading') }}</p>
  </section>
</details>
{% endif %}
{% block workspace_scripts %}{% endblock %}
{% if remote_run %}
<script src="{{ url_for('static', path='remote_run.js') }}?v=11" defer></script>
{% endif %}
{% endblock %}