%body

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

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

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

  %table.table.table-bordered.table-striped{ id: 'relationships' }
    %thead
      %tr
        %th
        %th.consumer
          Consumer
          %span.sort-icon.relationships-sort

        %th.provider
          Provider
          %span.sort-icon.relationships-sort
        %th.pact
        %th
        %th
          Latest pact<br>published
        %th
          Webhook<br>status
        %th
          Last<br>verified
        %th
    %tbody
      - index_items.each do | index_item |
        %tr{
          'class':'pact-row',
          '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-href': index_item.dashboard_url,
          'data-index': "true"
          }
          %td{'role':"button"}
          %td.consumer{'role':"button"}
            %a{ href: index_item.consumer_group_url }
              = index_item.consumer_name
          %td.provider{'role':"button"}
            %a{ href: index_item.provider_group_url }
              = index_item.provider_name
          %td.pact{'role':"button"}
            %span.pact
              %a{ href: index_item.latest_pact_url, :title => "View pact" }
            %span.pact-matrix
              %a{ href: index_item.pact_matrix_url, title: "View pact matrix" }
          %td{'role':"button"}
          %td{"data-text": index_item.publication_date_of_latest_pact_order, 'role':"button"}
            = index_item.publication_date_of_latest_pact
          %td{class: "table-#{index_item.webhook_status}", 'role':"button"}
            %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", 'role':"button"}
            %div
              = index_item.last_verified_date
              - if index_item.warning?
                %span.warning-icon{ 'aria-hidden': true }
              - if index_item.failed_and_pact_pending?
                %div
                  (pact pending)
          %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

:css
  .table tbody tr:hover td, .table tbody tr:hover th {
      background-color: #ccc;
      cursor: pointer;
  }

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

  $(document).ready(function(){
    $("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()});
    });

    $(function(){
      $(".table").on("click", "td[role=\"button\"]", function (e) {
        window.location = $(this).parent("tr").data("href");
      });
    });
  });

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