working 3 tier approach

src/app/events/events.component.html

@@ -10,25 +10,35 @@
       </p>
     </div>
 
-    <div class="events-list">
-      <div class="event-card" *ngFor="let event of upcomingEvents">
-        <div class="event-date">
-          <span class="event-month">Jul</span>
-          <span class="event-day">12</span>
-          <span class="event-year">2026</span>
-        </div>
-        <div class="event-content">
-          <h3>{{ event.title }}</h3>
-          <p>{{ event.description }}</p>
-          <div class="event-meta">
-            <span class="event-location">
-              <span aria-hidden="true">📍</span> {{ event.location }}
-            </span>
-            <a href="#" class="event-rsvp">Learn More →</a>
+    @if (loading) {
+      <div class="schedule-loading">Loading events&hellip;</div>
+    } @else if (upcomingEvents.length === 0) {
+      <div class="schedule-empty">No upcoming events — check back later!</div>
+    } @else {
+      <div class="events-list">
+        <div class="event-card" *ngFor="let event of upcomingEvents">
+          <div class="event-date">
+            <span class="event-month">{{ event.date | date:'MMM' }}</span>
+            <span class="event-day">{{ event.date | date:'d' }}</span>
+            <span class="event-year">{{ event.date | date:'yyyy' }}</span>
           </div>
+          <div class="event-content">
+            <h3>{{ event.title }}</h3>
+            <p>{{ event.description }}</p>
+            <div class="event-meta">
+              <span class="event-location">
+                <span aria-hidden="true">&#x1F4CD;</span> {{ event.location }}
+              </span>
+              @if (event.rsvp_url) {
+                <a [href]="event.rsvp_url" class="event-rsvp" target="_blank" rel="noopener">RSVP &rarr;</a>
+              } @else {
+                <a href="#" class="event-rsvp">Learn More &rarr;</a>
+              }
+            </div>
+          </div>
+          <div class="event-icon" aria-hidden="true">{{ event.icon }}</div>
         </div>
-        <div class="event-icon" aria-hidden="true">{{ event.icon }}</div>
       </div>
-    </div>
+    }
   </div>
 </section>