{% extends "admin_base.html" %}
{% import "macros/admin_management_header.html" as mh %}

{% block extra_head %}
<!-- Xterm.js styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
{% endblock %}

{% block page_title %}System Shell{% endblock %}
{% block admin_content %}
    {{ mh::management_header_open(title="System Shell", subtitle="Interactive terminal for advanced system administration and debugging.") }}
            <div class="flex flex-wrap items-center gap-3">
                <div class="flex items-center gap-2 text-sm text-muted" role="status" aria-live="polite">
                    <span class="size-2 shrink-0 rounded-full bg-muted" id="shell-status-dot"></span>
                    <span id="shell-status-text">Connecting...</span>
                </div>
                <button type="button" class="blocks-button blocks-button-secondary" onclick="resetTerminal()" aria-label="Reset terminal session">
                    <i class="fas fa-sync-alt" aria-hidden="true"></i> <span>Reset terminal</span>
                </button>
            </div>
    {{ mh::management_header_close() }}

    <section class="mx-auto w-full max-w-7xl px-4 pb-6 sm:px-6" aria-label="Platform terminal">
        <p class="mb-3 text-sm leading-6 text-muted">Connected sessions keep their working directory. Close or reset the session to start fresh.</p>
        <div id="terminal-shell" class="flex h-[calc(100dvh-15rem)] min-h-[24rem] max-h-[52rem] flex-col overflow-hidden rounded-xl border border-divider bg-[#0d1117] shadow-sm">
            <div id="terminal-instance" class="min-h-0 flex-1 overflow-hidden p-2 sm:p-3" aria-label="Interactive terminal"></div>
            <div class="flex items-center gap-2 border-t border-white/10 px-4 py-2 text-xs text-slate-300 sm:hidden" role="status" aria-live="polite">
                <span class="size-2 shrink-0 rounded-full bg-muted" id="shell-status-dot-mobile"></span>
                <span id="shell-status-text-mobile">Connecting...</span>
            </div>
        </div>
    </section>
{% endblock %}

{% block scripts %}
<!-- Xterm.js and Addons -->
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
<script src="/plugins/shell/assets/js/shell.js"></script>
{% endblock %}