!!!
%html
  %head
    %title
      = description.name + " - Machinery System Description"
    %link{:href => "assets/machinery-base.css", :rel => "stylesheet", :type => "text/css"}/
    %link{:href => "assets/machinery.css", :rel => "stylesheet", :type => "text/css"}/
    %script{:src => "assets/jquery-2.1.1.min.js"}
    %script{:src => "assets/hogan-3.0.2.min.mustache.js"}
    %script{:src => "assets/transition.js"}
    %script{:src => "assets/collapse.js"}

    %script#content{:type => "text/html"}
      {{>os}}
      {{>packages}}
      {{>patterns}}
      {{>users}}
      {{>groups}}
      {{>repositories}}
      {{>unmanaged_files}}
      {{>changed_managed_files}}
      {{>config_files}}
      {{>services}}

    %script#scope_os.partial{:type => "text/html"}
      {{#os}}
      %a.scope_anchor{:id => "os"}
      #os_container.scope
        .row
          .col-xs-1
            %a{:href => "#os"}
              %img.scope_logo_big{:src => "assets/logo-os.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Operating System", :"data-content"=>"#{scope_help('os')}"}/
            %span.toggle{:title => "Collapse/Expand"}
          .col-xs-11
            %h2
              Operating System
              .scope-summary
                {{meta_info.os}}
          .col-xs-1
          .col-xs-3.scope_content.collapse.in
            %table.table.table-striped.table-condensed
              %tr
                %th Name
                %td {{os.name}}
              %tr
                %th Version
                %td {{os.version}}
              %tr
                %th Architecture
                %td {{os.architecture}}
      {{/os}}

    %script#scope_packages.partial{:type => "text/html"}
      {{#packages.length}}
      %a.scope_anchor{:id => "packages"}
      #packages_container.scope
        .row
          .col-xs-1
            %a{:href => "#packages"}
              %img.scope_logo_big{:src => "assets/logo-packages.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Packages", :"data-content"=>"#{scope_help('packages')}"}/
            %span.toggle{:title => "Collapse/Expand"}
          .col-xs-11
            %h2
              Packages
              .scope-summary
                {{packages.length}} packages
                {{meta_info.packages}}
        .row.scope_content.collapse.in
          .col-xs-1
          .col-xs-11
            %table.table.table-striped.table-hover.table-condensed
              %thead
                %tr
                  %th Name
                  %th Version
                  %th Release
                  %th Arch
                  %th Vendor
                  %th Checksum
              %tbody
                {{#packages}}
                %tr
                  %td {{name}}
                  %td {{version}}
                  %td {{release}}
                  %td {{arch}}
                  %td {{vendor}}
                  %td {{checksum}}
                {{/packages}}
      {{/packages.length}}

    %script#scope_patterns.partial{:type => "text/html"}
      {{#patterns.length}}
      %a.scope_anchor{:id => "patterns"}
      #patterns_container.scope
        .row
          .col-xs-1
            %a{:href => "#patterns"}
              %img.scope_logo_big{:src => "assets/logo-patterns.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Patterns", :"data-content"=>"#{scope_help('patterns')}"}/
            %span.toggle{:title => "Collapse/Expand"}
          .col-xs-11
            %h2
              Patterns
              .scope-summary
                {{patterns.length}} patterns
                {{meta_info.patterns}}
        .row.scope_content.collapse.in
          .col-xs-1
          .col-xs-11
            %table.table.table-striped.table-hover.table-condensed
              %thead
                %tr
                  %th Name
                  %th Version
                  %th Release
              %tbody
                {{#patterns}}
                %tr
                  %td {{name}}
                  %td {{version}}
                  %td {{release}}
                {{/patterns}}
      {{/patterns.length}}

    %script#scope_users{:type => "text/html"}
      {{#users.length}}
      %a.scope_anchor{:id => "users"}
      #users_container.scope
        .row
          .col-xs-1
            %a{:href => "#users"}
              %img.scope_logo_big{:src => "assets/logo-users.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Users", :"data-content"=>"#{scope_help('users')}"}/
            %span.toggle{:title => "Collapse/Expand"}
          .col-xs-11
            %h2
              Users
              .scope-summary
                {{users.length}} users
                {{meta_info.users}}
        .row.scope_content.collapse.in
          .col-xs-1
          .col-xs-11
            %table.table.table-striped.table-hover.table-condensed
              %thead
                %tr
                  %th Name
                  %th UID
                  %th GID
                  %th Comment
                  %th Home
                  %th Shell
              %tbody
                {{#users}}
                %tr
                  %td {{name}}
                  %td {{uid}}
                  %td {{gid}}
                  %td {{comment}}
                  %td {{home}}
                  %td {{shell}}
                {{/users}}
      {{/users.length}}

    %script#scope_unmanaged_files.partial{:type => "text/html"}
      {{#unmanaged_files.files.length}}
      %a.scope_anchor{:id => "unmanaged_files"}
      #unmanaged_files_container.scope
        .row
          .col-xs-1
            %a{:href => "#unmanaged_files"}
              %img.scope_logo_big{:src => "assets/logo-unmanaged-files.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Unmanaged Files", :"data-content"=>"#{scope_help('unmanaged_files')}"}/
            %span.toggle{:title => "Collapse/Expand"}
          .col-xs-11
            %h2
              Unmanaged Files
              .scope-summary
                {{unmanaged_files.files.length}} files
                {{meta_info.unmanaged_files}}
        .row.scope_content.collapse.in
          .col-xs-1
          .col-xs-11
            %table.table.table-striped.table-hover.table-condensed.files-table
              %thead
                %tr
                  %th Name
                  %th Type
              %tbody
                {{#unmanaged_files.files}}
                %tr
                  %td {{name}}
                  %td {{type}}
                {{/unmanaged_files.files}}
      {{/unmanaged_files.files.length}}

    %script#scope_groups{:type => "text/html"}
      {{#groups.length}}
      %a.scope_anchor{:id => "groups"}
      #groups_container.scope
        .row
          .col-xs-1
            %a{:href => "#groups"}
              %img.scope_logo_big{:src => "assets/logo-groups.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Groups", :"data-content"=>"#{scope_help('groups')}"}/
            %span.toggle{:title => "Collapse/Expand"}
          .col-xs-11
            %h2
              Groups
              .scope-summary
                {{groups.length}} groups
                {{meta_info.groups}}
        .row.scope_content.collapse.in
          .col-xs-1
          .col-xs-11
            %table.table.table-striped.table-hover.table-condensed
              %thead
                %tr
                  %th Name
                  %th GID
                  %th Password
                  %th Users
              %tbody
                {{#groups}}
                %tr
                  %td {{name}}
                  %td {{gid}}
                  %td {{password}}
                  %td {{users}}
                {{/groups}}
      {{/groups.length}}

    %script#scope_repositories.partial{:type => "text/html"}
      {{#repositories.length}}
      %a.scope_anchor{:id => "repositories"}
      #repositories_container.scope
        .row
          .col-xs-1
            %a{:href => "#repositories"}
              %img.scope_logo_big{:src => "assets/logo-repositories.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Repositories", :"data-content"=>"#{scope_help('repositories')}"}/
            %span.toggle{:title => "Collapse/Expand"}
          .col-xs-11
            %h2
              Repositories
              .scope-summary
                {{repositories.length}} repositories
                {{meta_info.repositories}}
        .row.scope_content.collapse.in
          .col-xs-1
          .col-xs-11
            %table.table.table-striped.table-hover.table-condensed
              %thead
                %tr
                  %th Name
                  %th Alias
                  %th Type
                  %th URL
                  %th Enabled
                  %th Autorefresh
                  %th GPG Check
                  %th Priority
              %tbody
                {{#repositories}}
                %tr
                  %td {{name}}
                  %td {{alias}}
                  %td {{type}}
                  %td {{url}}
                  %td {{enabled}}
                  %td {{autorefresh}}
                  %td {{gpgcheck}}
                  %td {{priority}}
                {{/repositories}}
      {{/repositories.length}}

    %script#scope_changed_managed_files.partial{:type => "text/html"}
      {{#changed_managed_files.files.length}}
      %a.scope_anchor{:id => "changed_managed_files"}
      #changed_managed_files_container.scope
        .row
          .col-xs-1
            %a{:href => "#changed_managed_files"}
              %img.scope_logo_big{:src => "assets/logo-changed-managed-files.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Changed Managed Files", :"data-content"=>"#{scope_help('changed_managed_files')}"}/
            %span.toggle{:title => "Collapse/Expand"}
          .col-xs-11
            %h2
              Changed Managed Files
              .scope-summary
                {{changed_managed_files.files.length}} files
                {{meta_info.changed_managed_files}}
        .row.scope_content.collapse.in
          .col-xs-1
          .col-xs-11
            %table.table.table-striped.table-hover.table-condensed.files-table
              %thead
                %tr
                  %th Name
                  %th Package Name
                  %th Package Version
                  %th Changes
                  %th Mode
                  %th User
                  %th Group
              %tbody
                {{#changed_managed_files.files}}
                %tr
                  %td {{name}}
                  %td {{package_name}}
                  %td {{package_version}}
                  {{#changes.length}}
                  %td {{changes}}
                  {{/changes.length}}
                  {{#error_message}}
                  %td{:title => "{{error_message}}"} Error
                  {{/error_message}}
                  %td {{mode}}
                  %td {{user}}
                  %td {{group}}
                {{/changed_managed_files.files}}
        {{/changed_managed_files.files.length}}

    %script#scope_config_files.partial{:type => "text/html"}
      {{#config_files.files.length}}
      %a.scope_anchor{:id => "config_files"}
      #config_files_container.scope
        .row
          .col-xs-1
            %a{:href => "#config_files"}
              %img.scope_logo_big{:src => "assets/logo-config-files.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Config Files", :"data-content"=>"#{scope_help('config_files')}"}/
            %span.toggle{:title => "Collapse/Expand"}
          .col-xs-11
            %h2
              Config Files
              .scope-summary
                {{config_files.files.length}} files
                {{meta_info.config_files}}
        .row.scope_content.collapse.in

          {{#config_files.files}}
          {{#diff}}
          .diff{:style => "display: none", :"data-config-file-diff" => "{{file}}"}
            %span.diff-summary
              {{additions}} additions & {{deletions}} deletions
            %table.diff
              {{#lines}}
              %tr{:class => "{{type}}"}
                %td.active.linenumber {{original_line_number}}
                %td.linenumber {{new_line_number}}
                %td {{{content}}}
              {{/lines}}
          {{/diff}}
          {{/config_files.files}}
          .col-xs-1
          .col-xs-11
            %table.table.table-striped.table-hover.table-condensed.files-table
              %thead
                %tr
                  %th Name
                  %th Package Name
                  %th Package Version
                  %th Changes
                  %th Mode
                  %th User
                  %th Group
              %tbody
                {{#config_files.files}}
                %tr
                  {{#diff}}
                  %td
                    {{name}}
                    %a.diff-toggle{:"data-config-file" => "{{name}}", :"data-toggle" => "popover"}
                      Show diff
                  {{/diff}}
                  {{^diff}}
                  %td {{name}}
                  {{/diff}}
                  %td {{package_name}}
                  %td {{package_version}}
                  {{#changes.length}}
                  %td {{changes}}
                  {{/changes.length}}
                  {{#error_message}}
                  %td{:title => "{{error_message}}"} Error
                  {{/error_message}}
                  %td {{mode}}
                  %td {{user}}
                  %td {{group}}
                {{/config_files.files}}
        {{/config_files.files.length}}

    %script#scope_services.partial{:type => "text/html"}
      {{#services.services.length}}
      %a.scope_anchor{:id => "services"}
      #services_container.scope
        .row
          .col-xs-1
            %a{:href => "#services"}
              %img.scope_logo_big{:src => "assets/logo-services.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Services", :"data-content"=>"#{scope_help('services')}"}/
            %span.toggle{:title => "Collapse/Expand"}
          .col-xs-11
            %h2
              Services
              .scope-summary
                Init System: {{services.init_system}},
                {{services.services.length}} services
                {{meta_info.services}}
        .row.scope_content.collapse.in
          .col-xs-1
          .col-xs-11
            %table.table.table-striped.table-hover.table-condensed
              %thead
                %tr
                  %th Name
                  %th State
              %tbody
                {{#services.services}}
                %tr
                  %td {{name}}
                  %td {{state}}
                {{/services.services}}
      {{/services.services.length}}

    %script{:src => "assets/description.js"}
    %script{:src => "assets/machinery.js"}
    %script{:src => "assets/bootstrap-tooltip.js"}
    %script{:src => "assets/bootstrap-popover.js"}

  %body
    .container-fluid
      #nav-bar
        .row
          .col-xs-1
          .col-xs-10
            %h1
              System '#{description.name}'
              %span.scope-navigation
                Scopes:
                %a{:href => "#os", :title => "Operating System"}
                  %img{:src => "assets/logo-os-small.png"}/
                %a{:href => "#packages", :title => "Packages"}
                  %img{:src => "assets/logo-packages-small.png"}/
                %a{:href => "#patterns", :title => "Patterns"}
                  %img{:src => "assets/logo-patterns-small.png"}/
                %a{:href => "#users", :title => "Users"}
                  %img{:src => "assets/logo-users-small.png"}/
                %a{:href => "#groups", :title => "Groups"}
                  %img{:src => "assets/logo-groups-small.png"}/
                %a{:href => "#repositories", :title => "Repositories"}
                  %img{:src => "assets/logo-repositories-small.png"}/
                %a{:href => "#unmanaged_files", :title => "Unmanaged Files"}
                  %img{:src => "assets/logo-unmanaged-files-small.png"}/
                %a{:href => "#changed_managed_files", :title => "Changed Managed Files"}
                  %img{:src => "assets/logo-changed-managed-files-small.png"}/
                %a{:href => "#config_files", :title => "Config Files"}
                  %img{:src => "assets/logo-config-files-small.png"}/
                %a{:href => "#services", :title => "Services"}
                  %img{:src => "assets/logo-services-small.png"}/
        .row
          .col-xs-1
            %a#expand-all{:style => "display: none"}
              Expand all
            %a#collapse-all
              Collapse all
          .col-xs-10
            %small.pull-right.pad-top
              created by
              %a{:href => "http://machinery-project.org", :target => "_blank"}
                Machinery
            .filter-input
              %input#filter{:placeholder => "Type To Filter"}/
      #content_container