<div class="small-middle-container">

    <div class="section" [hidden]="!showSeasonal">
        <h2>{{'Discovery.SeasonalTab' | translate}}</h2>
        <div>
            <carousel-list [id]="'seasonal'" [isAdmin]="isAdmin" [discoverType]="DiscoverType.Seasonal" (movieCount)="setSeasonalMovieCount($event)"></carousel-list>
        </div>
    </div>

    <div class="section">
        <h2>{{'Discovery.PopularTab' | translate}}</h2>
        <div>
            <carousel-list [id]="'popular'" [isAdmin]="isAdmin" [discoverType]="DiscoverType.Popular"></carousel-list>
        </div>

    </div>

    <div class="section">
        <h2>{{'Discovery.TrendingTab' | translate}}</h2>
        <div >
            <carousel-list [id]="'trending'" [isAdmin]="isAdmin" [discoverType]="DiscoverType.Trending"></carousel-list>
        </div>

    </div>

    <div class="section">
        <h2>{{'Discovery.UpcomingTab' | translate}}</h2>
        <div>
            <carousel-list [id]="'upcoming'" [isAdmin]="isAdmin" [discoverType]="DiscoverType.Upcoming"></carousel-list>
        </div>
    </div>
    <!-- <div class="section">
        <h2>{{'Discovery.RecentlyRequestedTab' | translate}}</h2>
        <div>
            <carousel-list [id]="'recentlyRequested'" [discoverType]="DiscoverType.RecentlyRequested"></carousel-list>
        </div>
    </div> -->
</div>