<div
    class="absolute inset-0 flex min-w-0 flex-col overflow-y-auto"
    cdkScrollable
>
    <!-- Header -->
    <div
        class="dark relative flex-0 overflow-hidden bg-gray-800 px-4 py-8 sm:p-16"
    >
        <!-- Background -->
        <!-- Rings -->
        <!-- prettier-ignore -->
        <svg class="absolute inset-0 pointer-events-none"
             viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
            <g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
                <circle r="234" cx="196" cy="23"></circle>
                <circle r="234" cx="790" cy="491"></circle>
            </g>
        </svg>
        <div class="relative z-10 flex flex-col items-center">
            <h2 class="text-xl font-semibold">FUSE ACADEMY</h2>
            <div
                class="mt-1 text-center text-4xl font-extrabold leading-tight tracking-tight sm:text-7xl"
            >
                What do you want to learn today?
            </div>
            <div
                class="text-secondary mt-6 max-w-2xl text-center tracking-tight sm:text-2xl"
            >
                Our courses will step you through the process of a building
                small applications, or adding new features to existing
                applications.
            </div>
        </div>
    </div>

    <!-- Main -->
    <div class="flex flex-auto p-6 sm:p-10">
        <div
            class="mx-auto flex w-full max-w-xs flex-auto flex-col sm:max-w-5xl"
        >
            <!-- Filters -->
            <div
                class="flex w-full max-w-xs flex-col items-center justify-between sm:max-w-none sm:flex-row"
            >
                <mat-form-field
                    class="w-full sm:w-36"
                    [subscriptSizing]="'dynamic'"
                >
                    <mat-select
                        [value]="'all'"
                        (selectionChange)="filterByCategory($event)"
                    >
                        <mat-option [value]="'all'">All</mat-option>
                        @for (
                            category of categories;
                            track trackByFn($index, category)
                        ) {
                            <mat-option [value]="category.slug">{{
                                category.title
                            }}</mat-option>
                        }
                    </mat-select>
                </mat-form-field>
                <mat-form-field
                    class="mt-4 w-full sm:ml-4 sm:mt-0 sm:w-72"
                    [subscriptSizing]="'dynamic'"
                >
                    <mat-icon
                        matPrefix
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:magnifying-glass'"
                    ></mat-icon>
                    <input
                        (input)="filterByQuery(query.value)"
                        placeholder="Search by title or description"
                        matInput
                        #query
                    />
                </mat-form-field>
                <mat-slide-toggle
                    class="mt-8 sm:ml-auto sm:mt-0"
                    [color]="'primary'"
                    (change)="toggleCompleted($event)"
                >
                    Hide completed
                </mat-slide-toggle>
            </div>
            <!-- Courses -->
            @if (this.filteredCourses.length) {
                <div
                    class="mt-8 grid grid-cols-1 gap-8 sm:mt-10 sm:grid-cols-2 lg:grid-cols-3"
                >
                    @for (
                        course of filteredCourses;
                        track trackByFn($index, course)
                    ) {
                        <!-- Course -->
                        <div
                            class="bg-card flex h-96 flex-col overflow-hidden rounded-2xl shadow"
                        >
                            <div class="flex flex-col p-6">
                                <div class="flex items-center justify-between">
                                    <!-- Course category -->
                                    @if (
                                        course.category
                                            | fuseFindByKey
                                                : 'slug'
                                                : categories;
                                        as category
                                    ) {
                                        <div
                                            class="rounded-full px-3 py-0.5 text-sm font-semibold"
                                            [ngClass]="{
                                                'bg-blue-100 text-blue-800 dark:bg-blue-500 dark:text-blue-50':
                                                    category.slug === 'web',
                                                'bg-green-100 text-green-800 dark:bg-green-500 dark:text-green-50':
                                                    category.slug === 'android',
                                                'bg-pink-100 text-pink-800 dark:bg-pink-500 dark:text-pink-50':
                                                    category.slug === 'cloud',
                                                'bg-amber-100 text-amber-800 dark:bg-amber-500 dark:text-amber-50':
                                                    category.slug ===
                                                    'firebase',
                                            }"
                                        >
                                            {{ category.title }}
                                        </div>
                                    }
                                    <!-- Completed at least once -->
                                    <div class="flex items-center">
                                        @if (course.progress.completed > 0) {
                                            <mat-icon
                                                class="text-green-600 icon-size-5"
                                                [svgIcon]="
                                                    'heroicons_solid:check-badge'
                                                "
                                                [matTooltip]="
                                                    'You completed this course at least once'
                                                "
                                            ></mat-icon>
                                        }
                                    </div>
                                </div>
                                <!-- Course title & description -->
                                <div class="mt-4 text-lg font-medium">
                                    {{ course.title }}
                                </div>
                                <div class="text-secondary mt-0.5 line-clamp-2">
                                    {{ course.description }}
                                </div>
                                <div class="my-6 h-1 w-12 border-t-2"></div>
                                <!-- Course time -->
                                <div
                                    class="text-secondary flex items-center text-md leading-5"
                                >
                                    <mat-icon
                                        class="text-hint icon-size-5"
                                        [svgIcon]="'heroicons_solid:clock'"
                                    ></mat-icon>
                                    <div class="ml-1.5">
                                        {{ course.duration }} minutes
                                    </div>
                                </div>
                                <!-- Course completion -->
                                <div
                                    class="text-secondary mt-2 flex items-center text-md leading-5"
                                >
                                    <mat-icon
                                        class="text-hint icon-size-5"
                                        [svgIcon]="
                                            'heroicons_solid:academic-cap'
                                        "
                                    ></mat-icon>
                                    @if (course.progress.completed === 0) {
                                        <div class="ml-1.5">
                                            Never completed
                                        </div>
                                    }
                                    @if (course.progress.completed > 0) {
                                        <div class="ml-1.5">
                                            <span>Completed</span>
                                            <span class="ml-1">
                                                <!-- Once -->
                                                @if (
                                                    course.progress
                                                        .completed === 1
                                                ) {
                                                    once
                                                }
                                                <!-- Twice -->
                                                @if (
                                                    course.progress
                                                        .completed === 2
                                                ) {
                                                    twice
                                                }
                                                <!-- Others -->
                                                @if (
                                                    course.progress.completed >
                                                    2
                                                ) {
                                                    {{
                                                        course.progress
                                                            .completed
                                                    }}
                                                    {{
                                                        course.progress
                                                            .completed
                                                            | i18nPlural
                                                                : {
                                                                      '=0': 'time',
                                                                      '=1': 'time',
                                                                      other: 'times',
                                                                  }
                                                    }}
                                                }
                                            </span>
                                        </div>
                                    }
                                </div>
                            </div>
                            <!-- Footer -->
                            <div class="mt-auto flex w-full flex-col">
                                <!-- Course progress -->
                                <div class="relative h-0.5">
                                    <div
                                        class="absolute inset-x-0 z-10 -mt-3 h-6"
                                        [matTooltip]="
                                            course.progress.currentStep /
                                                course.totalSteps | percent
                                        "
                                        [matTooltipPosition]="'above'"
                                        [matTooltipClass]="'-mb-0.5'"
                                    ></div>
                                    <mat-progress-bar
                                        class="h-0.5"
                                        [value]="
                                            (100 *
                                                course.progress.currentStep) /
                                            course.totalSteps
                                        "
                                    ></mat-progress-bar>
                                </div>

                                <!-- Course launch button -->
                                <div
                                    class="bg-gray-50 px-6 py-4 text-right dark:bg-transparent"
                                >
                                    <a
                                        mat-stroked-button
                                        [routerLink]="[course.id]"
                                    >
                                        <span class="inline-flex items-center">
                                            <!-- Not started -->
                                            @if (
                                                course.progress.currentStep ===
                                                0
                                            ) {
                                                <!-- Never completed -->
                                                @if (
                                                    course.progress
                                                        .completed === 0
                                                ) {
                                                    <span>Start</span>
                                                }
                                                <!-- Completed before -->
                                                @if (
                                                    course.progress.completed >
                                                    0
                                                ) {
                                                    <span>Start again</span>
                                                }
                                            }

                                            <!-- Started -->
                                            @if (
                                                course.progress.currentStep > 0
                                            ) {
                                                <span>Continue</span>
                                            }

                                            <mat-icon
                                                class="ml-1.5 icon-size-5"
                                                [svgIcon]="
                                                    'heroicons_solid:arrow-small-right'
                                                "
                                            ></mat-icon>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            } @else {
                <div
                    class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
                >
                    <mat-icon
                        class="icon-size-24"
                        [svgIcon]="'heroicons_outline:document-search'"
                    ></mat-icon>
                    <div
                        class="text-secondary mt-6 text-2xl font-semibold tracking-tight"
                    >
                        No courses found!
                    </div>
                </div>
            }

            <!-- No courses -->
        </div>
    </div>
</div>
