{% extends "base.html" %}

{% block title %}AI2Apps{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ static('css/shell.css') }}">
{% endblock %}

{% block content %}
<div id="ai2apps-shell" class="app-shell" data-mode="docked">
    <div class="dock-hot-zone" aria-hidden="true"></div>

    <header class="app-dock" aria-label="AI2Apps Dock">
        <button class="dock-launcher-button" type="button" data-shell-action="home"
                aria-label="{{ t('shell.home.aria') }}" title="{{ t('shell.home.name') }}">
            <img src="{{ static('favicon.svg') }}" alt="" class="dock-logo">
            <span class="dock-wordmark">AI2Apps</span>
        </button>

        <div class="dock-divider" aria-hidden="true"></div>
        <nav class="dock-apps" aria-label="Pinned and running Apps"></nav>
        <div class="dock-spacer"></div>

        <div class="dock-current" aria-live="polite">
            <span class="dock-current-kicker">{{ t('shell.active_app') }}</span>
            <strong class="dock-current-name">{{ t('shell.home.name') }}</strong>
        </div>

        <button class="dock-account" type="button" data-shell-action="account"
                aria-label="Open AI2Apps Account" title="Open Account App">
            <span class="dock-account-avatar"><i data-lucide="circle-user-round"></i></span>
            <span class="dock-account-copy">
                <strong data-account-name>Checking account…</strong>
                <small data-account-detail>AI2Apps Cloud</small>
            </span>
            <span class="dock-account-dot" data-account-dot aria-hidden="true"></span>
        </button>

        <div class="dock-controls">
            <button class="dock-control" type="button" data-shell-action="control"
                    {% if not can_manage_system %}hidden{% endif %}
                    aria-label="Open System Control" title="Trust, Patches, and Safe Mode">
                <i data-lucide="shield-check"></i>
                <span class="control-alert-count" hidden></span>
            </button>
            <button class="dock-control" type="button" data-shell-action="close-current"
                    aria-label="Close current App" title="Close App" disabled>
                <i data-lucide="x"></i>
            </button>
            <button class="dock-control" type="button" data-shell-action="toggle-mode"
                    aria-label="Enter immersive mode" title="Toggle Dock mode">
                <i data-lucide="maximize-2"></i>
            </button>
            <button class="dock-control" type="button" data-shell-action="launcher"
                    aria-label="Show all Apps" title="App Launcher">
                <i data-lucide="grid-3x3"></i>
            </button>
        </div>
    </header>

    <main class="app-stage" aria-label="Active App">
        <section class="desktop-home" aria-label="{{ t('shell.home.aria') }}">
            <div class="desktop-home-scroll">
                <section class="desktop-home-hero">
                    <div class="desktop-home-hero-copy">
                        <p class="desktop-home-eyebrow">
                            <span>{{ t('shell.home.eyebrow') }}</span><span data-desktop-client-version
                                {% if not desktop_client_version | default('', true) %}hidden{% endif %}>{% if desktop_client_version | default('', true) %} · v{{ desktop_client_version }}{% endif %}</span>
                        </p>
                        <h1>{{ t('shell.home.hero.line1') }}<br>{{ t('shell.home.hero.line2_prefix') }}<span data-desktop-device-label>{{ desktop_device_label | default('Device', true) }}</span>{{ t('shell.home.hero.line2_suffix') }}</h1>
                        <p class="desktop-home-intro">{{ t('shell.home.intro') }}</p>
                        <a class="desktop-home-open-source" href="https://github.com/Avdpro/ai2apps"
                           target="_blank" rel="noopener noreferrer">
                            <span class="desktop-home-open-source-icon"><i data-lucide="github"></i></span>
                            <span>
                                <strong>{{ t('shell.home.open_source.title') }}</strong>
                                <small>{{ t('shell.home.open_source.description') }}</small>
                            </span>
                            <i data-lucide="arrow-up-right"></i>
                        </a>
                        <div class="desktop-home-actions">
                            <button type="button" class="desktop-home-primary" data-home-app-id="ai2apps.general-chat">
                                <i data-lucide="message-square"></i><span>{{ t('shell.home.action.chat') }}</span>
                            </button>
                            <button type="button" class="desktop-home-secondary" data-shell-action="launcher">
                                <i data-lucide="grid-3x3"></i><span>{{ t('shell.home.action.browse') }}</span>
                            </button>
                        </div>
                    </div>
                    <div class="desktop-home-status">
                        <span class="desktop-home-status-mark"><i data-lucide="sparkles"></i></span>
                        <div><strong>{{ t('shell.home.status.title') }}</strong><small>{{ t('shell.home.status.prefix') }}<span data-desktop-device-label>{{ desktop_device_label | default('Device', true) }}</span>{{ t('shell.home.status.suffix') }}</small></div>
                        <span class="desktop-home-online"><i data-lucide="wifi"></i> {{ t('shell.home.status.local') }}</span>
                    </div>
                </section>

                <section class="desktop-home-account" data-desktop-home-account hidden aria-live="polite">
                    <span class="desktop-home-account-icon"><i data-lucide="circle-user-round"></i></span>
                    <div class="desktop-home-account-copy">
                        <p>{{ t('shell.home.account.eyebrow') }}</p>
                        <h2 data-home-account-title></h2>
                        <p data-home-account-body></p>
                        <div class="desktop-home-account-benefits" data-home-account-benefits></div>
                    </div>
                    <button type="button" class="desktop-home-account-action" data-shell-action="account">
                        <span data-home-account-action-label>{{ t('shell.home.account.open') }}</span><i data-lucide="arrow-right"></i>
                    </button>
                </section>

                <section class="desktop-home-section" aria-labelledby="desktop-home-apps-title">
                    <div class="desktop-home-section-heading">
                        <div><p>{{ t('shell.home.apps.eyebrow') }}</p><h2 id="desktop-home-apps-title">{{ t('shell.home.apps.title') }}</h2></div>
                        <button type="button" data-shell-action="launcher">{{ t('shell.home.apps.all') }} <i data-lucide="arrow-right"></i></button>
                    </div>
                    <div class="desktop-home-apps" data-desktop-home-apps></div>
                </section>
            </div>
        </section>
        <iframe class="app-frame" title="Dashboard" allow="clipboard-read; clipboard-write"
                referrerpolicy="same-origin" hidden></iframe>
        <div class="app-loading" aria-live="polite" hidden>
            <span class="app-loading-mark"></span>
            <span>{{ t('shell.opening_app') }}</span>
        </div>
    </main>

    <section class="app-launcher" aria-label="App Launcher" aria-hidden="true">
        <button class="launcher-backdrop" type="button" data-shell-action="close-launcher"
                aria-label="Close App Launcher"></button>
        <div class="launcher-panel" role="dialog" aria-modal="true" aria-labelledby="launcher-title">
            <div class="launcher-heading">
                <div>
                    <p class="launcher-eyebrow">AI2Apps</p>
                    <h1 id="launcher-title">App Launcher</h1>
                </div>
                <button class="launcher-close" type="button" data-shell-action="close-launcher"
                        aria-label="Close App Launcher"><i data-lucide="x"></i></button>
            </div>
            <label class="launcher-search">
                <i data-lucide="search"></i>
                <input type="search" placeholder="Search Apps" autocomplete="off"
                       aria-label="Search Apps" data-launcher-search>
                <kbd>Esc</kbd>
            </label>
            <div class="launcher-categories" aria-label="App categories"></div>
            <div class="launcher-grid" role="list"></div>
            <p class="launcher-empty" hidden>No Apps match this search.</p>
        </div>
    </section>

    <section class="system-control" aria-label="AI2Apps System Control" aria-hidden="true">
        <button class="control-backdrop" type="button" data-shell-action="close-control"
                aria-label="Close System Control"></button>
        <div class="control-panel" role="dialog" aria-modal="true" aria-labelledby="control-title">
            <div class="control-heading">
                <div>
                    <p class="launcher-eyebrow">Unpatchable recovery surface</p>
                    <h1 id="control-title">System Control</h1>
                </div>
                <button class="launcher-close" type="button" data-shell-action="close-control"
                        aria-label="Close System Control"><i data-lucide="x"></i></button>
            </div>
            <nav class="control-tabs" aria-label="System Control sections">
                <button type="button" data-control-tab="overview" class="is-active">Recovery</button>
                <button type="button" data-control-tab="approvals">Approvals</button>
                <button type="button" data-control-tab="grants">Grants</button>
                <button type="button" data-control-tab="trust">Package Trust</button>
                <button type="button" data-control-tab="patches">Patch Conflicts</button>
            </nav>
            <div class="control-content" aria-live="polite">
                <div class="control-loading">Loading trusted system state…</div>
            </div>
        </div>
    </section>

    <button class="dock-context-dismiss" type="button" tabindex="-1"
            aria-label="Close App actions" hidden></button>
    <div class="dock-context-menu" role="menu" aria-label="App actions" hidden>
        <div class="dock-context-heading">
            <i data-context-icon data-lucide="app-window"></i>
            <span data-context-name>App</span>
        </div>
        <button type="button" role="menuitem" data-dock-menu-action="switch">
            <i data-lucide="mouse-pointer-2"></i><span>Switch to App</span>
        </button>
        <button type="button" role="menuitem" data-dock-menu-action="pin">
            <i data-lucide="pin"></i><span data-context-pin-label>Keep in Dock</span>
        </button>
        <button type="button" role="menuitem" data-dock-menu-action="warm">
            <i data-lucide="flame"></i><span data-context-warm-label>Keep Warm</span>
        </button>
        <button type="button" role="menuitem" data-dock-menu-action="reload">
            <i data-lucide="refresh-cw"></i><span>Reload</span>
        </button>
        <div class="dock-context-separator" role="separator"></div>
        <button type="button" role="menuitem" data-dock-menu-action="close">
            <i data-lucide="x"></i><span>Close</span>
        </button>
        <button type="button" role="menuitem" class="is-danger" data-dock-menu-action="force-close">
            <i data-lucide="octagon-x"></i><span>Force Close</span>
        </button>
    </div>

    <div class="dock-tooltip-host" role="tooltip" hidden></div>

    <div class="shell-toast" role="status" aria-live="polite"></div>
</div>

<script>
window.AI2APPS_SHELL_BOOT = {
    apps: {{ system_apps | tojson }},
    initialAppId: {{ initial_app_id | tojson }},
    initialInstanceId: {{ initial_instance_id | tojson }},
        canManageSystem: {{ can_manage_system | default(false) | tojson }}
};
</script>
{% endblock %}

{% block scripts %}
<script src="{{ static('js/shell.js') }}"></script>
{% endblock %}