<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />

        <!-- SEO Meta Tags -->
        <title>socktop - A TUI-first Remote System Monitor</title>
        <meta
            name="description"
            content="socktop is a beautiful, TUI-first remote system monitor built with Rust. Monitor your Linux systems in real-time with an elegant terminal interface featuring the Catppuccin Frappe theme."
        />
        <meta
            name="keywords"
            content="system monitor, TUI, terminal, Rust, Linux, remote monitoring, socktop, system metrics, server monitoring, Catppuccin"
        />
        <meta name="author" content="Jason Witty" />

        <!-- Open Graph / Social Media Meta Tags -->
        <meta property="og:type" content="website" />
        <meta
            property="og:title"
            content="socktop - A TUI-first Remote System Monitor"
        />
        <meta
            property="og:description"
            content="Beautiful, TUI-first remote system monitor built with Rust. Monitor your Linux systems in real-time."
        />
        <meta
            property="og:url"
            content="https://jasonwitty.github.io/socktop/"
        />
        <meta property="og:site_name" content="socktop" />

        <!-- Twitter Card Meta Tags -->
        <meta name="twitter:card" content="summary_large_image" />
        <meta
            name="twitter:title"
            content="socktop - A TUI-first Remote System Monitor"
        />
        <meta
            name="twitter:description"
            content="Beautiful, TUI-first remote system monitor built with Rust"
        />

        <!-- Favicon -->
        <link rel="icon" type="image/png" href="/assets/favicon.png" />
        <link rel="shortcut icon" type="image/png" href="/assets/favicon.png" />

        <!-- External Stylesheets -->
        <link
            rel="stylesheet"
            href="{{ static_path }}/@xterm/xterm/css/xterm.css"
        />
        <link rel="stylesheet" href="/assets/styles.css" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        />

        <!-- Preload critical resources -->
        <link rel="preload" href="/assets/styles.css" as="style" />
        <link rel="preload" href="/assets/terminal.js" as="script" />

        <!-- DNS Prefetch for external resources -->
        <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com" />

        <!-- Theme Color -->
        <meta name="theme-color" content="#303446" />

        <!-- Umami Analytics -->
        <script
            defer
            src="https://unami.wittyoneoff.com/script.js"
            data-website-id="caefa16f-86af-4835-8b82-c8649aea0e2a"
        ></script>
    </head>
    <body>
        <!-- Hero Section -->
        <section class="hero-section">
            <h1 class="hero-title">socktop</h1>
            <p class="hero-tagline">A TUI-first remote system monitor.</p>

            <!-- Links Section -->
            <div class="links-section">
                <a
                    href="https://github.com/jasonwitty/socktop"
                    class="link-button github"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="View socktop on GitHub"
                >
                    <i class="fab fa-github" aria-hidden="true"></i>
                    <span>GitHub</span>
                </a>
                <a
                    href="/assets/docs/index.html"
                    class="link-button docs"
                    aria-label="View Documentation"
                >
                    <i class="fas fa-book" aria-hidden="true"></i>
                    <span>Docs</span>
                </a>
                <a
                    href="https://crates.io/crates/socktop"
                    class="link-button crate"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="View TUI crate on crates.io"
                >
                    <i class="fas fa-cube" aria-hidden="true"></i>
                    <span>TUI Crate</span>
                </a>
                <a
                    href="https://crates.io/crates/socktop-agent"
                    class="link-button crate"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="View Agent crate on crates.io"
                >
                    <i class="fas fa-cube" aria-hidden="true"></i>
                    <span>Agent Crate</span>
                </a>
                <a
                    href="https://jasonwitty.github.io/socktop/"
                    class="link-button apt"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Visit APT repository"
                >
                    <i class="fas fa-box" aria-hidden="true"></i>
                    <span>APT Repo</span>
                </a>
            </div>
        </section>

        <!-- Terminal Window -->
        <div class="terminal-wrapper">
            <div class="terminal-window">
                <div class="terminal-titlebar">
                    <div class="terminal-controls">
                        <div
                            class="terminal-button close"
                            role="button"
                            aria-label="Close"
                        ></div>
                        <div
                            class="terminal-button minimize"
                            role="button"
                            aria-label="Minimize"
                        ></div>
                        <div
                            class="terminal-button maximize"
                            role="button"
                            aria-label="Maximize"
                        ></div>
                    </div>
                    <div class="terminal-title">socktop@demo ~ zsh</div>
                </div>
                <div id="terminal" role="region" aria-label="Terminal"></div>
            </div>
        </div>

        <!-- Footer -->
        <footer class="site-footer">
            <p>
                Site Built with
                <a
                    href="https://xtermjs.org/"
                    target="_blank"
                    rel="noopener noreferrer"
                    >xterm.js</a
                >
                | Source Code:
                <a
                    href="https://gt.wittyoneoff.com/jason/socktop-webterm"
                    target="_blank"
                    rel="noopener noreferrer"
                    >gitea</a
                >
                | Theme:
                <a
                    href="https://github.com/catppuccin/catppuccin"
                    target="_blank"
                    rel="noopener noreferrer"
                    >Catppuccin Frappe</a
                >
            </p>
        </footer>

        <!-- External Scripts -->
        <script src="{{ static_path }}/@xterm/xterm/lib/xterm.js"></script>
        <script src="{{ static_path }}/@xterm/addon-fit/lib/addon-fit.js"></script>
        <script src="{{ static_path }}/terminado-addon.js"></script>

        <!-- Pass websocket path to JavaScript -->
        <script>
            window.WEBSOCKET_PATH = "{{ websocket_path }}";
        </script>

        <!-- Initialize Terminal -->
        <script src="/assets/terminal.js"></script>
    </body>
</html>
