!!!
- description_a = diff[:meta][:description_a]
- description_b = diff[:meta][:description_b]
%html{"ng-app" => "machinery-compare"}
  %head
    %title
      Machinery System Description Comparison
    %meta{:charset => 'utf-8'}/
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1"}
    %link{:href => "assets/machinery-base.css", :rel => "stylesheet", :type => "text/css"}/
    %link{:href => "assets/machinery.css", :rel => "stylesheet", :type => "text/css"}/
    %script{:src => "assets/angular.min.js"}
    %script{:src => "assets/compare/machinery-compare.js"}
    %script{:src => "assets/jquery-2.1.1.min.js"}
    %script{:src => "assets/transition.js"}
    %script{:src => "assets/collapse.js"}

    %script#scope_os_partial{:type => "text/ng-template"}
      %table.table.table-striped.table-condensed
        %tr
          %th Name
          %td {{object.name}}
        %tr
          %th Version
          %td {{object.version}}
        %tr
          %th Architecture
          %td {{object.architecture}}

    %script#scope_os.partial{:type => "text/ng-template"}
      %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
        .row.scope_content.collapse.in
          .row
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.os[0]"}
              %only-in-a
              %render-template{:template => "scope_os_partial", :object => "diff.os[0]"}
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.os[1]"}
              %only-in-b
              %render-template{:template => "scope_os_partial", :object => "diff.os[1]"}
          .row
            .col-xs-1
            .col-xs-11{"ng-show" => "diff.os[2]"}
              %in-both
              %render-template{:template => "scope_os_partial", :object => "diff.os[2]"}

    %script#scope_packages_partial{:type => "text/ng-template"}
      %table.table.table-striped.table-hover.table-condensed
        %thead
          %tr
            %th Name
            %th.small Version
            %th.small.visible-md.visible-lg Release
            %th.small.visible-md.visible-lg Arch
            %th.visible-lg Vendor
            %th.visible-lg Checksum
            %th.tiny.hidden-lg
        %tbody
          %tr{"ng-repeat" => "package in object"}
            %td {{package.name}}
            %td {{package.version}}
            %td.visible-md.visible-lg {{package.release}}
            %td.visible-md.visible-lg {{package.arch}}
            %td.visible-lg {{package.vendor}}
            %td.visible-lg {{package.checksum}}
            %td.hidden-lg{:title => "Name: {{package.name}}\nVersion: {{package.version}}\nRelease: {{package.release}}\n" |
               "Architecture: {{package.arch}}\nVendor: {{package.vendor}}\nChecksum: {{package.checksum}}"} ... |

    %script#scope_packages.partial{:type => "text/ng-template"}
      %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
                %span.summary-part{"ng-show" => "diff.packages[0]"}
                  {{diff.meta.description_a}}: {{diff.packages[0].length}} packages
                %span.summary-part{"ng-show" => "diff.packages[1]"}
                  {{diff.meta.description_b}}: {{diff.packages[1].length}} packages
                %span.summary-part{"ng-show" => "diff.packages[2]"}
                  %a{href: "#packages_both"}
                    both
                  = ": {{diff.packages[2].length}} packages"
        .row.scope_content.collapse.in
          .row
            .col-xs-1
            .col-xs-5.table_container{"ng-show" => "diff.packages[0]"}
              %only-in-a
              %render-template{:template => "scope_packages_partial", :object => "diff.packages[0]"}
            .col-xs-1
            .col-xs-5.table_container{"ng-show" => "diff.packages[1]"}
              %only-in-b
              %render-template{:template => "scope_packages_partial", :object => "diff.packages[1]"}
          %a.both_anchor{id: "packages_both"}
          .row{"ng-show" => "diff.packages[2]"}
            .col-xs-1
            .col-xs-11.table_container
              %in-both
              %render-template{:template => "scope_packages_partial", :object => "diff.packages[2]"}

    %script#scope_patterns_partial{:type => "text/ng-template"}
      %table.table.table-striped.table-hover.table-condensed
        %thead
          %tr
            %th Name
            %th Version
            %th Release
        %tbody
          %tr{"ng-repeat" => "pattern in object"}
            %td {{pattern.name}}
            %td {{pattern.version}}
            %td {{pattern.release}}

    %script#scope_patterns.partial{:type => "text/ng-template"}
      %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
                %span.summary-part{"ng-show" => "diff.patterns[0]"}
                  {{diff.meta.description_a}}: {{diff.patterns[0].length}} patterns
                %span.summary-part{"ng-show" => "diff.patterns[1]"}
                  {{diff.meta.description_b}}: {{diff.patterns[1].length}} patterns
                %span.summary-part{"ng-show" => "diff.patterns[2]"}
                  %a{href: "#patterns_both"}
                    both
                  = ": {{diff.patterns[2].length}} patterns"
        .row.scope_content.collapse.in
          .row
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.patterns[0]"}
              %only-in-a
              %render-template{:template => "scope_patterns_partial", :object => "diff.patterns[0]"}
            .col-xs-5{"ng-show" => "diff.patterns[1]"}
              %only-in-b
              %render-template{:template => "scope_patterns_partial", :object => "diff.patterns[1]"}
          %a.both_anchor{id: "patterns_both"}
          .row{"ng-show" => "diff.patterns[2]"}
            .col-xs-1
            .col-xs-11
              %in-both
              %render-template{:template => "scope_patterns_partial", :object => "diff.patterns[2]"}



    %script#scope_users_partial{:type => "text/ng-template"}
      %table.table.table-striped.table-hover.table-condensed
        %thead
          %tr
            %th Name
            %th.small UID
            %th.small GID
            %th Comment
            %th Home
            %th.small Shell
        %tbody
          %tr{"ng-repeat" => "user in object"}
            %td {{user.name}}
            %td {{user.uid}}
            %td {{user.gid}}
            %td {{user.comment}}
            %td {{user.home}}
            %td {{user.shell}}
    %script#scope_users{:type => "text/ng-template"}
      %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
                %span.summary-part{"ng-show" => "diff.users[0]"}
                  {{diff.meta.description_a}}: {{diff.users[0].length}} users
                %span.summary-part{"ng-show" => "diff.users[1]"}
                  {{diff.meta.description_b}}: {{diff.users[1].length}} users
                %span.summary-part{"ng-show" => "diff.users[2]"}
                  %a{href: "#users_both"}
                    both
                  = ": {{diff.users[2].length}} users"
        .row.scope_content.collapse.in
          .row
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.users[0]"}
              %only-in-a
              %render-template{:template => "scope_users_partial", :object => "diff.users[0]"}
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.users[1]"}
              %only-in-b
              %render-template{:template => "scope_users_partial", :object => "diff.users[1]"}
          %a.both_anchor{id: "users_both"}
          .row{"ng-show" => "diff.users[2]"}
            .col-xs-1
            .col-xs-11
              %in-both
              %render-template{:template => "scope_users_partial", :object => "diff.users[2]"}

    %script#scope_unmanaged_files_partial{:type => "text/ng-template"}
      %p
        <strong>Files extracted:</strong> {{object.extracted}}
      %table.table.table-striped.table-hover.table-condensed.files-table{{"ng-show" => "object.files"}}
        %thead
          %tr
            %th Name
            %th Type
        %tbody
          %tr{"ng-repeat" => "file in object.files"}
            %td {{file.name}}
            %td {{file.type}}
    %script#scope_unmanaged_files.partial{:type => "text/ng-template"}
      %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
                %span.summary-part{"ng-show" => "diff.unmanaged_files[0]"}
                  {{diff.meta.description_a}}: {{diff.unmanaged_files[0].files.length || 0}} files
                %span.summary-part{"ng-show" => "diff.unmanaged_files[1]"}
                  {{diff.meta.description_b}}: {{diff.unmanaged_files[1].files.length || 0}} files
                %span.summary-part{"ng-show" => "diff.unmanaged_files[2]"}
                  %a{href: "#unmanaged_files_both"}
                    both
                  = ": {{diff.unmanaged_files[2].files.length}} files"
        .row.scope_content.collapse.in
          .row
            .col-xs-1
            .col-xs-5
              %only-in-a
              %render-template{:template => "scope_unmanaged_files_partial", :object => "diff.unmanaged_files[0]"}
            .col-xs-1
            .col-xs-5
              %only-in-b
              %render-template{:template => "scope_unmanaged_files_partial", :object => "diff.unmanaged_files[1]"}
          %a.both_anchor{id: "unmanaged_files_both"}
          .row
            .col-xs-1
            .col-xs-11
              %in-both
              %render-template{:template => "scope_unmanaged_files_partial", :object => "diff.unmanaged_files[2]"}

    %script#scope_groups_partial{:type => "text/ng-template"}
      %table.table.table-striped.table-hover.table-condensed
        %thead
          %tr
            %th Name
            %th GID
            %th Password
            %th Users
        %tbody
          %tr{"ng-repeat" => "group in object"}
            %td {{group.name}}
            %td {{group.gid}}
            %td {{group.password}}
            %td {{group.users.join(",")}}
    %script#scope_groups{:type => "text/ng-template"}
      %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
                %span.summary-part{"ng-show" => "diff.groups[0]"}
                  {{diff.meta.description_a}}: {{diff.groups[0].length}} groups
                %span.summary-part{"ng-show" => "diff.groups[1]"}
                  {{diff.meta.description_b}}: {{diff.groups[1].length}} groups
                %span.summary-part{"ng-show" => "diff.groups[2]"}
                  %a{href: "#groups_both"}
                    both
                  = ": {{diff.groups[2].length}} groups"
        .row.scope_content.collapse.in
          .row
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.groups[0]"}
              %only-in-a
              %render-template{:template => "scope_groups_partial", :object => "diff.groups[0]"}
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.groups[1]"}
              %only-in-b
              %render-template{:template => "scope_groups_partial", :object => "diff.groups[1]"}
          %a.both_anchor{id: "groups_both"}
          .row{"ng-show" => "diff.groups[2]"}
            .col-xs-1
            .col-xs-11
              %in-both
              %render-template{:template => "scope_groups_partial", :object => "diff.groups[2]"}

    %script#scope_repositories_partial{:type => "text/ng-template"}
      %table.table.table-striped.table-hover.table-condensed
        %thead
          %tr
            %th Name
            %th Alias
            %th URL
            %th.small Type
            %th.small Enabled
            %th.small.visible-lg Autorefresh
            %th.small.visible-lg GPG Check
            %th.small.visible-lg Priority
            %th.tiny.hidden-lg
        %tbody
          %tr{"ng-repeat" => "repo in object"}
            %td {{repo.name}}
            %td {{repo.alias}}
            %td
              %a{:href => "{{repo.url}}" } {{repo.url}}
            %td {{repo.type}}
            %td {{repo.enabled}}
            %td.visible-lg {{repo.autorefresh}}
            %td.visible-lg {{repo.gpgcheck}}
            %td.visible-lg {{repo.priority}}
            %td.hidden-lg{:title => "Name: {{repo.name}}\nAlias: {{repo.alias}}\nUrl: {{repo.url}}\n" |
               "Type: {{repo.type}}\nEnabled: {{repo.enabled}}\nAutorefresh: {{repo.autorefresh}}\n" |
               "GPG Check: {{repo.gpgcheck}}\nPriority: {{repo.priority}}"} ... |
    %script#scope_repositories.partial{:type => "text/ng-template"}
      %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
                %span.summary-part{"ng-show" => "diff.repositories[0]"}
                  {{diff.meta.description_a}}: {{diff.repositories[0].length}} repos
                %span.summary-part{"ng-show" => "diff.repositories[1]"}
                  {{diff.meta.description_b}}: {{diff.repositories[1].length}} repos
                %span.summary-part{"ng-show" => "diff.repositories[2]"}
                  %a{href: "#repositories_both"}
                    both
                  = ": {{diff.repositories[2].length}} repos"
        .row.scope_content.collapse.in
          .row
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.repositories[0]"}
              %only-in-a
              %render-template{:template => "scope_repositories_partial", :object => "diff.repositories[0]"}
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.repositories[1]"}
              %only-in-b
              %render-template{:template => "scope_repositories_partial", :object => "diff.repositories[1]"}
          %a.both_anchor{id: "repositories_both"}
          .row{"ng-show" => "diff.repositories[2]"}
            .col-xs-1
            .col-xs-11
              %in-both
              %render-template{:template => "scope_repositories_partial", :object => "diff.repositories[2]"}

    %script#scope_changed_managed_files_partial{:type => "text/ng-template"}
      %p
        <strong>Files extracted:</strong> {{object.extracted}}
      %table.table.table-striped.table-hover.table-condensed.files-table{{"ng-show" => "object.files"}}
        %thead
          %tr
            %th Name
            %th Package Name
            %th Package Version
            %th.small Changes
            %th.small Mode
            %th.small User
            %th.small Group
        %tbody
          %tr{"ng-repeat" => "file in object.files"}
            %td {{file.name}}
            %td {{file.package_name}}
            %td {{file.package_version}}
            %td {{file.changes.join(",")}}
            %span{"ng-show" => "file.error_message", :title => "{{file.error_message}}"} (details)
            %td {{file.mode}}
            %td {{file.user}}
            %td {{file.group}}
    %script#scope_changed_managed_files.partial{:type => "text/ng-template"}
      %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
                %span.summary-part{"ng-show" => "diff.changed_managed_files[0]"}
                  {{diff.meta.description_a}}: {{diff.changed_managed_files[0].files.length || 0}} files
                %span.summary-part{"ng-show" => "diff.changed_managed_files[1]"}
                  {{diff.meta.description_b}}: {{diff.changed_managed_files[1].files.length || 0}} files
                %span.summary-part{"ng-show" => "diff.changed_managed_files[2]"}
                  %a{href: "#changed_managed_files_both"}
                    both
                  = ": {{diff.changed_managed_files[2].files.length}} files"
        .row.scope_content.collapse.in
          .row
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.changed_managed_files[0]"}
              %only-in-a
              %render-template{:template => "scope_changed_managed_files_partial", :object => "diff.changed_managed_files[0]"}
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.changed_managed_files[1]"}
              %only-in-b
              %render-template{:template => "scope_changed_managed_files_partial", :object => "diff.changed_managed_files[1]"}
          %a.both_anchor{id: "changed_managed_files_both"}
          .row{"ng-show" => "diff.changed_managed_files[2]"}
            .col-xs-1
            .col-xs-11
              %in-both
              %render-template{:template => "scope_changed_managed_files_partial", :object => "diff.changed_managed_files[2]"}

    %script#scope_config_files_partial{:type => "text/ng-template"}
      %p
        <strong>Files extracted:</strong> {{object.extracted}}
      %table.table.table-striped.table-hover.table-condensed.files-table{{"ng-show" => "object.files"}}
        %thead
          %tr
            %th Name
            %th Package Name
            %th Package Version
            %th Changes
            %th Mode
            %th User
            %th Group
        %tbody
          %tr{"ng-repeat" => "file in object.files"}
            %td {{file.name}}
            %td {{file.package_name}}
            %td {{file.package_version}}
            %td
              {{file.changes.join(",")}}
              %span{"ng-show" => "file.error_message", :title => "{{file.error_message}}"} (details)
            %td {{file.mode}}
            %td {{file.user}}
            %td {{file.group}}

    %script#scope_config_files.partial{:type => "text/ng-template"}
      %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
                %span.summary-part{"ng-show" => "diff.config_files[0]"}
                  {{diff.meta.description_a}}: {{diff.config_files[0].files.length || 0}} files
                %span.summary-part{"ng-show" => "diff.config_files[1]"}
                  {{diff.meta.description_b}}: {{diff.config_files[1].files.length || 0}} files
                %span.summary-part{"ng-show" => "diff.config_files[2]"}
                  %a{href: "#config_files_both"}
                    both
                  = ": {{diff.config_files[2].files.length}} files"
        .row.scope_content.collapse.in
          .row
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.config_files[0]"}
              %only-in-a
              %render-template{:template => "scope_config_files_partial", :object => "diff.config_files[0]"}
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.config_files[1]"}
              %only-in-b
              %render-template{:template => "scope_config_files_partial", :object => "diff.config_files[1]"}
          %a.both_anchor{id: "config_files_both"}
          .row{"ng-show" => "diff.config_files[2]"}
            .col-xs-1
            .col-xs-11
              %in-both
                %render-template{:template => "scope_config_files_partial", :object => "diff.config_files[2]"}

    %script#scope_services_partial{:type => "text/ng-template"}
      %table.table.table-striped.table-hover.table-condensed
        %thead
          %tr
            %th Name
            %th State
        %tbody
          %tr{"ng-repeat" => "service in object.services"}
            %td {{service.name}}
            %td{:class=>"{{object.init_system}}_{{service.state}}"}
              {{service.state}}
    %script#scope_services.partial{:type => "text/ng-template"}
      %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
                %span.summary-part{"ng-show" => "diff.services[0]"}
                  {{diff.meta.description_a}}: {{diff.services[0].services.length || 0}} services ({{diff.services[0].init_system}})
                %span.summary-part{"ng-show" => "diff.services[1]"}
                  {{diff.meta.description_b}}: {{diff.services[1].services.length || 0}} services ({{diff.services[1].init_system}})
                %span.summary-part{"ng-show" => "diff.services[2]"}
                  %a{href: "#services_both"}
                    both
                  = ": {{diff.services[2].services.length}} services ({{diff.services[2].init_system}})"
        .row.scope_content.collapse.in
          .row
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.services[0]"}
              %only-in-a
              %render-template{:template => "scope_services_partial", :object => "diff.services[0]"}
            .col-xs-1
            .col-xs-5{"ng-show" => "diff.services[1]"}
              %only-in-b
              %render-template{:template => "scope_services_partial", :object => "diff.services[1]"}
          %a.both_anchor{id: "services_both"}
          .row{"ng-show" => "diff.services[2]"}
            .col-xs-1
            .col-xs-11
              %in-both
              %render-template{:template => "scope_services_partial", :object => "diff.services[2]"}

    %script{:src => "assets/diff.js"}
    %script{:src => "assets/compare/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
              Comparing '#{description_a}' with '#{description_b}'
            %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{:href => "#", :style => "display: none"}
              Expand all
            %a#collapse-all{:href => "#"}
              Collapse all
          .col-xs-10
            %small.pull-right.pad-top
              created by
              %a{:href => "http://machinery-project.org", :target => "_blank"}
                Machinery

      #content_container{"ng-controller" => "compareController"}
        %div{"src" => "'scope_os'", "ng-include" => true}
        %div{"src" => "'scope_packages'", "ng-include" => true}
        %div{"src" => "'scope_patterns'", "ng-include" => true}
        %div{"src" => "'scope_users'", "ng-include" => true}
        %div{"src" => "'scope_groups'", "ng-include" => true}
        %div{"src" => "'scope_repositories'", "ng-include" => true}
        %div{"src" => "'scope_unmanaged_files'", "ng-include" => true}
        %div{"src" => "'scope_changed_managed_files'", "ng-include" => true}
        %div{"src" => "'scope_config_files'", "ng-include" => true}
        %div{"src" => "'scope_services'", "ng-include" => true}