%body
  %link{rel: 'stylesheet', href: "#{base_url}/css/bootstrap.min.css"}
  %link{rel: 'stylesheet', href: "#{base_url}/stylesheets/index.css"}
  %link{rel: 'stylesheet', href: "#{base_url}/stylesheets/matrix.css"}
  %script{type: 'text/javascript', src: "#{base_url}/javascripts/jquery-3.3.1.min.js"}
  %script{type: 'text/javascript', src: "#{base_url}/javascripts/jquery.tablesorter.min.js"}
  %script{type: 'text/javascript', src: "#{base_url}/javascripts/matrix.js"}
  %script{type: 'text/javascript', src: "#{base_url}/javascripts/clipboard.js"}
  %script{type: 'text/javascript', src: "#{base_url}/js/bootstrap.min.js"}

  .container
    .navbar-right
      %a{href: "#{base_url}/"}
        Home
    %h1.page-header
      The Matrix
      - if defined?(badge_url) && badge_url
        %img{src: badge_url, class: 'pact_badge' }

    - if defined?(errors) && errors.any?
      - errors.each do | error |
        %div.alert.alert-danger
          = error

    %form{action: "#{base_url}/matrix", onsubmit:'return onSubmit()'}
      - selectors.each_with_index do | selector, index |
        .selector
          %label{for: "pacticipant#{index}"}
            Pacticipant name
          %input{name: 'q[]pacticipant', id: "pacticipant1#{index}", class: 'pacticipant_name', value: selector.pacticipant_name}

          .input-group

          .input-group
            %select{ name: "ignorethis#{index}", class: 'version-selectorizor' }
              %option{ value: 'specify-all-versions', selected: selector.specify_all_versions }
                All versions
              %option{ value: 'specify-latest', selected: selector.specify_latest }
                Latest version
              %option{ value: 'specify-version', selected: selector.specify_version }
                Version number ...
              %option{ value: 'specify-latest-tag', selected: selector.specify_latest_tag }
                Latest version with tag ...
              %option{ value: 'specify-all-tagged', selected: selector.specify_all_tagged }
                All versions with tag...

            %input{name: 'q[]version', type: 'text', id: "pacticipant#{index}_version", class: 'version', value: selector.pacticipant_version_number}

            %input{name: 'q[]tag', type: 'text', id: "pacticipant#{index}_tag", class: 'tag', value: selector.tag}

            %input{name: 'q[]latest', value: 'true', hidden: true, class: 'latest-flag'}


      - if options.latest || options.tag
        .selector
          %label{for: 'to'}
            = options.latest ? 'To' : 'With all'
          %input{name: 'tag', id: 'to', value: options.tag }
          %input{name: 'latest', value: options.latest.to_s, hidden: true}


      %div.top-of-group
        .input-group
          %input{type: 'radio', name: "latestby", class: '', value: '', id: 'all_rows', checked: options.all_rows_checked}
          %label{for: 'all_rows'}
            Show all results
      %div
        .input-group
          %input{type: 'radio', name: "latestby", class: '', value: 'cvpv', id: 'cvpv', checked: options.cvpv_checked}
          %label{for: 'cvpv'}
            Show latest result for each consumer version/provider version
      %div
        .input-group
          %input{type: 'radio', name: "latestby", class: '', value: 'cvp', id: 'cvp', checked: options.cvp_checked}
          %label{for: 'cvp'}
            Show latest result for each consumer version/provider
      %div.top-of-group
        - limit_text = "Note that the 'Show latest...' options are summaries of the 'Show all results' query, and that the limit applies to the underlying query, rather than the number of rows returned in the summary."
        %label{for: "limit", "title": limit_text, "data-toggle": "tooltip", "data-placement": "right"}
          Limit*
        %input{name: 'limit', id: "limit", value: options.limit}
      %div.top-of-group
        %input{type: 'submit'}


    %p{style: 'text-align:right'}
      = "#{lines.size} rows"
    %table.table.table-bordered.table-striped{id: 'matrix'}
      %thead
        %tr
          %th.consumer
            = "Consumer"
            %span.glyphicon.glyphicon-sort.sort
          %th.consumer-version
            = "Consumer Version"
            %span.glyphicon.glyphicon-sort.sort
          %th.pact-published
            = "Pact Published"
            %span.glyphicon.glyphicon-sort.sort
          %th.provider
            = "Provider"
            %span.glyphicon.glyphicon-sort.sort
          %th.provider-version
            = "Provider Version"
            %span.glyphicon.glyphicon-sort.sort
          %th.verification-result
            Pact verified
            %span.glyphicon.glyphicon-sort.sort
      %tbody
      - lines.each do | line |
        %tr
          %td.consumer{'data-sort-value' => line.consumer_name, 'data-consumer-name' => line.consumer_name}
            %a{href: line.consumer_name_url}
              = line.consumer_name
          %td.consumer-version{'data-sort-value' => line.consumer_version_order, 'data-consumer-version-id' => line.consumer_version_id}
            %div.clippable
              %a{href: line.consumer_version_number_url}
                = line.display_consumer_version_number
              - if line.display_consumer_version_number
                %button.clippy.invisible{ title: "Copy to clipboard" }
                  %span.glyphicon.glyphicon-copy
            - line.latest_consumer_version_tags.each do | tag |
              .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                %a{href: tag.url}
                  .tag.label.label-primary
                    = tag.name
            - line.other_consumer_version_tags.each do | tag |
              .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                %a{href: tag.url}
                  .tag.label.label-default
                    = tag.name
          %td.pact-published{'data-sort-value' => line.pact_published_order, "data-toggle": "tooltip", "title": line.pact_version_sha_message, "data-placement": "right", "data-pact-version-sha": line.pact_version_sha}
            %a{href: line.pact_publication_date_url}
              - if options.all_rows_checked
                = "#{line.pact_publication_date} (revision #{line.pact_revision_number})"
              - else
                = line.pact_publication_date

          %td.provider{'data-sort-value' => line.provider_name, 'data-provider-name' => line.provider_name }
            %a{href: line.provider_name_url}
              = line.provider_name
          %td.provider-version{'data-sort-value' => line.provider_version_order, 'data-provider-version-id' => line.provider_version_id }
            %div.clippable
              %a{href: line.provider_version_number_url}
                = line.display_provider_version_number
              - if line.display_provider_version_number
                %button.clippy.invisible{ title: "Copy to clipboard" }
                  %span.glyphicon.glyphicon-copy
            - line.latest_provider_version_tags.each do | tag |
              .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                %a{href: tag.url}
                  .tag.label.label-primary
                    = tag.name
            - line.other_provider_version_tags.each do | tag |
              .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                %a{href: tag.url}
                  .tag.label.label-default
                    = tag.name
          %td.verification-result{class: line.verification_status_class, "title": line.pre_verified_message, "data-toggle": "tooltip", "data-placement": "left"}
            %a{href: line.verification_status_url}
              - if options.all_rows_checked && line.number
                = "#{line.verification_status} (number #{line.number})"
              - else
                = line.verification_status
            - if line.pre_verified_message
              %span.glyphicon.glyphicon-time.pre-verified-icon{"aria-hidden": true}