feat: show roles in edit list

src/app/screen-edit/screen-edit.component.html

@@ -19,7 +19,10 @@
   <ul class="list-group mb-3">
       @for (player of data.getPlayers(); track $index) {
         <li class="list-group-item d-flex justify-content-between">
-            <a (click)="openPlayerModal(player)" style="display: block; cursor: pointer; flex-grow: 1; text-align: left;">{{ player.name }}</a>
+            <div (click)="openPlayerModal(player)" class="player-content">
+              <div class="text-start">{{ player.name }}</div>
+              <div class="text-end">{{ player.getRoles() }}</div>
+            </div>
             <button (click)="removeItem(player)" class="btn btn-secondary btn-sm p-0 ms-2" style="width: 24px; height: 24px" >
               <i class="bi bi-x"></i>
             </button>

src/app/screen-edit/screen-edit.component.less

@@ -0,0 +1,7 @@
+.player-content{
+    cursor: pointer;
+    flex-grow: 1;
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+}