@if (!hasChildRoute) {
<div class="event-details-page">
  <!-- Loading State -->
  @if (loading) {
    <div class="loading-container">
      <div class="spinner"></div>
      <p>Loading event...</p>
    </div>
  }

  <!-- Not Found State -->
  @if (notFound && !loading) {
    <div class="not-found-container">
      <div class="not-found-icon">❌</div>
      <h2>Event Not Found</h2>
      <p>The event you're looking for doesn't exist or has been removed.</p>
      <button class="btn btn-primary" (click)="goBack()">Back to Events</button>
    </div>
  }

  <!-- Event Content -->
  @if (event && !loading && !notFound) {
    <div class="margin-content">
      <!-- Main Content -->
      <div class="event-content">
        <!-- Thumbnail Section -->
        <div class="event-thumbnail-section">
          <img
            [src]="getThumbnailUrl()"
            [alt]="event.title"
            class="event-thumbnail"
          />
          <div class="thumbnail-overlay">
            <span class="status-badge" [class.active]="event.state === 'active'">
              {{ event.state | uppercase }}
            </span>
          </div>
        </div>

        <!-- Details Section -->
        <div class="event-details-section">
          <!-- Title and Basic Info -->
          <div class="details-card">
            <h1 class="event-title">{{ event.title }}</h1>

            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">📅 Date & Time</span>
                <span class="info-value">{{ formatDate(event.startTime) }}</span>
              </div>

              <div class="info-item">
                <span class="info-label">⏱️ Duration</span>
                <span class="info-value">{{ getEventDuration() }}</span>
              </div>

              <div class="info-item">
                <span class="info-label">📍 End Time</span>
                <span class="info-value">{{ formatDate(event.endTime) }}</span>
              </div>

              <div class="info-item">
                <span class="info-label">🎯 Status</span>
                <span class="info-value">
                  <span class="status-badge-inline" [class.active]="event.state === 'active'">
                    {{ event.state | titlecase }}
                  </span>
                </span>
              </div>
            </div>
          </div>

          <!-- Description Section -->
          @if (event.description) {
            <div class="details-card description-card">
              <h2 class="section-title">About This Event</h2>
              <div class="description-text">
                {{ event.description }}
              </div>
            </div>
          }
        </div>
      </div>
    </div>
  }
  <div class="actionButtons">
    <button type="button" class="submit-btn" (click)="goToRegisterPage()" >Register</button>
    <!-- <button type="button" class="btn btn-secondaryCancel">
      Cancel
  </button> -->
 </div>
</div>
}
 <router-outlet></router-outlet>