!!!
%html
  %head
    %title
      Snuffle
    %link{href: "http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css", rel: "stylesheet"}
    %script{language: "javascript", src: "http://code.jquery.com/jquery-1.11.0.min.js", type: "text/javascript"}
    %script{language: "javascript", src: "http://code.jquery.com/jquery-migrate-1.2.1.min.js", type: "text/javascript"}
    %script{language: "javascript", src: "http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js", type: "text/javascript"}

    :css
      #{Rouge::Theme.find('thankful_eyes').render(scope: '.highlight')}
      a:link, a:visited { color: #fff }
      body { line-height: 1.5em; background: #49525a; color: #fff; font-family: arial, sans-serif; font-size: 14px; padding: 2em; }
      div.column { float: left; width: 45%; }
      div.file_listing { padding: .1em; border-radius: 5px; background: #000; width: 100%; border: 1px solid #000;}
      div.file_meta { padding: 1em; border-radius: 5px; background: #440013; width: 98%; border: .5em solid #000;}
      div.dataTables_filter { margin-bottom: 2em !important; }
      div.dataTables_filter label { color: #fff; }
      div.dataTables_paginate { display: none !important; }
      div.dataTables_info { display: none !important; }
      h1 { color:#fff; font-size: 1.25em; margin-top: .25em; }
      h2 { color:#fff; font-size: .75em; margin-top: -1em; }
      h3 { color:#fff; font-size: 1.1em;margin-top: 1em; }
      h3.highlighted { background: rgba(170, 161, 57, .6); border-radius: 100px; padding: .25em; padding-left: 1em; color: #000;}
      h3.highlighted-method { background: rgba(153, 51, 80, .6); border-radius: 100px; padding-left: 1em; }
      li { margin-bottom: 1em;}
      pre { line-height: 1.75em;}
      pre.lineno { margin-top: -1.4em !important;}
      span.highlighted { padding-left: 1em; display: inline-block; position: absolute; left: 0px; padding-right: 90%}
      table { width: 100%; box-shadow: 0 5px 0 rgba(0,0,0,.8); border-spacing: 0; border: 5px solid #000; border-radius: 5px; border-collapse: collapse; min-width: 50%; }
      th { background: #000; text-align: left; padding: .5em; }
      td { text-align: left; padding: .5em; padding-left: 1.25em !important;}
      td.center { text-align: center; }
      td.sorting_1 { background: none !important; padding-left: 1.25em !important; }
      th.sorting { background-position: left !important; border-right: 1px solid #222; text-transform: uppercase !important; font-size: .8em !important; font-weight: normal; background-color: #000 !important;}
      tr.faint td { opacity: 0.5; font-style: italic; }
      tr.header th:first-child { border-radius: 6px 0 0 0; }
      tr.header th:last-child { border-radius: 0 6px 0 0; }
      tr.header th:only-child { border-radius: 6px 6px 0 0; }
      th.sorting_asc, th.sorting_desc { text-transform: uppercase !important; font-size: .8em !important; font-weight: bold; background-image: none !important; background: rgba(64, 41, 41, .5) !important;}
      tr.even { background: rgba(128, 128, 128, 0.5) !important;}
      tr.odd { background: rgba(128, 128, 128, 0.25) !important}
      tr.even:hover, tr.odd:hover { background: rgba(128, 128, 128, 0.75) !important;}
      .center { text-align: center; }
      .clear { clear: both; }
      .highlighted { background: rgba(170, 161, 57, .6); border-radius: 100px; }
      .highlighted-method { background: rgba(153, 51, 80, .6); padding: .25em; border-radius: 100px; color: #fff; }
      .indented {margin-left: 1em; }
      .summary {padding: 1em; border-radius: 5px; background: rgb(41, 80, 109); width: 98%; border: .5em solid #000;}
      .btn {
        -webkit-border-radius: 28;
        -moz-border-radius: 28;
        border: none;
        border-radius: 28px;
        color: #ffffff;
        background: #7d99af;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
      }

      .btn:hover {
        background: #4c708c;
        border: none;
        text-decoration: none;
      }


  %body

    .file_meta
      %h1
        Snuffle Analysis
      %h2
        = start_path

    %br.clear

    %table{class: "output-table"}

      %thead
        %tr
          %th
            File
          %th
            Host Module/Class
          %th
            Data Clumps
          %th
            Latent Objects
      %tbody
        - summaries.each_with_index do |summary, i|
          %tr{class: "#{i % 2 == 1 ? 'odd' : 'even'} #{summary.has_results? ? '' : 'faint'}"}
            %td
              - if summary.has_results?
                %a{href: "source/#{summary.path_to_results}/#{summary.filename}.htm"}
                  = summary.path_to_file
              - else
                = summary.path_to_file

            %td
              - if summary.class_name.size > 30
                = "..."
                = summary.class_name[-29..-1]
              - else
                = summary.class_name
            %td
              = summary.cohorts.count
            %td
              = summary.latent_objects.count

    %br.clear

    %p.center
      %em
        Analyzed on
        = date
        at
        = time
        by
        %a{href: "https://gitlab.com/coraline/snuffle", target: "_new"}
          Snuffle

    :javascript
      $(document).ready(function(){
        $('.output-table').dataTable({
          bLengthChange: false,
          iDisplayLength: 25000,
          "order": [[2, "desc"]]
        });
      });