frontend_v2/src/app/components/publiclists/challengelist/challengelist.component.html
<section class="ev-sm-container ev-view challenge-container noScroll">
<!-- ongoing challenges -->
<div *ngIf="routerPublic.url === allChallengesRoutePathCommon" [@.disabled]="true">
<h4 class="fw-light">All challenges</h4>
<mat-tab-group>
<mat-tab label="Ongoing ({{ ongoingChallenges.length }})" id="ongoing-challenges">
<ng-template matTabContent>
<div *ngIf="ongoingChallenges.length === 0" class="none fw-light fs-16">No challenges found.</div>
<div class="row pd-lr-20">
<div class="col s12 m4 l3" *ngFor="let challenge of ongoingChallenges">
<a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge.id]">
<app-challengecard [challenge]="challenge"></app-challengecard>
</a>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab class="fs-16" label="Upcoming ({{ upcomingChallenges.length }})">
<ng-template matTabContent>
<!-- upcoming challenges -->
<div *ngIf="upcomingChallenges.length === 0" class="none fw-light fs-16">No challenges found.</div>
<div class="row pd-lr-20">
<div class="col s12 m4 l3" *ngFor="let challenge of upcomingChallenges">
<a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge.id]">
<app-challengecard [challenge]="challenge"></app-challengecard>
</a>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Past ({{ pastChallenges.length }})">
<ng-template matTabContent>
<!-- past challenges -->
<div *ngIf="pastChallenges.length === 0" class="none fw-light fs-16">No challenges found.</div>
<div class="row pd-lr-20">
<div class="col s12 m4 l3" *ngFor="let challenge of pastChallenges">
<a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge.id]">
<app-challengecard [challenge]="challenge"></app-challengecard>
</a>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>
<!-- my challenges -->
<div *ngIf="routerPublic.url === myChallengesRoutePathCommon" [@.disabled]="true">
<h4 class="fw-light">Hosted challenges</h4>
<mat-tab-group>
<mat-tab label="Ongoing ({{ filteredOngoingChallenges.length }})">
<ng-template matTabContent>
<div *ngIf="!filteredOngoingChallenges.length">
<p class="fw-light fs-16">
You haven't hosted any challenge. Please
<a [routerLink]="hostTeamsRoutePathCommon" class="highlight-link">click here</a> to get started.
</p>
</div>
<div class="row pd-lr-20" *ngIf="filteredOngoingChallenges.length">
<div class="col s12 m3" *ngFor="let challenge of filteredOngoingChallenges">
<a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
<app-challengecard [challenge]="challenge"></app-challengecard>
</a>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Upcoming ({{ filteredUpcomingChallenges.length }})">
<ng-template matTabContent>
<div *ngIf="!filteredUpcomingChallenges.length">
<p class="fw-light fs-16">
No upcoming hosted challenges found. Please
<a [routerLink]="hostTeamsRoutePathCommon" class="highlight-link">click here</a> to get started.
</p>
</div>
<div class="row pd-lr-20" *ngIf="filteredUpcomingChallenges.length">
<div class="col s12 m3" *ngFor="let challenge of filteredUpcomingChallenges">
<a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
<app-challengecard [challenge]="challenge"></app-challengecard>
</a>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Past ({{ filteredPastChallenges.length }})">
<ng-template matTabContent>
<div *ngIf="!filteredPastChallenges.length">
<p class="fw-light fs-16">No past hosted challenges found.</p>
</div>
<div class="row pd-lr-20" *ngIf="filteredPastChallenges.length">
<div class="col s12 m3" *ngFor="let challenge of filteredPastChallenges">
<a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
<app-challengecard [challenge]="challenge"></app-challengecard>
</a>
</div>
</div>
</ng-template>
</mat-tab>
<!-- Unapproved challenges -->
<mat-tab class="unapproved" label="Unapproved ({{ unapprovedChallengeList.length }})">
<ng-template matTabContent>
<div *ngIf="!unapprovedChallengeList.length">
<p class="fw-light fs-16">No unapproved challenges found.</p>
</div>
<div class="row pd-lr-20" *ngIf="unapprovedChallengeList.length">
<div class="col s12 m3" *ngFor="let challenge of unapprovedChallengeList">
<a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
<app-challengecard [challenge]="challenge"></app-challengecard>
</a>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>
<!-- my participated challenges -->
<div *ngIf="routerPublic.url === myParticipatedChallengesRoutePathCommon" [@.disabled]="true">
<h4 class="fw-light">Participated challenges</h4>
<mat-tab-group>
<mat-tab label="Ongoing ({{ filteredOngoingChallenges.length }})">
<ng-template matTabContent>
<div *ngIf="!filteredOngoingChallenges.length">
<p class="fw-light fs-16">
You haven't participated in any challenge. Please
<a [routerLink]="allChallengesRoutePathCommon" class="highlight-link">click here</a> to get started.
</p>
</div>
<div class="row pd-lr-20" *ngIf="filteredOngoingChallenges.length">
<div class="col s12 m3" *ngFor="let challenge of filteredOngoingChallenges">
<a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
<app-challengecard [challenge]="challenge"></app-challengecard>
</a>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Past ({{ filteredPastChallenges.length }})">
<ng-template matTabContent>
<div *ngIf="!filteredPastChallenges.length">
<p class="fw-light fs-16">You haven't participated in any of the past challenges.</p>
</div>
<div class="row pd-lr-20" *ngIf="filteredPastChallenges.length">
<div class="col s12 m3" *ngFor="let challenge of filteredPastChallenges">
<a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
<app-challengecard [challenge]="challenge"></app-challengecard>
</a>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>
</section>