%body

!= render :haml, :'index/_css_and_js', :layout => false
.container
  != render :haml, :'index/_navbar', :layout => false, locals: {tag_toggle: false, base_url: base_url}
  - if index_items.empty? && blank?(search)
    != render :haml, :'index/_getting-started', :layout => false
  %h1.page-header
    Pacts

  - errors.each do | error |
    %div.alert.alert-danger
      = error

  %form{action: "#{base_url}"}
    .field
      %label{for: 'search'}
        Search
      %input{name: 'search', id: 'search', class: 'search', value: search}
      %input{type: 'button', class: 'submit-search', value: 'Submit'}
      %input{type: 'button', class: 'reset-search', value: 'Reset' }

  %table.table.table-bordered.table-striped{ id: 'relationships' }
    %thead
      %tr
        %th.consumer
          Consumer
          %span.sort-icon.relationships-sort
        %th.consumer-version-number
          Consumer<br>Version
          %span.sort-icon.relationships-sort
        %th.pact{ style: 'width: 40px' }
        %th.provider
          Provider
          %span.sort-icon.relationships-sort
        %th.provider-version-number
          Provider<br>Version
          %span.sort-icon.relationships-sort
        %th
          Published
          %span.sort-icon.relationships-sort
        %th
          Webhook<br>status
        %th
          Last<br>verified
          %span.sort-icon.relationships-sort
        %th
    %tbody

      - index_items.each do | index_item |
        %tr{'data-pact-versions-url': index_item.pact_versions_url,
            'data-consumer-name': index_item.consumer_name,
            'data-provider-name': index_item.provider_name,
            'data-integration-url': index_item.integration_url,
            'data-pact-tags': index_item.pact_tags,
            'data-pact-branches': index_item.pact_branches
            }
          %td.consumer
            %a{:href => index_item.consumer_group_url }
              = index_item.consumer_name
          %td.consumer-version-number{"data-text": index_item.consumer_version_order}
            %div.clippable{"data-clippable": index_item.consumer_version_number}
              = index_item.display_consumer_version_number
              - if index_item.display_consumer_version_number
                %button.clippy.invisible{ title: "Copy to clipboard" }
                  %span.copy-icon
            - index_item.consumer_version_branches.each do | branch_name |
              %div{"class": "tag badge badge-dark"}
                = "branch: " + branch_name
            - index_item.consumer_version_latest_tag_names.each do | tag_name |
              .tag.badge.badge-primary
                = "tag: " + tag_name
            - index_item.consumer_version_environment_names.each do | environment_name |
              .tag.badge.badge-success
                = "env: " + environment_name
            - if index_item.latest?
              .tag.badge.bg-light
                latest
          %td.pact
            %span.pact
              %a{ href: index_item.pact_url, title: "View pact" }
            %span.pact-matrix
              %a{ href: index_item.pact_matrix_url, title: "View pact matrix" }
          %td.provider
            %a{ href: index_item.provider_group_url }
              = index_item.provider_name
          %td.provider-version-number
            %div.clippable{"data-clippable": index_item.provider_version_number}
              = index_item.display_provider_version_number
              - if index_item.display_provider_version_number
                %button.clippy.invisible{ title: "Copy to clipboard" }
                  %span.copy-icon
            - index_item.provider_version_branches.each do | branch_name |
              %div{"class": "tag badge badge-dark"}
                = "branch: " + branch_name
            - index_item.provider_version_latest_tag_names.each do | tag_name |
              .tag.badge.badge-primary
                = "tag: " + tag_name
            - index_item.provider_version_environment_names.each do | environment_name |
              .tag.badge.badge-success
                = "env: " + environment_name
          %td{"data-text": index_item.publication_date_of_latest_pact_order}
            = index_item.publication_date_of_latest_pact.gsub("about ", "")
          %td{ class: "table-#{index_item.webhook_status}" }
            - if index_item.show_webhook_status?
              %a{ href: index_item.webhook_url }
                = index_item.webhook_label

          %td{ class: "table-#{index_item.pseudo_branch_verification_status}", title: index_item.verification_tooltip, "data-toggle": "tooltip", "data-placement": "left" }
            %div
              = index_item.last_verified_date.gsub("about ", "")
              - if index_item.warning?
                %span.warning-icon{ 'aria-hidden': true }
          %td
            %span.integration-settings.kebab-horizontal{ 'aria-hidden': true }

  %div.pagination.text-center

  - pagination_locals = { page_number: page_number, page_size: page_size, pagination_record_count: pagination_record_count, current_page_size: current_page_size }
  != render :haml, :'index/_pagination', :layout => false, locals: pagination_locals

:javascript
  $(function(){
    $("#relationships").tablesorter();
  });

  $(document).ready(function(){
    initializeClipper(".clippable");

    $("span.pact a").load("#{base_url}/images/doc-text.svg");
    $("span.pact-matrix a").load("#{base_url}/images/doc-matrix.svg");
    $('td[data-toggle="tooltip"]').each(function(index, td){
      //appended tooltip div screws up table if it's appended after a
      //td, so need to append it to a div
      $(td).tooltip({container: $(td).first()});
    });
  });

  $(".reset-search").on("click", function() {
    const url = new URL(window.location)
    url.searchParams.delete('search')
    window.location = url.toString();
  })

  $(".submit-search").on("click", function() {
    search = $("#search").val();
    const url = new URL(window.location)
    url.searchParams.set('search', search)
    window.location = url.toString();
  })

  $(".search").keypress(function(event) {
    const enterKeyCode = 13;

    const key = event.which;
    if (key === enterKeyCode) {
      event.preventDefault();
      search = $("#search").val();
      const url = new URL(window.location)
      url.searchParams.set('search', search)
      window.location = url.toString();
    }
  })