doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    title Copy/Paste Detector Report
    link(href="styles/tailwind.css" rel="stylesheet")
    link(href="styles/prism.css" rel="stylesheet")
  body(class="bg-gray-100")
    header(class="bg-white shadow py-4")
      div(class="container mx-auto px-4")
        h1(class="text-3xl font-semibold text-gray-800") jscpd - copy/paste report

    main(class="container mx-auto my-8 p-4 bg-white shadow rounded")
      section(id="dashboard" class="mb-8")
        h2(class="text-2xl font-semibold text-gray-700 mb-4") Dashboard
        div(class="grid grid-cols-4 gap-4")
          div(class="bg-blue-200 p-4 rounded text-center")
            h3(class="text-lg font-semibold text-blue-800 mb-2") Total Files
            span(class="text-4xl font-bold text-blue-800") #{statistics.total.sources}
          div(class="bg-green-200 p-4 rounded text-center")
            h3(class="text-lg font-semibold text-green-800 mb-2") Total Lines of Code
            span(class="text-4xl font-bold text-green-800") #{statistics.total.lines}
          div(class="bg-yellow-200 p-4 rounded text-center")
            h3(class="text-lg font-semibold text-yellow-800 mb-2") Number of Clones
            span(class="text-4xl font-bold text-yellow-800") #{statistics.total.clones}
          div(class="bg-red-200 p-4 rounded text-center")
            h3(class="text-lg font-semibold text-red-800 mb-2") Duplicated Lines
            span(class="text-4xl font-bold text-red-800") #{statistics.total.duplicatedLines} (#{(100 * statistics.total.duplicatedLines / statistics.total.lines).toFixed(2)}%)

      section(id="formats" class="mb-8")
        h2(class="text-2xl font-semibold text-gray-700 mb-4") Formats with Duplications
        table(class="w-full table-auto")
          thead
            tr(class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal")
              th(class="py-3 px-6 text-left") Format
              th(class="py-3 px-6 text-left") Files
              th(class="py-3 px-6 text-left") Lines
              th(class="py-3 px-6 text-left") Clones
              th(class="py-3 px-6 text-left") Duplicated Lines
              th(class="py-3 px-6 text-left") Duplicated Tokens
          tbody
            each format, name in statistics.formats
              tr(class="bg-white border-b border-gray-200 text-gray-800 text-sm")
                td(class="py-3 px-6")
                  a(href="#" + name + "-clones" class="text-blue-600 hover:underline") #{name}
                td(class="py-3 px-6") #{format.total.sources}
                td(class="py-3 px-6") #{format.total.lines}
                td(class="py-3 px-6") #{format.total.clones}
                td(class="py-3 px-6") #{format.total.duplicatedLines}
                td(class="py-3 px-6") #{format.total.duplicatedTokens}

      section(id="txt-clones" class="mb-8")
        each format, name in statistics.formats
          a(name=name + "-clones")
          h2(class="text-2xl font-semibold text-gray-700 mb-4") #{name}
          div(class="divide-y divide-gray-200 border-b-2")
            each clone, index in duplicates
              if name===clone.format
                div(class="py-4")
                  p(class="text-gray-600") #{clone.firstFile.name} (Line #{clone.firstFile.startLoc.line}:#{clone.firstFile.startLoc.column} - Line #{clone.firstFile.endLoc.line}:#{clone.firstFile.endLoc.column}), #{clone.secondFile.name} (Line #{clone.secondFile.startLoc.line}:#{clone.secondFile.startLoc.column} - Line #{clone.secondFile.endLoc.line}:#{clone.secondFile.endLoc.column})
                  button(class="bg-gray-500 text-white px-1 py-0.5 text-xs rounded focus:outline-none ml-2" id="expandBtn" + index onclick="toggleCodeBlock('cloneGroup"+index+"', 'expandBtn" + index + "', 'collapseBtn" +index+ "')") Show code
                  button(class="bg-gray-500 text-white px-1 py-0.5 text-xs rounded focus:outline-none ml-2 hidden" id="collapseBtn" + index  onclick="toggleCodeBlock('cloneGroup"+index+"', 'expandBtn" + index + "', 'collapseBtn" +index+ "')") Hide code
                  pre(class="bg-gray-100 border border-gray-200 p-4 rounded mt-2 hidden" id="cloneGroup" + index)
                    code(class="language-" + name + " text-sm text-gray-800") #{clone.fragment}

            // Add more clone groups for .txt format as needed         // Add more clone groups for .txt format as needed

      // Add more sections for other formats and clone groups as needed
    footer(style="margin-top: 60px; padding: 30px 0; border-top: 1px solid #e0e0e0; text-align: center; font-family: -apple-system, sans-serif; color: #666;")
      p(style="margin: 8px 0; font-size: 14px;")
        | Generated by&#32;
        a(href="https://jscpd.dev" target="_blank" style="color: #0066cc;") jscpd
        | &#32;v#{version}&#32;by&#32;
        a(href="https://github.com/kucherenko" target="_blank" style="color: #0066cc;") Andrey Kucherenko
      p(style="margin: 8px 0; font-size: 14px;")
        | 🎩 Building AI agents that don't drift? Try&#32;
        a(href="https://gangsta.page" target="_blank" style="color: #0066cc; font-weight: 600;") Gangsta Agents
        | &#32;— spec-driven discipline for Claude Code, Cursor, Copilot
      p(style="margin: 8px 0; font-size: 12px; color: #999; text-align: center;")
        a(href="https://www.npmjs.com/package/jscpd" target="_blank")
          img(src="https://img.shields.io/npm/dw/jscpd.svg?style=flat-square" alt="npm weekly downloads" style="display: inline; vertical-align: middle;")
        | &#32;· Since 2013 ·&#32;
        a(href="https://opencollective.com/jscpd" target="_blank" style="color: #999;") Sponsor jscpd 💖

    script(src="js/prism.js")
    script.
      function toggleCodeBlock(codeBlockId, expandBtnId, collapseBtnId) {
        const codeBlock = document.getElementById(codeBlockId);
        const expandBtn = document.getElementById(expandBtnId);
        const collapseBtn = document.getElementById(collapseBtnId);

        codeBlock.classList.toggle('hidden');
        expandBtn.classList.toggle('hidden');
        collapseBtn.classList.toggle('hidden');
      }
