{{ template "header.html" . }}

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

    <div class="relative">
        <!-- Contenedor del botón -->
        <div class="clipboard flex justify-between gap-2 p-2 border border-gray-600 rounded-lg
        shadow cursor-pointer transition-colors duration-200 hover:bg-gray-100
        mb-8"
             data-clipboard-text="{{.baseURL}}/results/{{.uniqueID}}">
            <span class="text-blue-600 font-medium">{{.baseURL}}/results/{{.uniqueID}}</span>
            <svg class="clipboard-icon w-6 h-6 ml-auto text-gray-600 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4.184a3 3 0 0 1 5.632 0H19a2 2 0 0 1-2 2v14a2 2 0 0 1-2 2zM9 4H5v15h14V4h-4v1a1 1 0 1 1-2 0V4H9z"/>
            </svg>
        </div>
        <!-- Mensaje de retroalimentación -->
        <p id="feedback" class="absolute top-12 left-1/2 -translate-x-1/2
        text-green-600 text-sm bg-white font-medium hidden p-4">
            Copied to clipboard!
        </p>
    </div>
    <script src="/static/custom.js"></script>

        <h2 class="text-4xl sm:text-3xl font-semibold text-center text-gray-100 mb-6">
            Command Statistics
        </h2>
        <ul>
            <li class="text-center">Total commands: <span class="font-semibold text-blue-400">{{.total}}</span></li>
            <li class="text-center">Unique commands: <span class="font-semibold text-blue-400">{{.unique}}</span></li>
        </ul>

        <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 min-w-0 flex-1 basis-1/3">
            <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 truncate"><span
                class="font-semibold text-blue-400">{{.Count}} times</span> - {{.Command}}</li>
                {{end}}
            </ul>
        </section>

        <section class="mb-8 min-w-0 flex-1 basis-1/3">
            <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 truncate"><span
                class="font-semibold text-blue-400">{{.Count}} times</span> - {{.Command}}</li>
                {{end}}
            </ul>
        </section>

        <section class="mb-8 min-w-0 flex-1 basis-1/3">
            <h2 class="text-2xl font-bold text-gray-200 mb-4">Patterns</h2>
            <ul>
                {{range .commonPatternStats}}
                    <li class="text-lg text-gray-400 truncate"><span
                class="font-semibold text-blue-400">{{.Count}} times</span> - {{.Command }}</li>
                {{end}}
            </ul>
            <h3 class="text-xl font-semibold mt-8">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}}/results/{{.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}}/results/{{.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}}/results/{{.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}}/results/{{.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" . }}