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(class="bg-white shadow mt-8 py-4")
      div(class="container mx-auto px-4 text-center")
        p(class="text-sm text-gray-600") This report is generated by jscpd, an open-source copy/paste detector.
        p(class="text-sm text-gray-600") jscpd is licensed under the MIT License.
        a(href="https://github.com/kucherenko/jscpd" class="text-blue-500 text-sm" target="_blank" rel="noopener noreferrer") View jscpd on GitHub

    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');
      }