export declare const MAIN_TEMPLATE = "<!doctype html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\" />\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n        <title>Code Coverage Report</title>\n        <style>\n            :root {\n                --covered-bg: #ddffdd;\n                --uncovered-bg: #fffcdd;\n                --covered-dark: #6bcc6b;\n                --uncovered-dark: #ffcc00;\n                --gas-color: #e60f0f;\n                --hits-color: #0078d7;\n                --line-color: #888;\n                --line-bg: #f8f8f8;\n                --line-border: #ddd;\n            }\n\n            body {\n                font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;\n                margin: 0;\n                padding: 0;\n                line-height: 1.5;\n            }\n\n            .summary {\n                padding: 20px;\n                border-bottom: 1px solid #eee;\n                background-color: #fff;\n                margin-bottom: 20px;\n            }\n\n            .summary h1 {\n                margin-top: 0;\n                margin-bottom: 20px;\n            }\n\n            .stats {\n                display: grid;\n                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n                gap: 20px;\n                margin-bottom: 30px;\n            }\n\n            .stat-item {\n                padding: 15px;\n                background-color: #f9f9f9;\n                border-radius: 5px;\n                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n            }\n\n            .stat-label {\n                font-weight: bold;\n                display: block;\n                margin-bottom: 5px;\n            }\n\n            .stat-value {\n                font-size: 1.5rem;\n                font-weight: 600;\n            }\n\n            .progress-bar {\n                height: 8px;\n                background-color: #eee;\n                border-radius: 4px;\n                overflow: hidden;\n                margin-top: 10px;\n            }\n\n            .progress {\n                height: 100%;\n                background-color: var(--covered-dark);\n            }\n\n            .instructions-section {\n                background-color: #f9f9f9;\n                border-radius: 5px;\n                padding: 15px;\n                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n            }\n\n            .instructions-section h2 {\n                margin-top: 0;\n                margin-bottom: 0;\n                font-size: 1.2rem;\n                display: inline-block;\n            }\n\n            .toggle-icon {\n                font-size: 0.8rem;\n                vertical-align: middle;\n                transition: transform 0.3s ease;\n            }\n\n            details[open] .toggle-icon {\n                transform: rotate(180deg);\n            }\n\n            summary {\n                cursor: pointer;\n                user-select: none;\n            }\n\n            summary::-webkit-details-marker {\n                display: none;\n            }\n\n            .instructions-content {\n                margin-top: 15px;\n                overflow-x: auto;\n            }\n\n            table {\n                width: 100%;\n                border-collapse: collapse;\n            }\n\n            thead th {\n                text-align: left;\n                padding: 8px;\n                background-color: #f0f0f0;\n            }\n\n            tbody td {\n                padding: 8px;\n                border-top: 1px solid #eee;\n            }\n\n            .sortable {\n                cursor: pointer;\n                position: relative;\n                padding-right: 20px;\n            }\n\n            .sort-icon {\n                font-size: 0.8rem;\n                margin-left: 5px;\n                color: #aaa;\n            }\n\n            th.sort-asc .sort-icon::after {\n                content: \"\u2191\";\n                color: #333;\n            }\n\n            th.sort-desc .sort-icon::after {\n                content: \"\u2193\";\n                color: #333;\n            }\n\n            .percent-container {\n                display: flex;\n                flex-direction: column;\n                gap: 4px;\n            }\n\n            .percent-bar {\n                height: 8px;\n                background-color: #eee;\n                border-radius: 4px;\n                overflow: hidden;\n            }\n\n            .percent-fill {\n                height: 100%;\n                background-color: var(--covered-dark);\n            }\n\n            code {\n                font-family: monospace;\n                font-size: 0.9rem;\n                background-color: rgba(0, 0, 0, 0.05);\n                padding: 2px 6px;\n                border-radius: 3px;\n            }\n\n            .code-container {\n                margin: 20px;\n                border: 1px solid var(--line-border);\n                border-radius: 5px;\n                overflow: hidden;\n            }\n\n            .line {\n                display: flex;\n                align-items: stretch;\n                padding: 0;\n                border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n                position: relative;\n            }\n\n            .line-number {\n                width: 3rem;\n                min-width: 3rem;\n                text-align: right;\n                color: var(--line-color);\n                user-select: none;\n                border-right: 1px solid var(--line-border);\n                background-color: var(--line-bg);\n                padding: 2px 10px;\n                display: flex;\n                align-items: center;\n                justify-content: flex-end;\n                font-family: monospace;\n                font-size: 0.9rem;\n                position: sticky;\n                left: 0;\n                z-index: 1;\n            }\n\n            .line pre {\n                margin: 0;\n                font-size: 0.9rem;\n                padding: 2px 10px;\n                flex-grow: 1;\n                overflow-x: auto;\n            }\n\n            .line .gas {\n                font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;\n                text-align: right;\n                color: var(--gas-color);\n                width: 60px;\n                min-width: 60px;\n                padding: 0 5px;\n                font-size: 0.85rem;\n                background-color: rgba(0, 0, 0, 0.03);\n                display: flex;\n                align-items: center;\n                justify-content: flex-end;\n            }\n\n            .line .hits {\n                font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;\n                text-align: center;\n                color: var(--hits-color);\n                width: 40px;\n                min-width: 40px;\n                font-size: 0.85rem;\n                background-color: rgba(0, 0, 0, 0.03);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n\n            .Covered {\n                background-color: var(--covered-bg);\n                position: relative;\n                overflow: hidden;\n            }\n\n            .Covered > pre::before {\n                content: \"\";\n                position: absolute;\n                top: 0;\n                right: 0;\n                bottom: 0;\n                width: var(--gas-percent, 0%);\n                background-color: rgba(107, 204, 107, 0.4);\n                z-index: 0;\n                transition: width 0.3s ease;\n                border-right: 1px dashed rgba(107, 204, 107, 0.8);\n            }\n\n            .Covered:hover::after {\n                content: attr(data-gas-percent);\n                position: absolute;\n                right: 5px;\n                top: 2px;\n                font-size: 0.75rem;\n                color: #555;\n                background-color: rgba(255, 255, 255, 0.8);\n                padding: 0 5px;\n                border-radius: 2px;\n                z-index: 2;\n            }\n\n            .line-number,\n            .gas,\n            .hits,\n            .line pre {\n                position: relative;\n                z-index: 1;\n            }\n\n            .Uncovered {\n                background-color: var(--uncovered-bg);\n            }\n\n            .Skipped {\n            }\n\n            a {\n                color: #0078d7;\n                text-decoration: none;\n            }\n\n            a:hover {\n                text-decoration: underline;\n            }\n\n            .options {\n                margin: 10px 20px;\n                padding: 5px 0;\n                border-bottom: 1px solid #eee;\n            }\n\n            .option-label {\n                display: inline-flex;\n                align-items: center;\n                cursor: pointer;\n                user-select: none;\n                margin-right: 20px;\n            }\n\n            .option-checkbox {\n                margin-right: 5px;\n            }\n\n            .option-text {\n                font-size: 0.9rem;\n                color: #666;\n            }\n\n            /* Total gas styles */\n            .gas-sum {\n                display: none;\n            }\n\n            .gas-detailed {\n                display: inline-block;\n            }\n\n            .show-total-gas .gas-sum {\n                display: inline-block;\n            }\n\n            .show-total-gas .gas-detailed {\n                display: none;\n            }\n        </style>\n        <script>\n            document.addEventListener(\"DOMContentLoaded\", function () {\n                const table = document.getElementById(\"instructionsTable\")\n                const headers = table.querySelectorAll(\"th.sortable\")\n\n                headers.forEach(header => {\n                    header.addEventListener(\"click\", function () {\n                        const column = this.dataset.column\n                        const isAsc = this.classList.contains(\"sort-asc\")\n\n                        // Remove sort classes from all headers\n                        headers.forEach(h => {\n                            h.classList.remove(\"sort-asc\", \"sort-desc\")\n                        })\n\n                        // Set sort class for clicked header\n                        this.classList.add(isAsc ? \"sort-desc\" : \"sort-asc\")\n\n                        // Get rows and sort\n                        const tbody = table.querySelector(\"tbody\")\n                        const rows = Array.from(tbody.querySelectorAll(\"tr\"))\n\n                        const sortedRows = rows.sort((a, b) => {\n                            const aValue = a.querySelector(\n                                `td[data-value]:nth-child(${getColumnIndex(column)})`,\n                            ).dataset.value\n                            const bValue = b.querySelector(\n                                `td[data-value]:nth-child(${getColumnIndex(column)})`,\n                            ).dataset.value\n\n                            // Check if values are numeric\n                            const aNum = !isNaN(aValue)\n                            const bNum = !isNaN(bValue)\n\n                            let comparison\n                            if (aNum && bNum) {\n                                comparison = parseFloat(aValue) - parseFloat(bValue)\n                            } else {\n                                comparison = aValue.localeCompare(bValue)\n                            }\n\n                            return isAsc ? comparison : -comparison\n                        })\n\n                        // Clear and append sorted rows\n                        while (tbody.firstChild) {\n                            tbody.removeChild(tbody.firstChild)\n                        }\n\n                        sortedRows.forEach(row => {\n                            tbody.appendChild(row)\n                        })\n                    })\n                })\n\n                function getColumnIndex(column) {\n                    const columns = {\n                        name: 1,\n                        gas: 2,\n                        hits: 3,\n                        avgGas: 4,\n                        percent: 5,\n                    }\n                    return columns[column]\n                }\n\n                document.getElementById(\"showTotalGas\").addEventListener(\"change\", function () {\n                    const codeContainer = document.querySelector(\".code-container\")\n                    if (this.checked) {\n                        codeContainer.classList.add(\"show-total-gas\")\n                    } else {\n                        codeContainer.classList.remove(\"show-total-gas\")\n                    }\n                })\n\n                const progressBar = document.getElementById(\"coverage-progress\")\n                const coveragePercentage = document\n                    .querySelector(\".stat-value\")\n                    .innerText.replace(\"%\", \"\")\n                if (progressBar && coveragePercentage) {\n                    progressBar.style.width = `${coveragePercentage}%`\n                }\n            })\n        </script>\n    </head>\n    <body>\n        {{SUMMARY_CONTENT}}\n\n        <div class=\"options\">\n            <label class=\"option-label\">\n                <input type=\"checkbox\" id=\"showTotalGas\" class=\"option-checkbox\" />\n                <span class=\"option-text\">Show total gas per line</span>\n            </label>\n        </div>\n\n        <div class=\"code-container\">{{CODE_CONTENT}}</div>\n    </body>\n</html>\n";
export declare const SUMMARY_TEMPLATE = "<div class=\"summary\">\n    <h1>Coverage Report</h1>\n    <div class=\"stats\">\n        <div class=\"stat-item\">\n            <span class=\"stat-label\">Coverage:</span>\n            <span class=\"stat-value\">{{coverage_percentage}}%</span>\n            <div class=\"progress-bar\">\n                <div class=\"progress\" id=\"coverage-progress\"></div>\n            </div>\n        </div>\n        <div class=\"stat-item\">\n            <span class=\"stat-label\">Lines:</span>\n            <span class=\"stat-value\">{{covered_lines}}/{{total_lines}}</span>\n        </div>\n        <div class=\"stat-item\">\n            <span class=\"stat-label\">Total Gas Used:</span>\n            <span class=\"stat-value\">{{total_gas}}</span>\n        </div>\n        <div class=\"stat-item\">\n            <span class=\"stat-label\">Instructions Executed:</span>\n            <span class=\"stat-value\">{{total_hits}}</span>\n        </div>\n    </div>\n    <div class=\"instructions-section\">\n        <details>\n            <summary>\n                <h2>Instruction Statistics <span class=\"toggle-icon\">\u25BC</span></h2>\n            </summary>\n            <div class=\"instructions-content\">\n                <table id=\"instructionsTable\">\n                    <thead>\n                        <tr>\n                            <th class=\"sortable\" data-column=\"name\">\n                                Instruction <span class=\"sort-icon\">\u2195</span>\n                            </th>\n                            <th class=\"sortable\" data-column=\"gas\">\n                                Total Gas <span class=\"sort-icon\">\u2195</span>\n                            </th>\n                            <th class=\"sortable\" data-column=\"hits\">\n                                Hits <span class=\"sort-icon\">\u2195</span>\n                            </th>\n                            <th class=\"sortable\" data-column=\"avgGas\">\n                                Avg Gas <span class=\"sort-icon\">\u2195</span>\n                            </th>\n                            <th class=\"sortable\" data-column=\"percent\">\n                                % of Total Gas <span class=\"sort-icon\">\u2195</span>\n                            </th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        {{instruction_rows}}\n                    </tbody>\n                </table>\n            </div>\n        </details>\n    </div>\n</div>";
//# sourceMappingURL=templates.d.ts.map