<div class="container">
  <div style="float: right; cursor: pointer;" title="Close window" (click)="close()"><i style="color: white; background: red; box-shadow: 0px 2px 1px grey; " class="material-icons" > close </i></div>
  <div class="tableStyle">
    <table style="width: 100%;">
      <thead style="background: #2f4f60; color: white; font-size: 12px;">
        <tr>
          <th style="padding-top: 5px; padding-bottom: 5px;padding-left: 5px;">Shared with</th>
          <th style="padding-top: 5px; padding-bottom: 5px;padding-left: 5px;">Phone</th>
          <th style="padding-top: 5px; padding-bottom: 5px;padding-left: 5px;">Shared By</th> 
          <th style="padding-top: 5px; padding-bottom: 5px;padding-left: 5px;">Shared At</th> 
          <th style="padding-top: 5px; padding-bottom: 5px;padding-left: 5px;text-align: center;">Remove</th>
        </tr>   
      </thead>
      <tbody style="font-size: 12px;">
        <tr *ngFor ="let shareObj of sharedWith ; let i = index">
          <td style="padding-left: 5px;border-left: 1px solid;border-bottom: 1px solid;">{{shareObj.shared_with?shareObj.shared_with :""}}</td>
          <td style="padding-left: 5px;border-left: 1px solid;border-bottom: 1px solid;">{{shareObj.shared_with_phone?shareObj.shared_with_phone:""}}</td>
          <td style="padding-left: 5px;border-left: 1px solid;border-bottom: 1px solid;">{{shareObj.shared_by?shareObj.shared_by:""}}</td>
          <td style="padding-left: 5px;border-left: 1px solid;border-bottom: 1px solid;">{{shareObj.shared_at?(shareObj.shared_at | date:'medium'):""}}</td>
          <td style="padding-left: 5px;border-left: 1px solid;border-right: 1px solid;border-bottom: 1px solid;padding-top: 5px;text-align: center;"><i class="material-icons" style="color : red;cursor :pointer;font-size: 15px;" (click)= "DeleteDocumentsField(shareObj)"> remove_circle_outline </i></td>
        </tr>   
      </tbody>
    </table>
  </div>
</div>

