{{ template "header.html" . }}

    <h1 class="text-xl text-center text-blue-400 cursor-pointer hover:text-blue-600 mb-8">
        <a href="{{.baseURL}}/{{.uniqueID}}" id="share-url">{{.baseURL}}/{{.uniqueID}}</a>
    </h1>

        <h2 class="text-4xl sm:text-3xl font-semibold text-center text-gray-100 mb-6">
            Command Statistics
        </h1>

        <div class="chart-container">
            <h2 class="text-2xl font-bold text-gray-200 mb-4">Top Commands Chart</h2>
            <div class="chart">
                {{.chartHTML | safeHTML}}
            </div>
        </div>

        <div class="container" style="align-items: flex-start; justify-content:
        flex-start">

        <section class="mb-8 flex-1">
            <h2 class="text-2xl font-bold text-gray-200 mb-4">Top Commands</h2>
            <ul class="list-disc pl-6 space-y-2">
                {{range .topCommands}}
                    <li class="text-lg text-gray-400">{{.Command}} - <span class="font-semibold text-blue-400">{{.Count}} times</span></li>
                {{end}}
            </ul>
        </section>

        <section class="mb-8 flex-1">
            <h2 class="text-2xl font-bold text-gray-200 mb-4">Tools</h2>
            <ul class="list-disc pl-6 space-y-2">
                {{range .categoryStats}}
                    <li class="text-lg text-gray-400">{{.Category}} - <span class="font-semibold text-blue-400">{{.Count}} times</span></li>
                {{end}}
            </ul>
        </section>

        <section class="mb-8 flex-1">
            <h3 class="text-xl font-semibold">Common Patterns</h3>
            <ul>
                {{range .commonPatternStats}}
                    <li class="text-lg text-gray-400">{{.Command}} - <span class="font-semibold text-blue-400">{{.Count}} times</span></li>
                {{end}}
            </ul>
            <h3 class="text-xl font-semibold">Pipe Counts</h3>
            <ul>
                    <li class="text-lg text-gray-400"><span
                        class="font-semibold
                        text-blue-400">{{.pipeRedirectionCounts.pipe}} times</span></li>
            </ul>
        </section>
        </div>

        <div class="mt-8 flex justify-center space-x-4">
            <a
                href="https://twitter.com/intent/tweet?text=Wrappd.sh:%20check%20out%20my%20command%20stats!&url={{.baseURL}}/{{.uniqueID}}"
                target="_blank"
                class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-200">Share on Twitter</a>

            <a
            href="https://{{.mastodon}}/share?text=Wrappd.sh:%20check%20out%20my%20command%20stats!%20{{.baseURL}}/{{.uniqueID}}"
                target="_blank"
                class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-200">Share on Mastodon</a>

            <a
                href="https://bsky.app/share?text=Wrappd.sh:%20check%20out%20my%20command%20stats!%20{{.baseURL}}/{{.uniqueID}}"
                target="_blank"
                class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-200">Share on Bluesky</a>
            <a
                    href="https://www.linkedin.com/sharing/share-offsite/?url={{.baseURL}}/{{.uniqueID}}" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-200">Share on LinkedIn</a>
        </div>

{{ template "footer.html" . }}