%body
  %link{rel: 'stylesheet', href: '/css/bootstrap.min.css'}
  %link{rel: 'stylesheet', href: '/stylesheets/index.css'}
  %script{type: 'text/javascript', src:'/javascripts/jquery-2.1.1.min.js'}
  %script{type: 'text/javascript', src:'/javascripts/jquery.tablesorter.min.js'}
  %script{type: 'text/javascript', src:'/js/bootstrap.min.js'}
  .container
    %nav.navbase-default{role: "navigation", id: "navigation"}
      .container-fluid
        .navbar-header
        %ul.navbar-right#top-left-menu
          %li
            %a{href: './?tags=true'}
              Show latest tags
            %a{href: '/hal-browser/browser.html'}
              API Browser
    %h1.page-header
      Pacts
    %table.table.table-bordered.table-striped{ id: 'relationships' }
      %thead
        %th
        %th.consumer
          Consumer
          %span.glyphicon.glyphicon-sort.relationships-sort
        %th.pact

        %th.provider
          Provider
          %span.glyphicon.glyphicon-sort.relationships-sort
        %th
        %th
          Latest pact<br>published
        %th
          Webhook<br>status
        %th
          Last<br>verified
      %tbody

      - index_items.each do | index_item |
        %tr
          %td
          %td.consumer
            %a{ href: index_item.consumer_group_url }
              = index_item.consumer_name
          %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
          %td
            = index_item.publication_date_of_latest_pact
          %td{class: index_item.webhook_status}
            %a{ href: index_item.webhook_url }
              = index_item.webhook_label

          %td{ class: index_item.verification_status, title: index_item.verification_tooltip, "data-toggle": "tooltip", "data-placement": "left" }
            %div
              = index_item.last_verified_date
              - if index_item.warning?
                %span.glyphicon.glyphicon-warning-sign{ 'aria-hidden': true }
    %div.relationships-size
      = index_items.size_label

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

  $(document).ready(function(){
    $("span.pact a").load("/images/doc-text.svg");
    $("span.pact-matrix a").load("/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()});
    });
  });