{% extends "base.html" %}
{% block body_class %}workspace-open-page{% endblock %}
{% block content %}
{% if mode == 'computers' %}
<header class="open-page-heading">
  <div>
    <a class="text-back-link" href="/">← {{ t('common.home') }}</a>
    <p class="eyebrow">{{ t('open.eyebrow') }}</p>
    <h1>{{ t('open.heading') }}</h1>
    <p class="page-copy">{{ t('open.copy') }}</p>
  </div>
  <a class="secondary-button" href="/computers/new">{{ t('home.add_ssh') }}</a>
</header>

{% if computer_removed %}<p class="notice success">{{ t('home.computer_removed') }}</p>{% endif %}

<section class="open-computer-grid" aria-label="{{ t('open.choose_computer') }}">
  {% if allow_local_workspaces %}
  <a class="open-computer-card" href="/open/local">
    <span class="computer-icon" aria-hidden="true"></span>
    <span class="open-computer-main">
      <strong>{{ t('home.this_computer') }}</strong>
      <small>{{ t('open.location_count', count=local_root_count) }}</small>
    </span>
    <span class="open-computer-meta">{{ t('open.workspace_count', count=local_workspace_count) }}</span>
    <span class="row-arrow" aria-hidden="true">→</span>
  </a>
  {% endif %}
  {% for computer in computers %}
  {% set remote_status = remote_statuses.get(computer.id) %}
  <a class="open-computer-card" href="/open/{{ computer.id }}">
    <span class="computer-icon remote" aria-hidden="true"></span>
    <span class="open-computer-main">
      <strong title="{{ computer.name }}">{{ computer.name }}</strong>
      {% if computer.connection_method == 'ssh' %}
      <small title="{{ computer.username }}@{{ computer.host }}{% if computer.port != 22 %}:{{ computer.port }}{% endif %}">{{ computer.username }}@{{ computer.host }}{% if computer.port != 22 %}:{{ computer.port }}{% endif %}</small>
      {% else %}
      <small>Termroom Node</small>
      {% endif %}
    </span>
    <span class="open-computer-meta remote-connection-meta">
      <span class="state-chip remote {{ remote_status.state }}">
        <span class="status-dot" aria-hidden="true"></span>
        {{ remote_status.label }}
      </span>
      <small>{% if remote_status.last_success_label %}{{ t('remote.last_success', time=remote_status.last_success_label) }}{% else %}{{ t('open.workspace_count', count=workspace_counts.get(computer.id, 0)) }}{% endif %}</small>
    </span>
    <span class="row-arrow" aria-hidden="true">→</span>
  </a>
  {% endfor %}
</section>

{% elif mode == 'local' %}
<header class="open-page-heading">
  <div>
    <a class="text-back-link" href="{% if has_remote_computers %}/open{% else %}/{% endif %}">← {% if has_remote_computers %}{{ t('open.computers') }}{% else %}{{ t('common.home') }}{% endif %}</a>
    <p class="eyebrow">{{ t('home.this_computer') }}</p>
    <h1>{{ t('open.local_heading') }}</h1>
    <p class="page-copy">{{ t('open.local_copy') }}</p>
  </div>
</header>

{% if error %}<p class="notice error">{{ error }}</p>{% endif %}
{% if location_removed %}<p class="notice success">{{ t('open.location_removed') }}</p>{% endif %}
{% if project_error and project_created %}
<section class="notice error project-result-notice">
  <strong>{{ project_error }}</strong>
  {% if project_created %}<code>{{ project_created }}</code>{% endif %}
  <span class="project-result-actions">
    {% if project_existing %}
    <form method="post" action="/api/workspaces">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <input type="hidden" name="root_id" value="{{ selected_root_id }}">
      <input type="hidden" name="path" value="{{ project_existing }}">
      <button class="secondary-button" type="submit">{{ t('project.open_existing') }}</button>
    </form>
    {% endif %}
    {% if project_workspace %}<a class="secondary-button" href="/w/{{ project_workspace }}/terminal">{{ t('project.retry_open') }}</a>{% endif %}
    {% if project_created %}<a class="secondary-button" href="/open/local?root={{ selected_root_id }}&path={{ path | urlencode }}">{{ t('project.back_folder') }}</a>{% endif %}
    <button class="secondary-button" type="button" data-new-project data-project-parent="{{ path }}" data-project-parent-display="{{ current_path_display }}">{{ t('project.edit_name') }}</button>
  </span>
</section>
{% endif %}

{% if roots | length == 1 %}
<section class="open-location-compact">
  <span class="open-location-current">
    <span class="computer-icon" aria-hidden="true"></span>
    <span><strong>{{ roots[0].label }}</strong><small>{{ roots[0].path }}</small></span>
    <span>{{ t('open.workspace_count', count=roots[0].workspace_count) }}</span>
  </span>
  <div class="add-location-menu" data-popover {% if browse_location %}open{% endif %}
       data-popover-close-url="{{ location_close_url }}"
       data-popover-clear-query="{{ 1 if browse_location else 0 }}">
    <button class="secondary-button"
            type="button"
            data-popover-trigger
            aria-expanded="{{ 'true' if browse_location else 'false' }}"
            aria-controls="add-location-dialog">{{ t('open.add_location') }}</button>
    <span class="add-location-backdrop" data-popover-panel data-close-popover aria-hidden="true" {% if not browse_location %}hidden{% endif %}></span>
    <form id="add-location-dialog"
          method="post"
          action="/open/local/locations"
          class="add-location-form"
          role="dialog"
          aria-modal="true"
          aria-label="{{ t('open.add_location') }}"
          data-popover-panel
          {% if not browse_location %}hidden{% endif %}
          data-folder-picker data-folder-picker-url="/api/local/browse-directories">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <header class="floating-form-heading">
        <strong>{{ t('open.add_location') }}</strong>
        <button class="floating-form-close" type="button" data-close-popover aria-label="{{ t('common.close') }}" title="{{ t('common.close') }}">×</button>
      </header>
      <label>
        <span>{{ t('open.location_path') }}</span>
        <input name="path" value="{{ location_picker.current if location_picker else '' }}" placeholder="/home/me/projects" required autocapitalize="off" spellcheck="false" data-folder-picker-input>
      </label>
      <div class="path-picker-actions">
        <a class="secondary-button folder-picker-button" href="/open/local?root={{ selected_root_id }}&path={{ path | urlencode }}{% if show_hidden %}&hidden=1{% endif %}&browse_location=1" data-folder-picker-open>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 6.5h6l2 2h9v9H3.5z"/></svg>
          <span>{{ t('open.browse_folders') }}</span>
        </a>
        <span>{{ t('open.direct_path_hint') }}</span>
      </div>
      {% if location_error %}<p class="notice error path-picker-error">{{ location_error }}</p>{% endif %}
      {% if browse_location and location_picker %}
      <section class="path-picker" aria-label="{{ t('open.browse_folders') }}" data-folder-picker-panel>
        <header class="path-picker-header">
          <div>
            <span>{{ t('open.current_folder') }}</span>
            <code data-folder-picker-current>{{ location_picker.current }}</code>
          </div>
          {% if location_picker.parent_url %}<a class="path-picker-control" href="{{ location_picker.parent_url }}" data-folder-picker-parent data-folder-path="{{ location_picker.parent }}">↑ {{ t('open.parent_folder') }}</a>{% endif %}
        </header>
        {% if location_picker.hidden_count %}
        <a class="path-picker-control path-picker-hidden" href="{{ location_picker.hidden_url }}" data-folder-picker-hidden data-hidden-count="{{ location_picker.hidden_count }}" data-show-hidden="{{ 1 if location_picker.show_hidden else 0 }}">
          {% if location_picker.show_hidden %}{{ t('browse.hide_hidden') }}{% else %}{{ t('browse.show_hidden', count=location_picker.hidden_count) }}{% endif %}
        </a>
        {% endif %}
        <div class="path-picker-list" data-folder-picker-list>
          {% for entry in location_picker.entries %}
          <a class="path-picker-row" href="{{ entry.url }}" data-folder-path="{{ entry.path }}"><span class="file-glyph folder" aria-hidden="true"></span><span>{{ entry.name }}</span><span aria-hidden="true">›</span></a>
          {% else %}
          <p class="path-picker-empty">{{ t('open.folder_picker_empty') }}</p>
          {% endfor %}
        </div>
      </section>
      {% endif %}
      <small>{{ t('open.location_copy') }}</small>
      <div class="floating-form-actions">
        <button class="secondary-button" type="button" data-close-popover>{{ t('common.cancel') }}</button>
        <button class="primary-button" type="submit" data-folder-picker-default-label="{{ t('open.add_location') }}">{% if browse_location and location_picker %}{{ t('open.use_current_folder') }}{% else %}{{ t('open.add_location') }}{% endif %}</button>
      </div>
    </form>
  </div>
</section>
{% else %}
<section class="open-location-panel panel">
  <header class="open-section-heading">
    <div><h2>{{ t('open.locations') }}</h2><p>{{ t('open.locations_copy') }}</p></div>
    <div class="add-location-menu" data-popover {% if browse_location %}open{% endif %}
         data-popover-close-url="{{ location_close_url }}"
         data-popover-clear-query="{{ 1 if browse_location else 0 }}">
      <button class="secondary-button"
              type="button"
              data-popover-trigger
              aria-expanded="{{ 'true' if browse_location else 'false' }}"
              aria-controls="add-location-dialog">{{ t('open.add_location') }}</button>
      <span class="add-location-backdrop" data-popover-panel data-close-popover aria-hidden="true" {% if not browse_location %}hidden{% endif %}></span>
      <form id="add-location-dialog"
            method="post"
            action="/open/local/locations"
            class="add-location-form"
            role="dialog"
            aria-modal="true"
            aria-label="{{ t('open.add_location') }}"
            data-popover-panel
            {% if not browse_location %}hidden{% endif %}
            data-folder-picker data-folder-picker-url="/api/local/browse-directories">
        <input type="hidden" name="_csrf" value="{{ csrf_token }}">
        <header class="floating-form-heading">
          <strong>{{ t('open.add_location') }}</strong>
          <button class="floating-form-close" type="button" data-close-popover aria-label="{{ t('common.close') }}" title="{{ t('common.close') }}">×</button>
        </header>
        <label>
          <span>{{ t('open.location_path') }}</span>
          <input name="path" value="{{ location_picker.current if location_picker else '' }}" placeholder="/home/me/projects" required autocapitalize="off" spellcheck="false" data-folder-picker-input>
        </label>
        <div class="path-picker-actions">
          <a class="secondary-button folder-picker-button" href="/open/local?root={{ selected_root_id }}&path={{ path | urlencode }}{% if show_hidden %}&hidden=1{% endif %}&browse_location=1" data-folder-picker-open>
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 6.5h6l2 2h9v9H3.5z"/></svg>
            <span>{{ t('open.browse_folders') }}</span>
          </a>
          <span>{{ t('open.direct_path_hint') }}</span>
        </div>
        {% if location_error %}<p class="notice error path-picker-error">{{ location_error }}</p>{% endif %}
        {% if browse_location and location_picker %}
        <section class="path-picker" aria-label="{{ t('open.browse_folders') }}" data-folder-picker-panel>
          <header class="path-picker-header">
            <div><span>{{ t('open.current_folder') }}</span><code data-folder-picker-current>{{ location_picker.current }}</code></div>
            {% if location_picker.parent_url %}<a class="path-picker-control" href="{{ location_picker.parent_url }}" data-folder-picker-parent data-folder-path="{{ location_picker.parent }}">↑ {{ t('open.parent_folder') }}</a>{% endif %}
          </header>
          {% if location_picker.hidden_count %}
          <a class="path-picker-control path-picker-hidden" href="{{ location_picker.hidden_url }}" data-folder-picker-hidden data-hidden-count="{{ location_picker.hidden_count }}" data-show-hidden="{{ 1 if location_picker.show_hidden else 0 }}">
            {% if location_picker.show_hidden %}{{ t('browse.hide_hidden') }}{% else %}{{ t('browse.show_hidden', count=location_picker.hidden_count) }}{% endif %}
          </a>
          {% endif %}
          <div class="path-picker-list" data-folder-picker-list>
            {% for entry in location_picker.entries %}
            <a class="path-picker-row" href="{{ entry.url }}" data-folder-path="{{ entry.path }}"><span class="file-glyph folder" aria-hidden="true"></span><span>{{ entry.name }}</span><span aria-hidden="true">›</span></a>
            {% else %}
            <p class="path-picker-empty">{{ t('open.folder_picker_empty') }}</p>
            {% endfor %}
          </div>
        </section>
        {% endif %}
        <small>{{ t('open.location_copy') }}</small>
        <div class="floating-form-actions">
          <button class="secondary-button" type="button" data-close-popover>{{ t('common.cancel') }}</button>
          <button class="primary-button" type="submit" data-folder-picker-default-label="{{ t('open.add_location') }}">{% if browse_location and location_picker %}{{ t('open.use_current_folder') }}{% else %}{{ t('open.add_location') }}{% endif %}</button>
        </div>
      </form>
    </div>
  </header>
  <div class="open-location-list">
    {% for item in roots %}
    <div class="open-location-entry {% if item.id == selected_root_id %}active{% endif %}">
      <a class="open-location-chip"
         href="/open/local?root={{ item.id }}#folder-browser"{% if item.id == selected_root_id %} aria-current="location"{% endif %}>
        <strong>{{ item.label }}</strong>
        <small>{{ item.path }}</small>
        <span>{% if not item.available %}{{ t('open.location_unavailable_short') }}{% else %}{{ t('open.workspace_count', count=item.workspace_count) }}{% endif %}</span>
      </a>
      {% if item.removable %}
      <form method="post"
            action="/open/local/locations/{{ item.id }}/remove"
            class="open-location-remove"
            data-confirm="{{ t('open.location_remove_confirm', name=item.label) }}">
        <input type="hidden" name="_csrf" value="{{ csrf_token }}">
        <button class="quiet-action" type="submit">{{ t('open.location_remove') }}</button>
      </form>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</section>
{% endif %}

{% if local_workspaces %}
<section class="open-workspace-panel panel">
  <header class="open-section-heading">
    <div><h2>{{ t('open.registered') }}</h2><p>{{ t('open.registered_copy') }}</p></div>
  </header>
  <div class="open-workspace-list">
    {% for workspace in local_workspaces %}
    {% if workspace.available %}
    <a class="open-workspace-row" href="/w/{{ workspace.id }}">
      <span class="project-avatar" aria-hidden="true">{{ workspace.display_name[:1] | upper }}</span>
      <span><strong>{{ workspace.display_name }}</strong><small>{{ workspace.relative_path }}</small></span>
      <span class="row-arrow" aria-hidden="true">→</span>
    </a>
    {% else %}
    <div class="open-workspace-row unavailable">
      <span class="project-avatar" aria-hidden="true">{{ workspace.display_name[:1] | upper }}</span>
      <span><strong>{{ workspace.display_name }}</strong><small>{{ workspace.relative_path }} · {{ t('open.workspace_unavailable') }}</small></span>
      <form method="post"
            action="/w/{{ workspace.id }}/remove"
            data-confirm="{{ t('workspace.remove.confirm', name=workspace.display_name) }}">
        <input type="hidden" name="_csrf" value="{{ csrf_token }}">
        <input type="hidden" name="return_root_id" value="{{ selected_root_id }}">
        <button class="quiet-action" type="submit">{{ t('workspace.remove.action') }}</button>
      </form>
    </div>
    {% endif %}
    {% endfor %}
  </div>
</section>
{% endif %}

{% if not root_unavailable %}
<section id="folder-browser" class="folder-browser open-folder-browser" aria-label="{{ t('browse.heading') }}">
  <header class="folder-browser-header">
    <div class="folder-browser-navigation">
      {% for crumb in breadcrumbs %}
        {% if loop.revindex == 2 %}
        <a class="folder-browser-up" href="/open/local?root={{ selected_root_id }}&path={{ crumb.path | urlencode }}{% if show_hidden %}&hidden=1{% endif %}" aria-label="{{ t('open.parent_folder') }}">← <span>{{ t('open.parent_folder') }}</span></a>
        {% endif %}
      {% endfor %}
      <div class="folder-browser-location">
        <span class="path-label">{{ t('browse.current') }}</span>
        <nav class="breadcrumbs" aria-label="{{ t('browse.current') }}">
          {% for crumb in breadcrumbs %}
            {% if loop.last %}
            <span class="breadcrumb-current" aria-current="location">{% if loop.first %}{{ selected_root_label }}{% else %}{{ crumb.name }}{% endif %}</span>
            {% else %}
            <a href="/open/local?root={{ selected_root_id }}&path={{ crumb.path | urlencode }}{% if show_hidden %}&hidden=1{% endif %}">{% if loop.first %}{{ selected_root_label }}{% else %}{{ crumb.name }}{% endif %}</a>
            <span>/</span>
            {% endif %}
          {% endfor %}
        </nav>
      </div>
    </div>
    <div class="folder-browser-tools">
      {% if hidden_count %}
      <a class="hidden-toggle"
         href="/open/local?root={{ selected_root_id }}&path={{ path | urlencode }}&hidden={{ 0 if show_hidden else 1 }}">
        {% if show_hidden %}{{ t('browse.hide_hidden') }}{% else %}{{ t('browse.show_hidden', count=hidden_count) }}{% endif %}
      </a>
      {% endif %}
    </div>
  </header>
  <div class="folder-browser-selection">
    <span class="folder-browser-selection-copy"><small>{{ t('browse.selected_location') }}</small><code>{{ current_path_display }}</code></span>
    <div class="folder-browser-actions">
      <button class="secondary-button" type="button" data-new-project data-project-parent="{{ path }}" data-project-parent-display="{{ current_path_display }}">＋ {{ t('project.new_here') }}</button>
      <form method="post" action="/api/workspaces" class="browse-open-form">
        <input type="hidden" name="_csrf" value="{{ csrf_token }}">
        <input type="hidden" name="root_id" value="{{ selected_root_id }}">
        <input type="hidden" name="path" value="{{ path }}">
        <button class="primary-button" type="submit">{{ t('browse.open_current') }}</button>
      </form>
    </div>
  </div>
  <div class="folder-browser-list">
    {% for entry in entries %}
    <a class="folder-browser-row"
       href="/open/local?root={{ selected_root_id }}&path={{ entry.relative_path | urlencode }}{% if show_hidden %}&hidden=1{% endif %}">
      <span class="file-glyph folder" aria-hidden="true"></span>
      <span class="file-name">{{ entry.name }}</span>
      <span class="row-arrow" aria-hidden="true">›</span>
    </a>
    {% else %}
    <div class="empty-state quiet-empty"><strong>{{ t('browse.empty') }}</strong><p>{{ t('browse.empty_copy') }}</p></div>
    {% endfor %}
  </div>
</section>
{% endif %}

{% if project_existing and not project_created %}
<form id="open-existing-local-project" method="post" action="/api/workspaces" hidden>
  <input type="hidden" name="_csrf" value="{{ csrf_token }}">
  <input type="hidden" name="root_id" value="{{ selected_root_id }}">
  <input type="hidden" name="path" value="{{ project_existing }}">
</form>
{% endif %}
<dialog id="new-project-dialog" class="project-create-dialog"{% if project_error and not project_created %} data-project-autopen{% endif %}>
  <form method="post" action="/open/local/projects" class="project-create-form" data-project-form>
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    <input type="hidden" name="root_id" value="{{ selected_root_id }}">
    <input type="hidden" name="parent" value="{{ path }}" data-project-parent-input>
    <header class="floating-form-heading">
      <strong>{{ t('project.new') }}</strong>
      <button type="button" class="floating-form-close" data-project-close aria-label="{{ t('common.close') }}">×</button>
    </header>
    <dl class="project-create-facts">
      <div><dt>{{ t('project.computer') }}</dt><dd>{{ t('home.this_computer') }}</dd></div>
      <div><dt>{{ t('project.location') }}</dt><dd><code data-project-parent-label>{{ current_path_display }}</code></dd></div>
    </dl>
    {% if project_error and not project_created %}
    <div class="notice error project-dialog-error" role="alert">
      <strong>{{ project_error }}</strong>
      {% if project_existing %}<button class="secondary-button" type="submit" form="open-existing-local-project">{{ t('project.open_existing') }}</button>{% endif %}
    </div>
    {% endif %}
    <label>
      <span>{{ t('project.folder_name') }}</span>
      <input name="name" value="{{ project_name }}" required maxlength="255" autocomplete="off" autocapitalize="off" spellcheck="false" data-project-name>
    </label>
    <div class="project-final-path">
      <span>{{ t('project.final_path') }}</span>
      <code data-project-final-path>{{ current_path_display }}</code>
    </div>
    <div class="floating-form-actions">
      <button class="secondary-button" type="button" data-project-close>{{ t('common.cancel') }}</button>
      <button class="primary-button" type="submit">{{ t('project.create_open') }}</button>
    </div>
  </form>
</dialog>

{% elif mode == 'remote' %}
<header class="open-page-heading remote-open-heading" data-remote-connection-view>
  <div>
    <a class="text-back-link" href="/open">← {{ t('open.computers') }}</a>
    <p class="eyebrow">{{ t('common.remote') }}</p>
    <h1>{{ computer.name }}</h1>
    <p class="page-copy remote-connection-summary">
      <span class="state-chip remote {{ remote_status.state }}" data-remote-connection-status><span class="status-dot" aria-hidden="true"></span><span data-remote-connection-label>{{ remote_status.label }}</span></span>
      {% if remote_status.last_success_label %}<small data-remote-last-success>{{ t('remote.last_success', time=remote_status.last_success_label) }}</small>{% endif %}
      {% if computer.connection_method == 'ssh' %}<code>{{ computer.username }}@{{ computer.host }}{% if computer.port != 22 %}:{{ computer.port }}{% endif %}</code>{% endif %}
    </p>
  </div>
  <span class="project-result-actions">
    {% if computer.connection_method == 'ssh' %}
    <form method="post" action="/computers/{{ computer.id }}/test" data-remote-connection-check data-remote-connecting-label="{{ t('remote.status.connecting') }}">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <input type="hidden" name="return_to" value="/open/{{ computer.id }}">
      <button class="secondary-button" type="submit">{{ t('remote.check_again') }}</button>
    </form>
    {% else %}
    <a class="secondary-button" href="/open/{{ computer.id }}" data-remote-connection-check data-remote-connecting-label="{{ t('remote.status.connecting') }}">{{ t('remote.check_again') }}</a>
    {% endif %}
    <a class="secondary-button" href="/computers/{{ computer.id }}">{{ t('open.connection_settings') }}</a>
  </span>
</header>

{% if error %}<p class="notice error">{{ error }}</p>{% endif %}
{% if project_error and project_created %}
<section class="notice error project-result-notice">
  <strong>{{ project_error }}</strong>
  {% if project_created %}<code>{{ project_created }}</code>{% endif %}
  <span class="project-result-actions">
    {% if project_existing %}
    <form method="post" action="/computers/{{ computer.id }}/workspaces">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <input type="hidden" name="path" value="{{ project_existing }}">
      <button class="secondary-button" type="submit">{{ t('project.open_existing') }}</button>
    </form>
    {% endif %}
    {% if project_workspace %}<a class="secondary-button" href="/w/{{ project_workspace }}/terminal">{{ t('project.retry_open') }}</a>{% endif %}
    {% if project_created %}<a class="secondary-button" href="/open/{{ computer.id }}?browse=1&browse_path={{ (remote_picker.current if remote_picker else (browse_path or '')) | urlencode }}">{{ t('project.back_folder') }}</a>{% endif %}
  </span>
</section>
{% endif %}
{% if connected %}<p class="notice success">{{ t('ssh.detail.connected_copy') }}</p>{% endif %}
<p class="sr-only"
   role="status"
   aria-live="polite"
   aria-atomic="true"
   data-workspace-open-announcer></p>

<section class="open-workspace-panel panel">
  <header class="open-section-heading">
    <div><h2>{{ t('open.registered') }}</h2><p>{{ t('open.remote_registered_copy') }}</p></div>
    {% if can_remote_run %}
    <span class="project-result-actions" aria-label="{{ t('remote_run.server_entry_heading') }}">
      <a class="secondary-button" href="/remote-runs/new?target_computer_id={{ computer.id | urlencode }}&source_kind=git">{{ t('remote_run.run_public_git') }}</a>
      <a class="secondary-button" href="/remote-runs/new?target_computer_id={{ computer.id | urlencode }}&source_kind=archive">{{ t('remote_run.run_archive') }}</a>
    </span>
    {% endif %}
  </header>
  {% if remote_workspaces %}
  <div class="open-workspace-list">
    {% for workspace in remote_workspaces %}
    <a class="open-workspace-row"
       href="/w/{{ workspace.id }}"
       data-workspace-open-pending
       data-workspace-opening-label="{{ t('terminal.status.connecting') }}">
      <span class="project-avatar" aria-hidden="true">{{ workspace.display_name[:1] | upper }}</span>
      <span>
        <strong>{{ workspace.display_name }}</strong>
        <small data-workspace-open-idle>{{ workspace.canonical_path }}</small>
        <span class="state-chip remote"
              data-workspace-open-status
              hidden>
          <span class="status-dot" aria-hidden="true"></span>
          <span data-workspace-open-status-label>{{ t('terminal.status.connecting') }}</span>
        </span>
      </span>
      <span class="row-arrow" aria-hidden="true">→</span>
    </a>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state quiet-empty"><p>{{ t('ssh.detail.no_workspace') }}</p></div>
  {% endif %}
</section>

{% if remote_runs %}
<section class="open-workspace-panel panel remote-run-recent-panel">
  <header class="open-section-heading">
    <div><h2>{{ t('remote_run.server_runs_heading') }}</h2><p>{{ t('remote_run.server_runs_copy') }}</p></div>
  </header>
  <div class="open-workspace-list">
    {% for run in remote_runs %}
    <a class="open-workspace-row"
       href="/remote-runs/{{ run.id }}"
       data-remote-run-server-row
       data-remote-run-recent
       data-run-state="{{ run.state }}"
       data-status-url="/api/remote-runs/{{ run.id }}/status">
      <span class="project-avatar" aria-hidden="true">{{ run.source_label[:1] | upper }}</span>
      <span>
        <strong>{{ run.source_label }}</strong>
        <small>{{ run.state_label }} · {{ run.created_label }}</small>
      </span>
      <span class="row-arrow" aria-hidden="true">→</span>
    </a>
    {% endfor %}
  </div>
</section>
{% endif %}

<section class="remote-workspace-card panel open-remote-add">
  <header class="open-section-heading">
    <div><h2>{{ t('open.add_workspace') }}</h2><p>{{ t('ssh.detail.open_project_copy') }}</p></div>
  </header>
  <form method="post" action="/computers/{{ computer.id }}/workspaces" class="remote-workspace-form"
        data-folder-picker data-folder-picker-url="/api/computers/{{ computer.id }}/browse-directories">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    <section class="remote-workspace-path-section">
      <label>
        <span>{{ t('ssh.detail.project_path') }}</span>
        <input name="path" value="{{ remote_picker.current if remote_picker else '' }}" placeholder="/srv/projects/crawler" required autocapitalize="off" spellcheck="false" data-folder-picker-input>
      </label>
      <div class="path-picker-actions remote-path-picker-actions">
        <a class="secondary-button folder-picker-button" href="/open/{{ computer.id }}?browse=1" data-folder-picker-open>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 6.5h6l2 2h9v9H3.5z"/></svg>
          <span>{{ t('open.browse_folders') }}</span>
        </a>
        {% if browse and not remote_picker %}<a class="secondary-button path-picker-close-button" href="{{ remote_browse_close_url }}" data-folder-picker-close>{{ t('common.close') }}</a>{% endif %}
        <span>{{ t('open.direct_path_hint') }}</span>
      </div>
      {% if browse_error %}<p class="notice error path-picker-error">{{ browse_error }}</p>{% endif %}
    </section>
    {% if browse and remote_picker %}
    <section class="path-picker remote-path-picker remote-folder-browser" aria-label="{{ t('open.browse_folders') }}" data-folder-picker-panel>
      <header class="path-picker-header">
        <div><span>{{ t('open.current_folder') }}</span><code data-folder-picker-current>{{ remote_picker.current }}</code></div>
        <div class="path-picker-header-actions">
          <button class="path-picker-control" type="button" data-new-project data-project-parent="{{ remote_picker.current }}" data-project-parent-display="{{ remote_picker.current }}">＋ {{ t('project.new_here') }}</button>
          {% if remote_picker.parent_url %}<a class="path-picker-control" href="{{ remote_picker.parent_url }}" data-folder-picker-parent data-folder-path="{{ remote_picker.parent }}">← <span>{{ t('open.parent_folder') }}</span></a>{% endif %}
          <a class="path-picker-control path-picker-close-control" href="{{ remote_browse_close_url }}" data-folder-picker-close aria-label="{{ t('common.close') }}" title="{{ t('common.close') }}">{{ t('common.close') }}</a>
        </div>
      </header>
      {% if remote_picker.hidden_count %}
      <a class="path-picker-control path-picker-hidden" href="{{ remote_picker.hidden_url }}" data-folder-picker-hidden data-hidden-count="{{ remote_picker.hidden_count }}" data-show-hidden="{{ 1 if remote_picker.show_hidden else 0 }}">
        {% if remote_picker.show_hidden %}{{ t('browse.hide_hidden') }}{% else %}{{ t('browse.show_hidden', count=remote_picker.hidden_count) }}{% endif %}
      </a>
      {% endif %}
      <div class="path-picker-list" data-folder-picker-list>
        {% for entry in remote_picker.entries %}
        <a class="path-picker-row" href="{{ entry.url }}" data-folder-path="{{ entry.path }}"><span class="file-glyph folder" aria-hidden="true"></span><span>{{ entry.name }}</span><span aria-hidden="true">›</span></a>
        {% else %}
        <p class="path-picker-empty">{{ t('open.folder_picker_empty') }}</p>
        {% endfor %}
      </div>
    </section>
    {% endif %}
    <div class="remote-workspace-submit-row">
      <label>
        <span>{{ t('ssh.detail.display_name') }} <small>{{ t('common.optional') }}</small></span>
        <input name="display_name" placeholder="crawler">
      </label>
      <button class="primary-button" type="submit" data-folder-picker-default-label="{{ t('ssh.detail.open_workspace') }}">{% if browse and remote_picker %}{{ t('browse.open_current') }}{% else %}{{ t('ssh.detail.open_workspace') }}{% endif %}</button>
    </div>
  </form>
</section>

{% if project_existing and not project_created %}
<form id="open-existing-remote-project" method="post" action="/computers/{{ computer.id }}/workspaces" hidden>
  <input type="hidden" name="_csrf" value="{{ csrf_token }}">
  <input type="hidden" name="path" value="{{ project_existing }}">
</form>
{% endif %}
<dialog id="new-project-dialog" class="project-create-dialog"{% if project_error and not project_created %} data-project-autopen{% endif %}>
  <form method="post" action="/computers/{{ computer.id }}/projects" class="project-create-form" data-project-form>
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    <input type="hidden" name="parent" value="{{ remote_picker.current if remote_picker else '' }}" data-project-parent-input>
    <header class="floating-form-heading">
      <strong>{{ t('project.new') }}</strong>
      <button type="button" class="floating-form-close" data-project-close aria-label="{{ t('common.close') }}">×</button>
    </header>
    <dl class="project-create-facts">
      <div><dt>{{ t('project.computer') }}</dt><dd>{{ computer.name }}</dd></div>
      <div><dt>{{ t('project.location') }}</dt><dd><code data-project-parent-label>{{ remote_picker.current if remote_picker else '' }}</code></dd></div>
    </dl>
    {% if project_error and not project_created %}
    <div class="notice error project-dialog-error" role="alert">
      <strong>{{ project_error }}</strong>
      {% if project_existing %}<button class="secondary-button" type="submit" form="open-existing-remote-project">{{ t('project.open_existing') }}</button>{% endif %}
    </div>
    {% endif %}
    <label>
      <span>{{ t('project.folder_name') }}</span>
      <input name="name" value="{{ project_name }}" required maxlength="255" autocomplete="off" autocapitalize="off" spellcheck="false" data-project-name>
    </label>
    <div class="project-final-path">
      <span>{{ t('project.final_path') }}</span>
      <code data-project-final-path>{{ remote_picker.current if remote_picker else '' }}</code>
    </div>
    <div class="floating-form-actions">
      <button class="secondary-button" type="button" data-project-close>{{ t('common.cancel') }}</button>
      <button class="primary-button" type="submit">{{ t('project.create_open') }}</button>
    </div>
  </form>
</dialog>
{% endif %}
{% endblock %}
{% block scripts %}
{% if mode == 'remote' and remote_runs %}<script src="{{ url_for('static', path='remote_run.js') }}?v=11" defer></script>{% endif %}
{% endblock %}