Improve Attendees component for agenda

src/app/shared/event/attendee-modal/attendee-modal.page.html

@@ -6,21 +6,46 @@
   <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
 </ion-header>
 
-<ion-content>
-  <ion-item-group>
-  <ion-list>
-    <ion-item-sliding>
-      <ion-item *ngFor="let attendee of contacts">
-        <ion-checkbox slot="end" (ionChange)="selectContact(attendee)"></ion-checkbox><!-- [disabled]="isCheckboxDisabled" -->
-        <ion-label>
-          <h3>{{ attendee.Name }}</h3>
-          <p>{{ attendee.EmailAddress }}</p>
-        </ion-label>
-      </ion-item>
-    </ion-item-sliding>
-  </ion-list>
-</ion-item-group>
+<ion-content class="height-100">
+  
+  <ion-item-group class="d-flex flex-column height-100">
+    <ion-list class="flex-grow-1 overflow-y-auto height-100" >
+      <ion-item-sliding>
+        <div *ngFor="let attendee of contacts;">
+          <ion-item (click)="selectContact(attendee)" *ngIf="checkbox(attendee)" >
+            <div class="pr-10">
+              <ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
+            </div>
+            <ion-label>
+              <h3>{{ attendee.Name }}</h3>
+              <p>{{ attendee.EmailAddress }}</p>
+            </ion-label>
+          </ion-item>
+        </div>
+
+      </ion-item-sliding>
+    </ion-list>
+    <hr/>
+    <ion-list lines="none" *ngIf="selectedContact.length >= 1" class="flex-grow-1 overflow-y-auto height-100" style="border-top:1px solid #ebebeb">
+      <ion-item-sliding>
+        <ion-item *ngFor="let attendee of selectedContact;" class="d-flex">
+          <div class="pr-10">
+            <ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
+          </div>
+          <ion-label>
+            <h3>{{ attendee.Name }}</h3>
+            <p>{{ attendee.EmailAddress }}</p>
+          </ion-label>
+          <div style="color:red" (click)="remove(attendee)">
+            X
+          </div>
+        </ion-item>
+      </ion-item-sliding>
+    </ion-list>
+  </ion-item-group>
+
 </ion-content>
+
 <ion-footer class="ion-no-border">
   <ion-toolbar class="width-100 d-flex justify-space-between px-20">
     <ion-buttons slot="start">