{% extends 'base.html' %}

{% block title %}AgentWire Desktop{% endblock %}

{% block styles %}
<link rel="stylesheet" href="/static/css/desktop.css">
{% endblock %}

{% block content %}
<div class="desktop-container">
    <!-- Menu Bar -->
    <div class="menu-bar">
        <div class="menu-left">
            <div class="menu-item" id="machinesMenu">Machines</div>
            <div class="menu-item" id="projectsMenu">Projects</div>
            <div class="menu-item" id="sessionsMenu">Sessions</div>
            <div class="menu-item" id="artifactsMenu">Artifacts</div>
        </div>
        <div class="menu-right">
            <div class="status-item" id="connectionStatus">
                <span class="status-dot disconnected"></span>
                <span class="status-text">Connecting...</span>
            </div>
            <div class="status-item" id="sessionCount">
                <span class="count">0</span> sessions
            </div>
            <div class="menu-time" id="menuTime"></div>
            <div class="menu-item dropdown" id="settingsMenu">
                <span class="settings-icon">&#9881;</span>
                <div class="dropdown-content dropdown-right">
                    <div class="dropdown-item" id="configMenuItem">
                        <span class="icon">&#9881;</span>
                        <span>Config</span>
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-item" id="resetWindowsMenuItem">
                        <span class="icon">&#8634;</span>
                        <span>Reset Window Positions</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Desktop Area -->
    <div class="desktop-area" id="desktopArea">
        <div class="desktop-wallpaper">
            <div class="logo-layers">
                <img src="/static/agentwire-splash-logo-layers--tree.png" alt="" class="logo-layer layer-tree">
                <img src="/static/agentwire-splash-logo-layers--telephone.png" alt="" class="logo-layer layer-telephone">
                <img src="/static/agentwire-splash-logo-layers--echo.png" alt="" class="logo-layer layer-owl">
                <img src="/static/agentwire-splash-logo-layers--telephone-fg.png" alt="" class="logo-layer layer-telephone-fg">
                <img src="/static/agentwire-splash-logo-layers--echo-claw-fg.png" alt="" class="logo-layer layer-claw-fg">
                <img src="/static/agentwire-splash-logo-layers--agentwire-text.png" alt="" class="logo-layer layer-text">
            </div>
        </div>
    </div>

    <!-- Taskbar -->
    <div class="taskbar" id="taskbar">
        <div class="taskbar-windows" id="taskbarWindows"></div>
        <div class="taskbar-tray">
            <button class="tray-ptt" id="globalPtt" title="Hold to talk to AgentWire (Ctrl+Space)">
                <span class="ptt-icon">🎤</span>
            </button>
            <div class="tray-item" id="voiceIndicator" title="AgentWire idle"><div class="stop-icon"></div></div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/winbox.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css">
<script type="module" src="/static/js/desktop.js"></script>
{% endblock %}