@if(isOpen) {
    <div class="modal-overlay" (click)="cancel.emit()">
        <div class="modal-container" (click)="$event.stopPropagation()">
          <div class="modal-content">
            <div class="emoji-container">
              <span class="emoji">🧐</span>
            </div>
            <h2>Logout?</h2>
            <p>Are you sure you want to log out {{ attendeeName }}? The app would go back to login page.</p>
            
            <div class="modal-actions">
              <button class="cancel-btn" (click)="cancel.emit()">
                Cancel
              </button>
              <button class="confirm-btn" (click)="confirm.emit()">
                Yes, logout
              </button>
            </div>
          </div>
        </div>
      </div>
  }