%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? && 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}"}
      .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}
            %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
              - if index_item.consumer_version_branch
                - branch_class = index_item.latest_for_branch? ? "tag badge badge-dark" : "tag badge badge-secondary"
                %div{"class": branch_class}
                  = "branch: " + index_item.consumer_version_branch
              - 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
              - if index_item.provider_version_branch
                - branch_class = "tag badge badge-dark"
                %div{"class": branch_class}
                  = "branch: " + index_item.provider_version_branch
              - 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
              - if index_item.show_settings?
                %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();
      }
    })