<div class="px-2">
    <app-search-form (messageEvents)="receiveEvents($event)" (messageClear)="receiveClear()"></app-search-form>
    <div class="no-results text-center mx-auto" *ngIf="noRes">No results available</div>
    <app-events-table [events]="eventsRes" *ngIf="hasRes && !showDetail"
        (messageEventID)="receiveEventID($event)"></app-events-table>
    <app-event-detail (messageBack)="receiveBack()" *ngIf="showDetail" [eventDetails]="eventDetails"
        [venueDetails]="venueDetails" [eventLoaded]="eventLoaded" [venueLoaded]="venueLoaded"></app-event-detail>
</div>