doctype html
html
  head
    title Archeometer
    meta charset="UTF-8"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    link rel="stylesheet" href="css/prism.css"
    link rel="stylesheet" href="css/datatables.min.css"
    link rel="stylesheet" href="css/theme.css" media="all"
    script src="js/prism.js"
    script src="js/datatables.min.js"
    script src="js/index.js"
  body
    section.report
      = if length(page_names) > 1 do
        - [main | pages] = page_names
        nav.sidemenu
          h3 Project
          ul
            li
              a.link href="#{main}.html" = main
          h3 Applications
          ul
            = Enum.map pages, fn page ->
              li
                a.link href="#{page}.html" = page
      main.report-container
        h1.title #{app_data.id}
        hr
        = Enum.map app_data.sections, fn section ->
          article.report-piece
            h2 = section.desc
            = Enum.map section.fragments, fn fragment ->
              div.query
                p = fragment.desc
                input type="checkbox" id=fragment.uuid
                elixir:
                  lang = case fragment.query_type do
                    :cql ->  "language-elixir"
                    :sql ->  "language-sql"
                    :elixir -> "language-elixir"
                    _ ->  "language-shell"
                  end
                = if fragment.query_type == :cql do
                  h3
                    label for=fragment.uuid
                      div.tab
                        button class="tablinks-#{fragment.uuid} active" onclick="openLang(event, 'CQL-#{fragment.uuid}', 'tabcontent-#{fragment.uuid}', 'tablinks-#{fragment.uuid}')" CQL
                        button class="tablinks-#{fragment.uuid}" onclick="openLang(event, 'SQL-#{fragment.uuid}', 'tabcontent-#{fragment.uuid}', 'tablinks-#{fragment.uuid}')" SQL
                      span ▼
                  div class="tabcontent-#{fragment.uuid} code-block" id="CQL-#{fragment.uuid}"
                    pre
                      code class=lang = fragment.code
                      textarea.code-snippet id="cql-code-#{fragment.uuid}" = fragment.code
                    button.copy-button id="button-cql-code-#{fragment.uuid}" onclick="copyCode('cql-code-#{fragment.uuid}')" onmouseout="outCopy('cql-code-#{fragment.uuid}')" copy
                  div class="tabcontent-#{fragment.uuid} disable code-block" id="SQL-#{fragment.uuid}"
                    pre
                      elixir:
                        lang = case fragment.alt_code_lang do
                          :cql ->  "language-elixir"
                          :sql ->  "language-sql"
                          _ ->  "language-shell"
                        end
                      code class=lang = fragment.alt_code
                      textarea.code-snippet id="alt-code-#{fragment.uuid}" = fragment.alt_code
                    button.copy-button id="button-alt-code-#{fragment.uuid}" onclick="copyCode('alt-code-#{fragment.uuid}')" onmouseout="outCopy('alt-code-#{fragment.uuid}')" copy
                - else
                  h3
                    label for=fragment.uuid
                      div.code-task Code
                      span ▼
                  div.code-block
                    pre
                      code class=lang = fragment.code
                      textarea.code-snippet id="shell-code-#{fragment.uuid}" = fragment.code
                    button.copy-button id="button-shell-code-#{fragment.uuid}" onclick="copyCode('shell-code-#{fragment.uuid}')" onmouseout="outCopy('shell-code-#{fragment.uuid}')" copy
              div.results
                h3 Results 📝
                = if fragment.result_type == :table do
                  table
                    thead
                      tr
                        = Enum.map fragment.result.headers, fn header ->
                          th = header
                    tbody
                      = Enum.map fragment.result.values, fn values ->
                        tr
                          = Enum.map values, fn value ->
                            td = value
                - else
                  = if fragment.result_type == :svg do
                    p Hover over the smaller rectanlgles to see the full information.
                    div.svg-container
                      object type="image/svg+xml" data=("img/" <> Path.basename(fragment.result))
                  - else
                    img.img-result src=("img/" <> Path.basename(fragment.result))