{% extends "base.html" %}
{% block title %}Local workspace{% endblock %}
{% block page_id %}workspace{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ aida_rel('static/vendor/xterm/xterm.css') }}">
<style>
.workspace-terminal-tabs { display:flex; gap:8px; overflow-x:auto; padding:8px 0; }
.workspace-terminal-tab { display:inline-flex; gap:3px; white-space:nowrap; }
.workspace-terminal-tab [aria-selected="true"] { border-color:var(--accent); }
.workspace-terminal-host { background:#05101a; padding:8px; border-radius:8px; margin-top:8px; }
.workspace-terminal-pane { height:360px; }
.workspace-terminal-pane > .xterm { height:100%; }
.workspace-columns { display:grid; grid-template-columns:minmax(240px, 30%) minmax(0, 1fr); gap:14px; align-items:start; }
.workspace-files { max-height:70vh; overflow:auto; }
.workspace-entry { width:100%; text-align:left; display:flex; gap:8px; align-items:center; padding:8px; border:0; border-bottom:1px solid var(--border); background:transparent; color:inherit; cursor:pointer; }
.workspace-entry:hover, .workspace-entry.selected { background:var(--panel, #15232d); }
.workspace-entry .workspace-name { flex:1; overflow-wrap:anywhere; }
.workspace-editor { min-height:420px; width:100%; font:13px/1.55 Consolas, monospace; tab-size:4; white-space:pre; }
.workspace-path { overflow-wrap:anywhere; font-family:Consolas, monospace; font-size:12px; }
.workspace-output { min-height:130px; max-height:420px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
.workspace-command { min-height:80px; font-family:Consolas, monospace; }
.workspace-file-head { min-height:28px; }
@media (max-width:850px) { .workspace-columns { grid-template-columns:1fr; } .workspace-files { max-height:280px; } .workspace-editor { min-height:320px; } }
</style>
{% endblock %}
{% block content %}
<div class="a-page-head">
  <h1><i class="fa-solid fa-laptop-code" aria-hidden="true"></i> Local workspace</h1>
  <div class="a-sub">Browse and edit files on the PC running AidaIDE, run local commands, and work with its Git repositories.</div>
</div>
<div id="workspace-root"></div>
{% endblock %}
{% block scripts %}
<script src="{{ aida_rel('static/vendor/xterm/xterm.js') }}"></script>
<script src="{{ aida_rel('static/vendor/xterm/xterm-addon-fit.js') }}"></script>
<script src="{{ aida_rel('static/vendor/xterm/xterm-addon-search.js') }}"></script>
<script src="{{ aida_rel('static/js/workspace_terminal.js') }}"></script>
<script src="{{ aida_rel('static/js/workspace_projects.js') }}"></script>
<script src="{{ aida_rel('static/js/browser_workspaces.js') }}"></script>
<script src="{{ aida_rel('static/js/workspace.js') }}"></script>
{% endblock %}