New programming screen

src/app/admin/admin.component.html

@@ -2,11 +2,16 @@
   <div class="container">
     <div class="admin-header">
       <h1>Admin Dashboard</h1>
-      <p>Manage programs, events, tiers, history, team, and community content</p>
+      <p>Manage shows, programs, events, tiers, history, team, and community content</p>
     </div>
 
     <!-- Tabs -->
     <div class="admin-tabs">
+      <button
+        class="tab-btn"
+        [class.active]="activeTab() === 'shows'"
+        (click)="activeTab.set('shows')"
+      >Shows</button>
       <button
         class="tab-btn"
         [class.active]="activeTab() === 'programs'"
@@ -44,6 +49,52 @@
       >Station</button>
     </div>
 
+    <!-- Shows Tab -->
+    @if (activeTab() === 'shows') {
+      @if (shows$ | async; as shows) {
+        <div class="tab-content">
+          <div class="tab-toolbar">
+            <h2>Shows ({{ shows.length }})</h2>
+            <button class="btn btn-add" (click)="openShowForm()">+ Add Show</button>
+          </div>
+
+          <table class="admin-table">
+            <thead>
+              <tr>
+                <th>Order</th>
+                <th>Title</th>
+                <th>Host</th>
+                <th>Genre</th>
+                <th>Slots</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (show of shows; track show.id) {
+                <tr>
+                  <td>{{ show.display_order }}</td>
+                  <td>{{ show.title }}</td>
+                  <td>{{ show.host }}</td>
+                  <td>{{ show.genre }}</td>
+                  <td>
+                    @for (slot of show.schedules; track slot.id) {
+                      <span class="slot-badge">{{ slot.day_label.charAt(0) }} {{ slot.time }}</span>
+                    }
+                  </td>
+                  <td class="actions">
+                    <button class="btn-icon btn-edit" (click)="editShow(show)">Edit</button>
+                    <button class="btn-icon btn-delete" (click)="deleteShow(show.id)">Delete</button>
+                  </td>
+                </tr>
+              } @empty {
+                <tr><td colspan="6" class="empty-row">No shows yet. Click "Add Show" to create one.</td></tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    }
+
     <!-- Programs Tab -->
     @if (activeTab() === 'programs') {
       @if (programs$ | async; as programs) {
@@ -339,6 +390,9 @@
   </div>
 
   <!-- Form modals -->
+  @if (showShowForm) {
+    <app-admin-show-form [editItem]="editingShow" (saved)="onShowSaved()" (closed)="onShowClosed()" />
+  }
   @if (showProgramForm) {
     <app-admin-program-form [editItem]="editingProgram" (saved)="onProgramSaved()" (closed)="onProgramClosed()" />
   }
@@ -360,4 +414,4 @@
   @if (showCommunityForm) {
     <app-admin-community-form [editItem]="editingCommunity" (saved)="onCommunitySaved()" (closed)="onCommunityClosed()" />
   }
-</section>
+</section>