<div class="absolute inset-0 flex min-w-0 flex-col overflow-hidden">
    <mat-drawer-container class="h-full flex-auto">
        <!-- Drawer -->
        <mat-drawer
            class="w-90 dark:bg-gray-900"
            [autoFocus]="false"
            [mode]="drawerMode"
            [opened]="drawerOpened"
            #matDrawer
        >
            <div class="flex flex-col items-start border-b p-8">
                <!-- Back to courses -->
                <a
                    class="inline-flex items-center leading-6 text-primary hover:underline"
                    [routerLink]="['..']"
                >
                    <span class="inline-flex items-center">
                        <mat-icon
                            class="text-current icon-size-5"
                            [svgIcon]="'heroicons_solid:arrow-small-left'"
                        ></mat-icon>
                        <span class="ml-1.5 font-medium leading-5"
                            >Back to courses</span
                        >
                    </span>
                </a>
                <!-- Course category -->
                @if (
                    course.category | fuseFindByKey: 'slug' : categories;
                    as category
                ) {
                    <div
                        class="mt-7 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>
                }
                <!-- Course title & description -->
                <div class="mt-3 text-2xl font-semibold">
                    {{ course.title }}
                </div>
                <div class="text-secondary">{{ course.description }}</div>
                <!-- Course time -->
                <div
                    class="text-secondary mt-6 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>
            </div>

            <!-- Steps -->
            <div class="px-8 py-2">
                <ol>
                    @for (
                        step of course.steps;
                        track trackByFn($index, step);
                        let last = $last
                    ) {
                        <li
                            class="group relative py-6"
                            [class.current-step]="step.order === currentStep"
                        >
                            @if (!last) {
                                <div
                                    class="absolute left-4 top-6 -ml-px h-full w-0.5"
                                    [ngClass]="{
                                        'bg-primary': step.order < currentStep,
                                        'bg-gray-300 dark:bg-gray-600':
                                            step.order >= currentStep,
                                    }"
                                ></div>
                            }
                            <div
                                class="relative flex cursor-pointer items-start"
                                (click)="goToStep(step.order)"
                            >
                                <div
                                    class="bg-card flex h-8 w-8 flex-0 items-center justify-center rounded-full ring-2 ring-inset dark:bg-default"
                                    [ngClass]="{
                                        'bg-primary text-on-primary ring-transparent group-hover:bg-primary-800 dark:bg-primary':
                                            step.order < currentStep,
                                        'ring-primary':
                                            step.order === currentStep,
                                        'ring-gray-300 group-hover:ring-gray-400 dark:ring-gray-600':
                                            step.order > currentStep,
                                    }"
                                >
                                    <!-- Check icon, show if the step is completed -->
                                    @if (step.order < currentStep) {
                                        <mat-icon
                                            class="text-current icon-size-5"
                                            [svgIcon]="'heroicons_solid:check'"
                                        ></mat-icon>
                                    }
                                    <!-- Step order, show if the step is the current step -->
                                    @if (step.order === currentStep) {
                                        <div
                                            class="text-md font-semibold text-primary dark:text-primary-500"
                                        >
                                            {{ step.order + 1 }}
                                        </div>
                                    }
                                    <!-- Step order, show if the step is not completed -->
                                    @if (step.order > currentStep) {
                                        <div
                                            class="text-hint text-md font-semibold group-hover:text-secondary"
                                        >
                                            {{ step.order + 1 }}
                                        </div>
                                    }
                                </div>
                                <div class="ml-4">
                                    <div class="font-medium leading-4">
                                        {{ step.title }}
                                    </div>
                                    <div
                                        class="text-secondary mt-1.5 text-md leading-4"
                                    >
                                        {{ step.subtitle }}
                                    </div>
                                </div>
                            </div>
                        </li>
                    }
                </ol>
            </div>
        </mat-drawer>

        <!-- Drawer content -->
        <mat-drawer-content class="flex flex-col overflow-hidden">
            <!-- Header -->
            <div
                class="bg-card flex flex-0 items-center border-b py-2 pl-4 pr-6 dark:bg-transparent sm:py-4 md:pl-6 md:pr-8 lg:hidden lg:border-b-0"
            >
                <!-- Title & Actions -->
                <a mat-icon-button [routerLink]="['..']">
                    <mat-icon
                        [svgIcon]="'heroicons_outline:arrow-small-left'"
                    ></mat-icon>
                </a>
                <h2
                    class="ml-2.5 truncate text-md font-medium tracking-tight sm:text-xl"
                >
                    {{ course.title }}
                </h2>
            </div>
            <mat-progress-bar
                class="hidden h-0.5 w-full flex-0 lg:block"
                [value]="(100 * (currentStep + 1)) / course.totalSteps"
            ></mat-progress-bar>

            <!-- Main -->
            <div class="flex-auto overflow-y-auto" cdkScrollable>
                <!-- Steps -->
                <mat-tab-group
                    class="fuse-mat-no-header"
                    [animationDuration]="'200'"
                    #courseSteps
                >
                    @for (step of course.steps; track trackByFn($index, step)) {
                        <mat-tab>
                            <ng-template matTabContent>
                                <div
                                    class="bg-card prose prose-sm mx-auto max-w-3xl overflow-hidden rounded-2xl p-6 shadow sm:my-2 sm:p-10 sm:py-12 lg:mt-4"
                                    [innerHTML]="step.content"
                                ></div>
                            </ng-template>
                        </mat-tab>
                    }
                </mat-tab-group>

                <!-- Navigation - Desktop -->
                <div class="sticky bottom-4 z-10 hidden p-4 lg:flex">
                    <div
                        class="mx-auto flex items-center justify-center rounded-full bg-primary p-2 shadow-lg"
                    >
                        <button
                            class="flex-0"
                            mat-flat-button
                            [color]="'primary'"
                            (click)="goToPreviousStep()"
                        >
                            <span class="inline-flex items-center">
                                <mat-icon
                                    class="mr-2"
                                    [svgIcon]="
                                        'heroicons_outline:arrow-long-left'
                                    "
                                ></mat-icon>
                                <span class="mr-1">Prev</span>
                            </span>
                        </button>
                        <div
                            class="mx-2.5 flex items-center justify-center font-medium leading-5 text-on-primary"
                        >
                            <span>{{ currentStep + 1 }}</span>
                            <span class="text-hint mx-0.5">/</span>
                            <span>{{ course.totalSteps }}</span>
                        </div>
                        <button
                            class="flex-0"
                            mat-flat-button
                            [color]="'primary'"
                            (click)="goToNextStep()"
                        >
                            <span class="inline-flex items-center">
                                <span class="ml-1">Next</span>
                                <mat-icon
                                    class="ml-2"
                                    [svgIcon]="
                                        'heroicons_outline:arrow-long-right'
                                    "
                                ></mat-icon>
                            </span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Progress & Navigation - Mobile -->
            <div class="bg-card flex items-center border-t p-4 lg:hidden">
                <button mat-icon-button (click)="matDrawer.toggle()">
                    <mat-icon [svgIcon]="'heroicons_outline:bars-4'"></mat-icon>
                </button>
                <div
                    class="ml-1 flex items-center justify-center font-medium leading-5 lg:ml-2"
                >
                    <span>{{ currentStep + 1 }}</span>
                    <span class="text-hint mx-0.5">/</span>
                    <span>{{ course.totalSteps }}</span>
                </div>
                <mat-progress-bar
                    class="ml-6 flex-auto rounded-full"
                    [value]="(100 * (currentStep + 1)) / course.totalSteps"
                ></mat-progress-bar>
                <button
                    class="ml-4"
                    mat-icon-button
                    (click)="goToPreviousStep()"
                >
                    <mat-icon
                        [svgIcon]="'heroicons_outline:arrow-long-left'"
                    ></mat-icon>
                </button>
                <button class="ml-0.5" mat-icon-button (click)="goToNextStep()">
                    <mat-icon
                        [svgIcon]="'heroicons_outline:arrow-long-right'"
                    ></mat-icon>
                </button>
            </div>
        </mat-drawer-content>
    </mat-drawer-container>
</div>
