D-Net

<div class="uk-card uk-card-default uk-card-body">

  <div *ngIf="error"  class="uk-alert uk-alert-danger uk-flex uk-flex-top">

    <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>

    <div>

        {{error}}

    </div>

  </div>

  <div *ngIf="loadManagers || loadPending" class="loading-gif"></div>

  <div *ngIf="!loadManagers && !loadPending">

    <div class="uk-text-large uk-text-bold uk-text-center uk-margin-medium-bottom">Managers</div>

    <div class="uk-flex uk-flex-right">

      <button class="uk-button uk-button-primary" (click)="openInviteModal()">Invite a Manager</button>

    </div>

    <ul uk-tab class="uk-tab links">

      <li *ngIf="managers" [class.uk-active]="showManagers" (click)="showManagers = true">

        <a>Managers <span class="uk-badge space">{{managers.length | number}}</span></a>

      </li>

      <li *ngIf="pending" [class.uk-active]="!showManagers" (click)="showManagers = false">

        <a>Pending Managers <span class="uk-badge space">{{pending.length | number}}</span></a>

      </li>

    </ul>

    <div class="custom-dataTable-content">

      <div class="uk-overflow-container">

        <table class="uk-table uk-table-striped divider-table" id="dpTable">

          <thead>

          <tr>

            <th class="uk-text-center">Email</th>

            <th class="uk-text-center">Action</th>

          </tr>

          </thead>

          <tbody>

          <tr class="uk-table-middle" *ngFor="let item of (showManagers)?managers:pending">

            <td class="uk-text-center uk-width-1-2">

              {{(showManagers)?item.email:item}}

            </td>

            <td class="uk-text-center uk-width-1-2">

              <a (click)="openDeleteModal(item)" class="uk-icon-button remove uk-button-danger" uk-icon="icon: close; ratio: 1" title="Remove"></a>

            </td>

          </tr>

          </tbody>

        </table>

      </div>

    </div>

  </div>

</div>

<modal-alert #inviteManagerModal (alertOutput)="inviteManager()" [okDisabled]="invited && invited.invalid">

  <div *ngIf="invited" class="uk-padding uk-text-center">

    <span class="uk-text-bold">Email: </span>

    <input class="uk-input space uk-width-medium" [class.uk-form-danger]="invited.invalid" [formControl]="invited">

  </div>

</modal-alert>

<modal-alert #deleteManagerModal (alertOutput)="deleteManager()"></modal-alert>

<modal-alert #deletePendingModal (alertOutput)="deletePendingManager()"></modal-alert>