%body
  %link{rel: 'stylesheet', href: '/css/bootstrap.min.css'}
  %link{rel: 'stylesheet', href: '/stylesheets/relationships.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'}
  %nav.navbase-default.navbar-right{role: "navigation"}
    .container
      %ul
        %li.navbar-right
          %a{href: '/hal-browser/browser.html'}
            HAL Browser
  .container
    %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

      - relationships.each do | relationship |
        %tr
          %td
          %td.consumer
            %a{:href => relationship.consumer_group_url}
              = relationship.consumer_name
          %td.pact
            %a{:href => relationship.latest_pact_url, :title => "View pact"}
              %span.pact
          %td.provider
            %a{:href => relationship.provider_group_url}
              = relationship.provider_name
          %td
          %td
            = relationship.publication_date_of_latest_pact
          %td{class: relationship.webhook_status}
            %a{:href => relationship.webhook_url}
              = relationship.webhook_label

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

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

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