!!! %html

%head
  %title Juxtapose
  %meta{name:"viewport", content:"width=device-width, initial-scale=1.0"}
  %link{href:"css/bootstrap.min.css", rel:"stylesheet"}
  %link{href:"css/styles.css", rel:"stylesheet"}

  %script
    Juxtapose = {}
    Juxtapose.project = #{project.to_json};
  %script{src:"https://code.jquery.com/jquery.js"}
  %script{src:"js/underscore-min.js"}
  %script{src:"js/bootstrap.min.js"}
  %script{src:"js/angular.min.js"}
  %script{src:"js/app.js"}
%body{"ng-app" => "juxtapose", "ng-cloak" => true}
  .container{"ng-controller" => "ProjectsCtrl"}
    %h1 Juxtapose

    %form.form
      .row
        .col-md-3
          .form-group
            %label{for: 'search'} Search
            %input{"ng-model" => "search", name: 'search'}

          .checkbox
            %label
              %input{type: "checkbox", "ng-model" => "onlyFailing", "ng-init" => "onlyFailing = true"}
                Only Failing Specs

        .col-md-3
          .form-group
            %b Device
            .checkbox{"ng-repeat" => "device in devices"}
              %label
                %input{type: "checkbox", "ng-model" => "device.selected", "ng-init" => "device.selected = true" }
                  {{ device.name }}

        .col-md-3
          .form-group
            %b iOS Version
            .checkbox{"ng-repeat" => "version in versions"}
              %label
                %input{type: "checkbox", "ng-model" => "version.selected", "ng-init" => "version.selected = true" }
                  {{ version.name }}

    %ul.specs
      %li.spec{"ng-repeat" => "spec in specs = (project.specs | filter:specNameMatcher | filter:onlyFailingMatcher | filter:versionMatcher | filter:deviceNameMatcher)", "ng-class" => "spec.current ? 'failed' : 'passed'"}
        %p.spec_name
          %span.failing-title{"ng-show" => "spec.current"} FAILING
          %span.passing-title{"ng-show" => "!spec.current"} PASSING

          {{ specName(spec) }}

          .info
            %span.device {{ deviceName(spec) }}
            %span.divider
              \|
            %span.version iOS {{ iOSVersion(spec) }}

        %table
          %tr
            %td{"ng-if" => "spec.accepted"}
              %a{"ng-href" => "{{spec.accepted.path}}", target: "_blank"}
                %img{"ng-src" => "{{spec.accepted.path}}", width: '200px'}
            %td{"ng-if" => "spec.current"}
              %a{"ng-href" => "{{spec.current.path}}", target: "_blank"}
                %img{"ng-src" => "{{spec.current.path}}", width: '200px'}
            %td{"ng-if" => "spec.diff"}
              %a{"ng-href" => "{{spec.diff.path}}", target: "_blank"}
                %img{"ng-src" => "{{spec.diff.path}}", width: '200px'}
          %tr.spec_labels{"ng-if" => "spec.current"}
            %td{"ng-if" => "spec.accepted"}
              ACCEPTED
            %td{"ng-if" => "spec.current"}
              CURRENT
              %button{"ng-click" => "accept(spec)"}
                Accept
            %td{"ng-if" => "spec.diff"}
              DIFF
      %li.no-failures{"ng-show" => "onlyFailing && specs.length == 0"}
        No failing specs found.
      %li.no-specs{"ng-show" => "!onlyFailing && specs.length == 0"}
        No matching specs found.