<div id="manage-subscribers" class=" uk-card uk-card-default uk-padding">
  <div class="uk-text-large uk-text-center uk-width-5-6@l uk-width">Manage subscribers</div>
    <form class="uk-text-center uk-animation uk-card uk-card-default uk-padding">
      <div>
        <input type="text" class="uk-input  uk-width-1-2" placeholder="Search subscribers..." aria-describedby="sizing-addon2"  [(ngModel)]="subscribersSearchUtils.keyword" name="keyword" >
        <button (click)="goTo(1)"  type="submit" class=" uk-button">
           <span class="uk-icon">
           <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>
           </span>Search
        </button>
      </div>
    </form>

    <div *ngIf="subscribersSearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
      <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
        <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
          {{subscribersSearchUtils.totalResults | number}} subscribers, page {{subscribersSearchUtils.page | number}} of {{(totalPages()) | number}}
        </span>
        <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
          <paging-no-load [currentPage]="subscribersSearchUtils.page" [totalResults]="subscribersSearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>
        </span>
      </div>
    </div>

    <div class="custom-dataTable-content">
        <div class="uk-overflow-container">
            <table datatable class="uk-table uk-table-striped divider-table" id="dpTable" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" dtInstance="dtInstanceCallback">
              <thead>
                <tr>
                  <th class="uk-text-center">Email</th>
                  <th class="uk-text-center">Action</th>
                </tr>
              </thead>
              <tbody *ngIf="communitySubscribers">
                <tr class="uk-table-middle" *ngFor="let item of communitySubscribers.subscribers;">
                  <td class="uk-text-center uk-width-1-2">
                    {{item.email}}
                  </td>
                  <td class="uk-text-center uk-width-1-2">
<!--                    red_background_color red_color-->
                      <a (click)="removeSubscriber(item.email)" class="uk-icon-button remove uk-button-danger" uk-icon="icon: close; ratio: 1" title="Remove"></a>
                  </td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>

    <div *ngIf="subscribersSearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
      <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
        <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
          {{subscribersSearchUtils.totalResults | number}} subscribers, page {{subscribersSearchUtils.page | number}} of {{(totalPages()) | number}}
        </span>
        <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
          <paging-no-load [currentPage]="subscribersSearchUtils.page" [totalResults]="subscribersSearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>
        </span>
      </div>
    </div>

</div>

<modal-alert #AlertModalDeleteSubscriber (alertOutput)="confirmedDeleteSubscriber()"></modal-alert>
