Add player control-plane and dashboard updates

src/web/views/signage/screens/form.hbs

@@ -6,7 +6,7 @@
 </div>
 
 <div class="row g-4">
-  <div class="col-12 col-xl-8">
+  <div class="col-12 col-xl-6">
     <div class="card card-outline card-primary admin-form-card h-100">
       <div class="card-header">
         <h3 class="card-title">Screen group details</h3>
@@ -40,16 +40,37 @@
     </div>
   </div>
 
-  <div class="col-12 col-xl-4">
+  <div class="col-12 col-xl-6">
     <div class="card card-outline card-secondary admin-form-card h-100">
       <div class="card-header">
-        <h3 class="card-title">Player URL</h3>
+        <h3 class="card-title">Player URLs</h3>
       </div>
-      <div class="card-body">
-        {{#if screen.player_url}}
-          <p class="mb-0"><a href="{{screen.player_url}}" target="_blank">{{screen.player_url}}</a></p>
+      <div class="card-body table-responsive p-0">
+        {{#if screen.player_urls.length}}
+          <table class="table table-striped w-100 mb-0" data-table-searchable>
+            <thead>
+              <tr>
+                <th>Player</th>
+                <th>URL</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{#each screen.player_urls}}
+                <tr>
+                  <td data-label="Player" class="text-break">{{identifier}}</td>
+                  <td class="text-break">
+                    {{#if player_url}}
+                      <a href="{{player_url}}" target="_blank" rel="noreferrer">{{player_url}}</a>
+                    {{else}}
+                      <span class="text-muted">Not available</span>
+                    {{/if}}
+                  </td>
+                </tr>
+              {{/each}}
+            </tbody>
+          </table>
         {{else}}
-          <p class="mb-0 text-muted">No player URL is available yet.</p>
+          <p class="mb-0 p-3 text-muted">No player URLs are available yet.</p>
         {{/if}}
       </div>
     </div>