!!!
%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/jquery-2.1.1.min.js"}
    %script{:src => "/assets/transition.js"}
    %script{:src => "/assets/collapse.js"}
    %script{:src => "/assets/modal.js"}

    %style
      = Diffy::CSS

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

  %body{ "data-description-a" => @description_a.name, "data-description-b" => @description_b.name }
    - scopes = ["os", "packages", "patterns", "repositories", "users", "groups",
       "services", "config_files", "changed_managed_files", "unmanaged_files"]
    #diff-unmanaged-files.modal.fade
      .modal-dialog.modal-lg
        .modal-content
          .modal-header
            %button.close{"type" => "button", "data-dismiss" => "modal"}
              ×
            %h4
              Diff Unmanaged Files
          .modal-body
            .row#diff-unmanaged-files-content{"style" => "display: none"}
              Diff for '
              %span#diff-unmanaged-files-file>
              ' ('#{@description_a.name}' -> '#{@description_b.name}')
              #diff-unmanaged-files-diff
            #diff-unmanaged-files-error{"style" => "display: none"}
            #diff-unmanaged-files-spinner{"style" => "display: none"}
              Generating diff. Please wait...
          .modal-footer
            %button.btn.btn-primary{"type" => "button", "data-dismiss" => "modal"}
              Close

    .container-fluid
      #nav-bar
        .row
          .col-xs-1
          .col-xs-10
            %h1
              Comparing '#{@description_a.name}' with '#{@description_b.name}'
            %span.scope-navigation
              Scopes:
              - scopes.each do |scope|
                %a.btn.btn-default.btn-sm{ :href => "##{scope}", :title => scope_title(scope),
                  "data-toggle"=>"popover", "data-content" => scope_help(scope),
                  :class => nav_class(scope), "ng-show" => "diff.#{scope}" }
                  %span= scope_initials(scope)
        .row
          .col-xs-1
            %a#expand-all{:href => "#", :style => "display: none"}
              Expand all
            %a#collapse-all{:href => "#"}
              Collapse all
        .row
          .col-xs-9
            %small.pull-right.pad-top
              created by
              %a{:href => "http://machinery-project.org", :target => "_blank"}
                Machinery

      #content_container
        %div
          = render_partial "compare/alert"
          - scopes.each do |scope|
            = render_partial "compare/#{scope}"