anchor.diff:        </p>
       </div>
       <div class="table-responsive">
  -      <table class="table table-bordered permissions-table" id="permissions-table">
  -        <thead>
  -        <tr>
  -          <th class="name-column"></th>
  -          <th class="permission-column no-access">No Access</th>
  -          <th class="permission-column">View</th>
  -          <th class="permission-column">Download</th>
  -          <th class="permission-column">Edit</th>
  -          <th class="permission-column">Manage</th>
  -          <th class="actions-column"></th>
  -        </tr>
  -        </thead>
  -        <tbody>
  -          <tr is="permission-row" :permission="publicPermission" :access-types="accessTypes" :public-access-type="publicPermission.access_type" field-prefix-orig="policy"></tr>
  -          <tr is="permission-row" v-for="(permission, index) in permissions" :index="index" :permission="permission" :access-types="accessTypes" :public-access-type="publicPermission.access_type" v-on:delete-permission="deletePermission(index)"></tr>
  -        </tbody>
  -      </table>
  +      <policy-table class="table table-bordered" id="permissions-table" :permissions="permissions" :public-permission="publicPermission"></policy-table>
       </div>
   
       <%= render partial: 'sharing/person_permission_modal' %>
  
positive.code:       }
      }
    });
    Vue.component('privilege-cell', {
      props: ['fieldPrefix', 'permission', 'accessType', 'publicAccessType'],
      template:
  
negative.code:       }
      }
    });
  
    Vue.component('policy-table', {
      props: ['publicPermission', 'permissions'],
      template:
      '<table class="permissions-table" id="permissions-table">' +
        '<thead>' +
          '<tr>' +
            '<th class="name-column"></th>' +
            '<th class="permission-column" v-for="accessType in accessTypes" :class="accessType.class">{{ accessType.title }}</th>' +
            '<th class="actions-column"></th>' +
          '</tr>' +
        '</thead>' +
        '<tbody>' +
          '<tr is="permission-row" :permission="publicPermission" :access-types="accessTypes" :public-access-type="publicPermission.access_type" field-prefix-orig="policy"></tr>' +
          '<tr is="permission-row" v-for="(permission, index) in permissions" :index="index" :permission="permission" :access-types="accessTypes" :public-access-type="publicPermission.access_type" v-on:delete-permission="deletePermission(index)"></tr>' +
        '</tbody>'+
      '</table>',
      data: function () {
        return {
          accessTypes: [
            { title: 'No Access', value: Sharing.accessTypes.noAccess, class: 'no-access' },
            { title: 'View', value: Sharing.accessTypes.visible },
            { title: 'Download', value: Sharing.accessTypes.accessible },
            { title: 'Edit', value: Sharing.accessTypes.editing },
            { title: 'Manage', value: Sharing.accessTypes.managing }
          ]
        };
      },
      methods: {
        deletePermission: function (index) {
          this.permissions.splice(index, 1);
        }
      }
    });
  
    var permissionsTable = new Vue({
      el: '#permissions-table',
      data: {
  