{% extends "base.html" %}
{% block body_class %}home-page{% endblock %}
{% block content %}
<header class="dashboard-heading">
  <div>
    <p class="eyebrow">Termroom</p>
    <h1>{{ t('home.heading') }}</h1>
    <p class="page-copy">{{ t('home.copy') }}</p>
  </div>
  <div class="dashboard-primary-actions">
    <a class="primary-button dashboard-open" href="/open">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
      <span>{{ t('home.open_workspace') }}</span>
    </a>
  </div>
</header>

<section class="workspace-panel">
  <header class="panel-heading">
    <div>
      <h2>{{ t('home.recent_workspaces') }}</h2>
      <p>{{ t('home.recent_workspaces_copy') }}</p>
    </div>
  </header>
  <p class="sr-only"
     role="status"
     aria-live="polite"
     aria-atomic="true"
     data-workspace-open-announcer></p>

  {% if recent %}
  <div class="workspace-table"
       aria-label="{{ t('home.recent_workspaces') }}"
       data-terminal-activity-summary
       data-summary-url="/api/terminal-activity/summary">
    <div class="workspace-table-head" aria-hidden="true">
      <span>{{ t('home.project') }}</span><span>{{ t('home.last_used') }}</span><span>{{ t('home.status') }}</span><span></span>
    </div>
    {% for workspace in recent %}
    <a class="workspace-item"
       href="/w/{{ workspace.id }}"
       data-terminal-activity-workspace="{{ workspace.id }}"
       data-workspace-href="/w/{{ workspace.id }}"
       {% if workspace.backend_kind == 'remote' %}
       data-workspace-open-pending
       data-workspace-opening-label="{{ t('terminal.status.connecting') }}"
       {% endif %}>
      <span class="workspace-main">
        <span class="project-avatar" aria-hidden="true">{{ workspace.display_name[:1] | upper }}</span>
        <span>
          <strong>{{ workspace.display_name }}</strong>
          <small>{{ workspace.canonical_path }}</small>
        </span>
      </span>
      <span class="workspace-last-opened">{{ workspace.last_opened_label }}</span>
      <span class="workspace-state-summary">
        <span class="state-chip {{ workspace.session_status_class }}"
              {% if workspace.backend_kind == 'remote' %}
              data-workspace-open-status
              {% endif %}>
          <span class="status-dot" aria-hidden="true"></span>
          <span {% if workspace.backend_kind == 'remote' %}data-workspace-open-status-label{% endif %}>{{ t(workspace.session_status_label) }}</span>
        </span>
        <small>{{ t('common.terminal') }} {{ workspace.terminal_count }} · {{ workspace.connection_label or t('home.this_computer') }}</small>
        <small class="workspace-terminal-unread" data-terminal-activity-unread hidden>
          <span class="terminal-unread-dot" aria-hidden="true"></span>
          <span>{{ t('terminal.activity.new_output') }}</span>
          <span aria-hidden="true">·</span>
          <span data-terminal-activity-count></span>
        </small>
      </span>
      <span class="row-arrow" aria-hidden="true">→</span>
    </a>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state dashboard-empty">
    <span class="empty-icon" aria-hidden="true"></span>
    <strong>{{ t('home.no_workspace') }}</strong>
    <p>{{ t('home.no_workspace_copy') }}</p>
    <a class="secondary-button" href="/open">{{ t('home.first_workspace') }}</a>
  </div>
  {% endif %}
</section>

{% if recent_runs %}
<section class="workspace-panel remote-run-recent-panel">
  <header class="panel-heading">
    <h2>{{ t('remote_run.recent_heading') }}</h2>
  </header>
  <div class="remote-run-recent-list" aria-label="{{ t('remote_run.recent_heading') }}">
    {% for run in recent_runs %}
    <a class="remote-run-recent-row"
       href="/remote-runs/{{ run.id }}"
       data-remote-run-recent
       data-run-state="{{ run.state }}"
      data-status-url="/api/remote-runs/{{ run.id }}/status">
      <span class="remote-run-recent-main">
        <strong>{{ run.source_label }}</strong>
        <small><span>{{ run.target_label }}</span><span aria-hidden="true"> · </span><time>{{ run.created_label }}</time></small>
      </span>
      <span class="state-chip {% if run.state in ('preparing', 'running') %}running{% endif %}">
        <span class="status-dot"></span>
        {{ run.state_label }}
      </span>
      <span class="row-arrow" aria-hidden="true">→</span>
    </a>
    {% endfor %}
  </div>
</section>
{% endif %}
{% endblock %}
{% block scripts %}
{% if recent_runs %}<script src="{{ url_for('static', path='remote_run.js') }}?v=11" defer></script>{% endif %}
{% endblock %}