@sunbird-cb/toc 0.0.11 → 0.0.13

package/fesm2022/sunbird-cb-toc.mjs

@@ -701,11 +701,11 @@ class WidgetContentService {
         const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
         if (primaryCategory && this.isResource(primaryCategory)) {
             if (!forPreview) {
-                url = `/apis/proxies/v8/extended/content/v1/read/${contentId}`;
+                url = `/apis/proxies/v8/action/content/v3/read/${contentId}`;
             }
             else {
                 if (window.location.href.includes('editMode=true') && window.location.href.includes('_rc')) {
-                    url = `/apis/proxies/v8/extended/content/v1/read/${contentId}`;
+                    url = `/apis/proxies/v8/action/content/v3/read/${contentId}`;
                 }
                 else {
                     url = `/api/content/v1/read/${contentId}`;
@@ -1635,7 +1635,6 @@ class AppTocService {
     resetContentData() {
         this.hashmap = {};
         this.hashmapUpdated.next(null);
-        console.log('Content data cleared - hashmap reset');
     }
     fetchContentParents(contentId) {
         // return this.http.get<NsContent.IContentMinimal[]>(
@@ -1977,7 +1976,14 @@ class AppTocService {
                     child.primaryCategory === NsContent.EPrimaryCategory.COMP_ASSESSMENT;
                 const isLearningPathway = rootCourseCategory === 'Learning Pathway';
                 // Check if content is mandatory (isMandatory flag or mandatory property)
-                const isMandatory = child.isMandatory === true || child.mandatory === true;
+                // By default, courses are mandatory unless isMandatory is explicitly false
+                let isMandatory = true;
+                if (typeof child.isMandatory !== 'undefined') {
+                    isMandatory = child.isMandatory !== false;
+                }
+                else if (typeof child.mandatory !== 'undefined') {
+                    isMandatory = child.mandatory !== false;
+                }
                 // Use passed parentId (from iteration context) or fallback to child?.parent (from API)
                 // This ensures nested children (e.g., assessments inside courses) have correct parent references
                 const correctParentId = hierarchyData.identifier || child?.parent;
@@ -2023,14 +2029,6 @@ class AppTocService {
                     child.primaryCategory === 'Standalone Assessment' ||
                     child.mimeType === 'application/vnd.sunbird.questionset';
                 if (isAssessment) {
-                    console.log(`📋 Adding assessment to hashmap: "${child.name}"`, {
-                        identifier: child.identifier,
-                        primaryCategory: child.primaryCategory,
-                        parent: correctParentId,
-                        originalParent: child?.parent,
-                        parentName: hierarchyData.name,
-                        parentCategory: hierarchyData.primaryCategory
-                    });
                 }
                 this.hashmap[child.identifier] = localMap;
             });
@@ -2162,11 +2160,6 @@ class AppTocService {
             console.warn('⚠️  Hashmap is empty - cannot compute milestone locking');
             return;
         }
-        console.log('\n═══════════════════════════════════════════════════════════');
-        console.log('🔒 MILESTONE LOCKING COMPUTATION START');
-        console.log('═══════════════════════════════════════════════════════════');
-        console.log('User enrolled:', isEnrolled);
-        console.log('Hashmap size:', Object.keys(this.hashmap).length);
         // STEP 1: Find all milestones and sort by index
         const milestoneEntries = Object.keys(this.hashmap)
             .filter(key => {
@@ -2184,11 +2177,8 @@ class AppTocService {
             return numA - numB;
         });
         if (milestoneEntries.length === 0) {
-            console.log('ℹ️  No milestones found - skipping milestone locking');
-            console.log('═══════════════════════════════════════════════════════════\n');
             return;
         }
-        console.log(`\n📍 Found ${milestoneEntries.length} milestones:`);
         milestoneEntries.forEach((id, i) => {
             console.log(`   M${i + 1}: ${this.hashmap[id].name || id}`);
         });
@@ -2207,32 +2197,30 @@ class AppTocService {
             });
             this.hashmap = { ...this.hashmap };
             this.hashmapUpdated.next({ timestamp: Date.now(), hashmap: this.hashmap });
-            console.log('═══════════════════════════════════════════════════════════\n');
             return;
         }
         // STEP 3: Check pre-assessment completion
         const isPreAssessmentCompleted = this.checkPreAssessmentCompletion();
-        console.log(`\n📝 Pre-assessment: ${isPreAssessmentCompleted ? '✅ COMPLETE' : '❌ INCOMPLETE'}`);
+        console.log('🔍 [MILESTONE LOCK] Pre-assessment completed:', isPreAssessmentCompleted ? '✅ YES' : '❌ NO');
         // STEP 4: Compute locking for each milestone
-        console.log('\n🔐 Computing milestone locks:');
-        console.log('─────────────────────────────────────────────────────────────');
         milestoneEntries.forEach((milestoneId, index) => {
             const milestone = this.hashmap[milestoneId];
             if (!milestone)
                 return;
             const milestoneNum = index + 1;
-            console.log(`\n📌 Milestone ${milestoneNum} (${milestone.name || milestoneId}):`);
             // MILESTONE 1: Unlocks when pre-assessment complete
             if (index === 0) {
                 const isLocked = !isPreAssessmentCompleted;
                 this.hashmap[milestoneId].computedIsLocked = isLocked;
                 this.hashmap[milestoneId].unlockMessage = isLocked ?
                     'Complete the preliminary assessment to unlock this milestone' : '';
-                console.log(`   ${isLocked ? '🔒 LOCKED' : '🔓 UNLOCKED'}`);
-                console.log(`   Reason: Pre-assessment ${isPreAssessmentCompleted ? 'complete' : 'incomplete'}`);
+                console.log(`📌 [MILESTONE 1] ${milestone.name}:`, {
+                    isPreAssessmentCompleted,
+                    isLocked: isLocked ? '🔒 LOCKED' : '🔓 UNLOCKED',
+                    unlockMessage: this.hashmap[milestoneId].unlockMessage
+                });
                 // For unlocked M1, check assessment locking
                 if (!isLocked) {
-                    console.log(`   ✓ Checking assessment lock...`);
                     this.computeAssessmentLockingInMilestone(milestoneId);
                 }
                 else {
@@ -2251,27 +2239,38 @@ class AppTocService {
                 const prevStatus = Number(previousMilestone.status) || 0;
                 const prevCompletedLeafNodes = Number(previousMilestone.completedLeafNodesCount) || 0;
                 const prevLeafNodesCount = Number(previousMilestone.leafNodesCount) || 0;
+                console.log(`🔍 [MILESTONE ${milestoneNum}] Checking if previous M${index} is complete:`, {
+                    previousMilestoneName: previousMilestone.name,
+                    completionPercentage: prevCompletionPct,
+                    completionStatus: prevCompletionStatus,
+                    status: prevStatus,
+                    completedLeafNodes: prevCompletedLeafNodes,
+                    leafNodesCount: prevLeafNodesCount
+                });
                 let previousMilestoneComplete = prevCompletionPct >= 100 ||
                     prevCompletionStatus === 2 ||
                     prevStatus === 2 ||
                     (prevLeafNodesCount > 0 && prevCompletedLeafNodes >= prevLeafNodesCount);
+                console.log(`   Primary check result: ${previousMilestoneComplete ? '✅ COMPLETE' : '❌ INCOMPLETE'}`);
                 // Fallback: Check individual items
                 if (!previousMilestoneComplete) {
+                    console.log(`   Running fallback check (mandatory content + assessment)...`);
                     const isPreviousMilestoneAssessmentComplete = this.checkMilestoneAssessmentComplete(previousMilestoneId);
                     const isPreviousMilestoneMandatoryComplete = this.checkMilestoneMandatoryContentComplete(previousMilestoneId);
                     previousMilestoneComplete = isPreviousMilestoneAssessmentComplete && isPreviousMilestoneMandatoryComplete;
-                    console.log(`   Fallback check: mandatory=${isPreviousMilestoneMandatoryComplete}, assessment=${isPreviousMilestoneAssessmentComplete}`);
+                    console.log(`   Fallback check: mandatory=${isPreviousMilestoneMandatoryComplete}, assessment=${isPreviousMilestoneAssessmentComplete}, result=${previousMilestoneComplete}`);
                 }
                 const isLocked = !previousMilestoneComplete;
                 this.hashmap[milestoneId].computedIsLocked = isLocked;
                 this.hashmap[milestoneId].unlockMessage = isLocked ?
                     `Complete all mandatory content and assessment in Milestone ${index} to unlock this milestone` : '';
-                console.log(`   ${isLocked ? '🔒 LOCKED' : '🔓 UNLOCKED'}`);
-                console.log(`   Reason: Previous milestone ${previousMilestoneComplete ? 'complete' : 'incomplete'}`);
-                console.log(`   Previous M${index} progress: ${prevCompletionPct}%`);
+                console.log(`   📊 [MILESTONE ${milestoneNum}] ${milestone.name}:`, {
+                    previousMilestoneComplete: previousMilestoneComplete ? '✅ YES' : '❌ NO',
+                    isLocked: isLocked ? '🔒 LOCKED' : '🔓 UNLOCKED',
+                    unlockMessage: this.hashmap[milestoneId].unlockMessage
+                });
                 // For unlocked milestones, check assessment locking
                 if (!isLocked) {
-                    console.log(`   ✓ Checking assessment lock...`);
                     this.computeAssessmentLockingInMilestone(milestoneId);
                 }
                 else {
@@ -2285,6 +2284,43 @@ class AppTocService {
                 console.log(`   🔒 LOCKED (previous milestone not found)`);
             }
         });
+        // STEP 4.5: Debug log milestone leaf nodes and their completion status
+        console.log('\n📊 Milestone Leaf Nodes Completion Status:');
+        milestoneEntries.forEach((milestoneId, index) => {
+            const milestone = this.hashmap[milestoneId];
+            if (!milestone)
+                return;
+            console.log(`   Leaf Nodes Array:`, milestone.leafNodes);
+            console.log(`   Leaf Nodes Count: ${milestone.leafNodesCount}`);
+            console.log(`   Completed Leaf Nodes Count: ${milestone.completedLeafNodesCount || 0}`);
+            console.log(`   Completion %: ${milestone.completionPercentage}%`);
+            if (milestone.leafNodes && milestone.leafNodes.length > 0) {
+                console.log(`   Individual Leaf Node Status:`);
+                milestone.leafNodes.forEach((leafId, i) => {
+                    const leafData = this.hashmap[leafId];
+                    if (leafData) {
+                        const isComplete = leafData.completionStatus === 2 ||
+                            leafData.status === 2 ||
+                            (leafData.completionPercentage && leafData.completionPercentage >= 100) ||
+                            (leafData.progress && leafData.progress >= 100);
+                        console.log(`      ${i + 1}. ${leafData.name || leafId} [${leafData.primaryCategory}]:`, {
+                            id: leafId,
+                            completionStatus: leafData.completionStatus,
+                            status: leafData.status,
+                            completionPercentage: leafData.completionPercentage,
+                            progress: leafData.progress,
+                            isComplete: isComplete ? '✅' : '❌'
+                        });
+                    }
+                    else {
+                        console.log(`      ${i + 1}. ⚠️ Leaf node ${leafId} NOT FOUND in hashmap`);
+                    }
+                });
+            }
+            else {
+                console.log(`   ⚠️ No leaf nodes defined for this milestone`);
+            }
+        });
         // STEP 5: Compute parent milestone lock status for ALL children
         console.log('\n🔗 Computing parent milestone locks for all children...');
         Object.keys(this.hashmap).forEach(key => {
@@ -2316,9 +2352,7 @@ class AppTocService {
             }
         });
         // STEP 6: Trigger hashmap update
-        console.log('\n─────────────────────────────────────────────────────────────');
         console.log('✅ Milestone locking computation COMPLETE');
-        console.log('═══════════════════════════════════════════════════════════\n');
         this.hashmap = { ...this.hashmap };
         this.hashmapUpdated.next({ timestamp: Date.now(), hashmap: this.hashmap });
     }
@@ -2343,6 +2377,7 @@ class AppTocService {
      * Pre-assessment is typically a Course Assessment at the root level of Learning Pathway (before milestones)
      */
     checkPreAssessmentCompletion() {
+        console.log('🔍 [PRE-ASSESSMENT] Starting pre-assessment completion check');
         // Find the Learning Pathway root
         let learningPathwayId = null;
         for (const key of Object.keys(this.hashmap)) {
@@ -2352,100 +2387,79 @@ class AppTocService {
                 break;
             }
         }
-        console.log('Checking pre-assessment completion. Learning Pathway ID:', learningPathwayId);
-        // PRIORITY 1: Look for items explicitly marked as pre-assessment
+        // 1. Look for items explicitly marked as pre-assessment
         for (const key of Object.keys(this.hashmap)) {
             const item = this.hashmap[key];
             if (item.isPreAssessment === true) {
-                // Must check for actual completion - not just any value
                 const isCompleted = (item.completionStatus === 2 || item.status === 2 ||
                     (item.completionPercentage !== undefined && item.completionPercentage >= 100) ||
                     (item.progress !== undefined && item.progress >= 100));
-                console.log(`✅ Pre-assessment found (isPreAssessment flag): ${key}`, {
-                    name: item.name,
-                    completionStatus: item.completionStatus,
-                    status: item.status,
-                    completionPercentage: item.completionPercentage,
-                    progress: item.progress,
-                    isCompleted,
-                    // Show ALL fields to debug what's available
-                    allData: JSON.stringify(item, null, 2)
-                });
-                // Pre-assessment exists - return its completion status (true/false)
                 return isCompleted;
             }
         }
-        // PRIORITY 2: Find pre-assessment in hashmap - direct child of Learning Pathway that is NOT a milestone
-        // Check for first non-milestone child of Learning Pathway
+        // 2. Find pre-assessment in hashmap - direct child of Learning Pathway that is NOT a milestone
         for (const key of Object.keys(this.hashmap)) {
             const item = this.hashmap[key];
-            // Check if this is a direct child of the Learning Pathway
             if (item.parent !== learningPathwayId)
                 continue;
-            // Skip milestones
-            if (item.isMilestone)
+            if (item.isMilestone || item.primaryCategory === 'Milestone')
                 continue;
-            // This is a non-milestone direct child - it's the pre-assessment
-            // Must check for actual completion - not just any value
             const isCompleted = (item.completionStatus === 2 || item.status === 2 ||
                 (item.completionPercentage !== undefined && item.completionPercentage >= 100) ||
                 (item.progress !== undefined && item.progress >= 100));
-            console.log(`✅ Pre-assessment found (first non-milestone child): ${key}`, {
-                name: item.name,
-                completionStatus: item.completionStatus,
-                status: item.status,
-                completionPercentage: item.completionPercentage,
-                progress: item.progress,
-                isCompleted,
-                // Show ALL fields to debug what's available
-                allData: JSON.stringify(item, null, 2)
-            });
-            // Pre-assessment exists - return its completion status (true/false)
             return isCompleted;
         }
-        // CRITICAL: If we reach here, no pre-assessment was found in the hashmap
-        // This could mean either:
-        // 1. There IS no pre-assessment (unlock M1 by default)
-        // 2. The hashmap hasn't been populated yet (should lock M1 until data is ready)
-        // To be safe, check if ANY children exist at all
-        const hasAnyChildren = Object.keys(this.hashmap).some(key => this.hashmap[key].parent === learningPathwayId);
-        if (!hasAnyChildren) {
-            // Hashmap not populated yet - lock M1 until data is ready
-            console.log('⚠️ No children found in hashmap yet - locking M1 until data is ready');
-            return false;
-        }
-        // Hashmap is populated but no pre-assessment found - allow M1 to unlock
-        console.log('No pre-assessment found in fully populated hashmap - allowing M1 to be unlocked by default');
-        return true;
+        // 3. If we reach here, enforce: M1 is always locked until pre-assessment is completed
+        // This prevents accidental unlocking if pre-assessment node is missing or not flagged
+        return false;
     }
     /**
      * Check if a milestone's assessment is completed
-     * Searches for any assessment type (Course Assessment, Final Assessment, etc.) that belongs to this milestone
+     * ONLY checks the milestone assessment (Course Assessment that is a direct child of the milestone)
+     * Does NOT check assessments nested inside courses within the milestone
      */
     checkMilestoneAssessmentComplete(milestoneId) {
         const milestone = this.hashmap[milestoneId];
-        // Check all items in hashmap that are assessments and belong to this milestone
+        let foundMilestoneAssessment = false;
+        let isMilestoneAssessmentComplete = false;
+        console.log(`🔍 Checking milestone assessment for: ${milestoneId}`);
+        // Check all items in hashmap that are DIRECT children of this milestone
         for (const key of Object.keys(this.hashmap)) {
             const item = this.hashmap[key];
-            // Check if this is an assessment type
-            const isAssessmentType = item.primaryCategory === 'Course Assessment' ||
+            // CRITICAL: Only check DIRECT children (parent === milestoneId)
+            if (item.parent !== milestoneId)
+                continue;
+            // Check if this is a milestone assessment (Course Assessment as direct child of milestone)
+            const isMilestoneAssessment = item.primaryCategory === 'Course Assessment' ||
                 item.primaryCategory === 'Final Assessment' ||
-                item.primaryCategory === 'Practice Question Set' ||
-                item.courseCategory === 'Course Assessment' ||
-                item.courseCategory === 'Final Assessment' ||
-                (item.name && item.name.toLowerCase().includes('assessment'));
-            if (!isAssessmentType)
+                item.primaryCategory === 'Standalone Assessment';
+            if (!isMilestoneAssessment)
                 continue;
-            // Check if this assessment belongs to this milestone
-            if (this.isChildOfMilestone(key, milestoneId)) {
-                const isCompleted = item.completionStatus === 2 || item.status === 2 || item.completionPercentage >= 100 || item.progress >= 100;
-                if (isCompleted) {
-                    return true;
-                }
+            // Found the milestone assessment
+            foundMilestoneAssessment = true;
+            const isCompleted = item.completionStatus === 2 || item.status === 2 || item.completionPercentage >= 100 || item.progress >= 100;
+            console.log(`📋 Found milestone assessment (direct child): ${item.name || key}`, {
+                milestoneId,
+                assessmentId: key,
+                completionStatus: item.completionStatus,
+                status: item.status,
+                completionPercentage: item.completionPercentage,
+                isCompleted
+            });
+            if (isCompleted) {
+                isMilestoneAssessmentComplete = true;
             }
+            // Usually only one milestone assessment per milestone, but check all just in case
         }
-        // If no assessment found, consider it as completed (no assessment requirement)
-        return true;
+        // CRITICAL LOGIC:
+        // - If NO milestone assessment found → consider complete (no assessment requirement)
+        // - If milestone assessment found → it must be completed
+        if (!foundMilestoneAssessment) {
+            console.log(`ℹ️ No milestone assessment (direct child) found for ${milestoneId} - considering as complete`);
+            return true;
+        }
+        console.log(`${isMilestoneAssessmentComplete ? '✅' : '❌'} Milestone ${milestoneId} assessment: ${isMilestoneAssessmentComplete ? 'COMPLETE' : 'INCOMPLETE'}`);
+        return isMilestoneAssessmentComplete;
     }
     /**
      * Check if a milestone's mandatory content is completed
@@ -2455,6 +2469,7 @@ class AppTocService {
         const milestone = this.hashmap[milestoneId];
         let mandatoryCount = 0;
         let completedMandatoryCount = 0;
+        console.log(`🔍 Checking mandatory content for milestone: ${milestoneId}`);
         // Check all items in hashmap that are direct children of this milestone (courses)
         for (const key of Object.keys(this.hashmap)) {
             const item = this.hashmap[key];
@@ -2467,20 +2482,36 @@ class AppTocService {
             // Skip assessments - they're checked separately
             const isAssessment = item.primaryCategory === 'Course Assessment' ||
                 item.primaryCategory === 'Final Assessment' ||
+                item.primaryCategory === 'Standalone Assessment' ||
                 item.courseCategory === 'Course Assessment' ||
                 (item.name && item.name.toLowerCase().includes('assessment'));
             if (isAssessment)
                 continue;
-            // Check if this content is mandatory
-            if (item.isMandatory) {
+            // CRITICAL: Check if this content is mandatory
+            // By default, courses ARE mandatory unless explicitly marked as optional (isMandatory: false)
+            const isMandatory = item.isMandatory !== false;
+            if (isMandatory) {
                 mandatoryCount++;
                 const isCompleted = item.completionStatus === 2 || item.status === 2 || item.completionPercentage >= 100 || item.progress >= 100;
+                console.log(`   📝 Mandatory item: ${item.name || key}`, {
+                    isMandatory: item.isMandatory,
+                    completionStatus: item.completionStatus,
+                    status: item.status,
+                    completionPercentage: item.completionPercentage,
+                    progress: item.progress,
+                    isCompleted,
+                    hasCompletionStatus: item.completionStatus !== undefined,
+                    hasStatus: item.status !== undefined,
+                    hasCompletionPercentage: item.completionPercentage !== undefined,
+                    hasProgress: item.progress !== undefined
+                });
                 if (isCompleted) {
                     completedMandatoryCount++;
                 }
             }
         }
         const allComplete = mandatoryCount === 0 || completedMandatoryCount >= mandatoryCount;
+        console.log(`📊 Milestone ${milestoneId} mandatory status: ${completedMandatoryCount}/${mandatoryCount} complete = ${allComplete ? '✅ ALL COMPLETE' : '❌ INCOMPLETE'}`);
         return allComplete;
     }
     /**
@@ -6318,6 +6349,7 @@ class AppTocContentCardV2Component {
         this._cachedIsMilestoneAssessment = false;
         this._cachedIsMilestoneAssessmentLocked = false;
         this._cachedResourceLink = { url: '', queryParams: {} };
+        this._cachedMilestoneCompletedCount = 0;
         this._cacheInitialized = false;
     }
     ngOnInit() {
@@ -6331,7 +6363,6 @@ class AppTocContentCardV2Component {
         // Subscribe to hashmap updates to recompute cached properties when progress changes
         this.hashmapUpdatedSubscription = this.appTocSvc.hashmapUpdated$.subscribe((update) => {
             if (update && update.hashmap) {
-                console.log('🔄 Hashmap updated, recomputing cached properties for:', this.content?.identifier);
                 // IMPORTANT: Update hierarchyMapData with the latest hashmap from the service
                 // This ensures the component uses the updated data, not the stale @Input reference
                 this.hierarchyMapData = update.hashmap;
@@ -6385,6 +6416,7 @@ class AppTocContentCardV2Component {
         this._cachedIsMilestoneAssessment = this.computeIsMilestoneAssessment();
         this._cachedIsMilestoneAssessmentLocked = this.computeIsMilestoneAssessmentLocked();
         this._cachedResourceLink = this.computeResourceLink();
+        this._cachedMilestoneCompletedCount = this.computeMilestoneCompletedCount();
         this._cacheInitialized = true;
     }
     computeIsResource() {
@@ -7189,6 +7221,12 @@ class AppTocContentCardV2Component {
         return this.computeIsMilestone();
     }
     getMilestoneCompletedCount() {
+        if (this._cacheInitialized) {
+            return this._cachedMilestoneCompletedCount;
+        }
+        return this.computeMilestoneCompletedCount();
+    }
+    computeMilestoneCompletedCount() {
         if (!this.content || !this.hierarchyMapData) {
             return 0;
         }
@@ -7199,8 +7237,15 @@ class AppTocContentCardV2Component {
         let completedCount = 0;
         milestoneData.leafNodes.forEach((leafId) => {
             const leafData = this.hierarchyMapData[leafId];
-            if (leafData && leafData.completionStatus === 2) {
-                completedCount++;
+            if (leafData) {
+                // CRITICAL: Check multiple completion indicators
+                const isCompleted = leafData.completionStatus === 2 ||
+                    leafData.status === 2 ||
+                    (leafData.completionPercentage && leafData.completionPercentage >= 100) ||
+                    (leafData.progress && leafData.progress >= 100);
+                if (isCompleted) {
+                    completedCount++;
+                }
             }
         });
         return completedCount;
@@ -7371,7 +7416,7 @@ class AppTocContentCardV2Component {
         return element.scrollHeight > element.clientHeight;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardV2Component, deps: [{ token: i2$1.EventService }, { token: i1$3.MatLegacyDialog }, { token: i0.Renderer2 }, { token: CertificateService }, { token: AppTocService }, { token: i5.ContentLanguageService }, { token: ResourceDownloadHelperService }, { token: i2$1.ConfigurationsService }, { token: i7.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId", componentName: "componentName", index: "index", pathSet: "pathSet", expandActive: "expandActive", hierarchyMapData: "hierarchyMapData", batchData: "batchData", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", mlCourse: "mlCourse", parentMilestoneLocked: "parentMilestoneLocked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n    <ng-container *ngIf=\"isCollection && !isModule\">\n        <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isCollection && isModule\">\n        <ng-container *ngIf=\"content?.moduleResourseCount\">\n            <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"isResource\" class=\"resource-container\"\n        [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n        <div class=\"resource flex  sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n            [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n            <!-- Lock message for curated programs only (shown above content) -->\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled  && !isMilestoneLocked && !isParentMilestoneLocked\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <!-- For locked assessments: show content but make it non-clickable -->\n            <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n                [ngClass]=\"{'ml-3': isEnrolled}\">\n                <div class=\"text-truncate opacity-60\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <div class=\"flex items-center gap-2 w-full\">\n                            <mat-icon class=\"text-gray-500\">lock</mat-icon>\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                        </div>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </div>\n                \n                <!-- Lock message displayed BELOW assessment details when locked -->\n                <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n                    <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n                        This content is locked. Complete all mandatory items to unlock the assessment.\n                    </span>\n                </div>\n            </div>\n            \n            <!-- Clickable content template (when NOT locked) -->\n            <ng-template #clickableContent>\n                <a class=\"width-expand\"\n                    [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n                    [ngClass]=\"{'ml-3': isEnrolled}\"\n                    [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n                    [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked)  ? resourceLink.queryParams : null\"\n                    [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n                    matTooltipPosition=\"above\">\n                    <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                    <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                        <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                            <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                                'playerbrief.optional' | translate | titlecase}} </span>\n                        </div>\n                        <!-- for default grey icons -->\n                        <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                            <div class=\"resicons ws-mat-black60-text\">\n                                <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                          content?.mimeType ==='application/x-mpegURL'\">\n                                <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                    *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                    alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                        }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                        hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                        pipeDurationTransform:\n                                        'hms'\n                                        }}</span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n            </ng-template>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container\n                                *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n                                class=\"lock-icon mr-2 margin-bottom-xxs\">\n                            <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n                                <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n                                    [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n                                    [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                    matTooltipPosition=\"above\">\n                                    <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n                                </p>\n                                <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n                                    <span class=\"locked-text\">Locked</span>\n                                </div>\n                                <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n                                    <span class=\"mandatory-text mat-caption\">Mandatory</span>\n                                </div>\n                            </div>\n                            \n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <!-- Milestone Badge -->\n                        <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n                            <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n                        </div>\n                        <!-- Milestone Description (2 lines with ellipsis) -->\n                        <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n                            [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n                            matTooltipPosition=\"above\"\n                            matTooltipClass=\"multiline-tooltip\">\n                            {{ content?.description }}\n                        </p>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                        <!-- Milestone Completion Progress -->\n                        <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2  flex items-center justify-between\">\n                            <div>\n                                <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n                                {{content?.leafNodesCount || 0}} completed</span>\n                            </div>\n                            <!-- View Achievement Button for completed milestones - Outside clickable area -->\n                            <div *ngIf=\"isMilestone && isEnrolled && (getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2)\"\n                                class=\"view-achievement-container mt-2\">\n                                <button type=\"button\" class=\"view-achievement-btn\" [disabled]=\"achievementLoading\"\n                                    (click)=\"viewMilestoneAchievement($event)\">\n                                    <span *ngIf=\"!achievementLoading\">View Achievement</span>\n                                    <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" \n                                        [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n                                </button>\n                            </div>\n                        </div>\n                        <!-- Unlock Criteria Message for Locked Milestones -->\n                        <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n                            <span class=\"locked-criteria-text mat-caption\">\n                                {{ getMilestoneUnlockMessage() }}\n                            </span>\n                        </div>\n                        \n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n                                        [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                        matTooltipPosition=\"above\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId", componentName: "componentName", index: "index", pathSet: "pathSet", expandActive: "expandActive", hierarchyMapData: "hierarchyMapData", batchData: "batchData", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", mlCourse: "mlCourse", parentMilestoneLocked: "parentMilestoneLocked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n    <ng-container *ngIf=\"isCollection && !isModule\">\n        <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isCollection && isModule\">\n        <ng-container *ngIf=\"content?.moduleResourseCount\">\n            <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"isResource\" class=\"resource-container\"\n        [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n        <div class=\"resource flex  sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n            [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n            <!-- Lock message for curated programs only (shown above content) -->\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled  && !isMilestoneLocked && !isParentMilestoneLocked\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <!-- For locked assessments: show content but make it non-clickable -->\n            <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n                [ngClass]=\"{'ml-3': isEnrolled}\">\n                <div class=\"text-truncate opacity-60\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <div class=\"flex items-center gap-2 w-full\">\n                            <mat-icon class=\"text-gray-500\">lock</mat-icon>\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                        </div>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </div>\n                \n                <!-- Lock message displayed BELOW assessment details when locked -->\n                <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n                    <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n                        This content is locked. Complete all mandatory items to unlock the assessment.\n                    </span>\n                </div>\n            </div>\n            \n            <!-- Clickable content template (when NOT locked) -->\n            <ng-template #clickableContent>\n                <a class=\"width-expand\"\n                    [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n                    [ngClass]=\"{'ml-3': isEnrolled}\"\n                    [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n                    [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked)  ? resourceLink.queryParams : null\"\n                    [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n                    matTooltipPosition=\"above\">\n                    <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                    <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                        <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                            <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                                'playerbrief.optional' | translate | titlecase}} </span>\n                        </div>\n                        <!-- for default grey icons -->\n                        <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                            <div class=\"resicons ws-mat-black60-text\">\n                                <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                          content?.mimeType ==='application/x-mpegURL'\">\n                                <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                    *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                    alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                        }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                        hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                        pipeDurationTransform:\n                                        'hms'\n                                        }}</span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n            </ng-template>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container\n                                *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n                                class=\"lock-icon mr-2 margin-bottom-xxs\">\n                            <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n                                <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n                                    [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n                                    [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                    matTooltipPosition=\"above\">\n                                    <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n                                </p>\n                                <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n                                    <span class=\"locked-text\">Locked</span>\n                                </div>\n                                <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n                                    <span class=\"mandatory-text mat-caption\">Mandatory</span>\n                                </div>\n                            </div>\n                            \n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <!-- Milestone Badge -->\n                        <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n                            <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n                        </div>\n                        <!-- Milestone Description (2 lines with ellipsis) -->\n                        <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n                            [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n                            matTooltipPosition=\"above\"\n                            matTooltipClass=\"multiline-tooltip\">\n                            {{ content?.description }}\n                        </p>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                        <!-- Milestone Completion Progress -->\n                        <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2 flex flex-col gap-2\">\n                            <div class=\"flex items-center justify-start gap-4 w-100\">\n                                <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of {{content?.leafNodesCount || 0}} completed</span>\n                                <!-- View Achievement Button for completed milestones - Always visible when completed -->\n                                <ng-container *ngIf=\"getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2\">\n                                    <button type=\"button\" class=\"view-achievement-btn ml-4\" [disabled]=\"achievementLoading\"\n                                        (click)=\"viewMilestoneAchievement($event)\">\n                                        <span *ngIf=\"!achievementLoading\">View Achievement</span>\n                                        <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n                                    </button>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <!-- Unlock Criteria Message for Locked Milestones -->\n                        <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n                            <span class=\"locked-criteria-text mat-caption\">\n                                {{ getMilestoneUnlockMessage() }}\n                            </span>\n                        </div>\n                        \n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n                                        [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                        matTooltipPosition=\"above\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [
             trigger('panelInOut', [
                 transition('void => *', [
                     style({ transform: 'translateY(-10%)', opacity: '0' }),
@@ -7395,7 +7440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 animate(200, style({ transform: 'translateY(-10%)', opacity: '0' }))
                             ])
                         ])
-                    ], template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n    <ng-container *ngIf=\"isCollection && !isModule\">\n        <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isCollection && isModule\">\n        <ng-container *ngIf=\"content?.moduleResourseCount\">\n            <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"isResource\" class=\"resource-container\"\n        [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n        <div class=\"resource flex  sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n            [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n            <!-- Lock message for curated programs only (shown above content) -->\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled  && !isMilestoneLocked && !isParentMilestoneLocked\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <!-- For locked assessments: show content but make it non-clickable -->\n            <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n                [ngClass]=\"{'ml-3': isEnrolled}\">\n                <div class=\"text-truncate opacity-60\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <div class=\"flex items-center gap-2 w-full\">\n                            <mat-icon class=\"text-gray-500\">lock</mat-icon>\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                        </div>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </div>\n                \n                <!-- Lock message displayed BELOW assessment details when locked -->\n                <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n                    <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n                        This content is locked. Complete all mandatory items to unlock the assessment.\n                    </span>\n                </div>\n            </div>\n            \n            <!-- Clickable content template (when NOT locked) -->\n            <ng-template #clickableContent>\n                <a class=\"width-expand\"\n                    [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n                    [ngClass]=\"{'ml-3': isEnrolled}\"\n                    [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n                    [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked)  ? resourceLink.queryParams : null\"\n                    [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n                    matTooltipPosition=\"above\">\n                    <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                    <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                        <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                            <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                                'playerbrief.optional' | translate | titlecase}} </span>\n                        </div>\n                        <!-- for default grey icons -->\n                        <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                            <div class=\"resicons ws-mat-black60-text\">\n                                <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                          content?.mimeType ==='application/x-mpegURL'\">\n                                <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                    *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                    alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                        }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                        hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                        pipeDurationTransform:\n                                        'hms'\n                                        }}</span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n            </ng-template>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container\n                                *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n                                class=\"lock-icon mr-2 margin-bottom-xxs\">\n                            <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n                                <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n                                    [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n                                    [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                    matTooltipPosition=\"above\">\n                                    <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n                                </p>\n                                <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n                                    <span class=\"locked-text\">Locked</span>\n                                </div>\n                                <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n                                    <span class=\"mandatory-text mat-caption\">Mandatory</span>\n                                </div>\n                            </div>\n                            \n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <!-- Milestone Badge -->\n                        <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n                            <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n                        </div>\n                        <!-- Milestone Description (2 lines with ellipsis) -->\n                        <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n                            [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n                            matTooltipPosition=\"above\"\n                            matTooltipClass=\"multiline-tooltip\">\n                            {{ content?.description }}\n                        </p>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                        <!-- Milestone Completion Progress -->\n                        <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2  flex items-center justify-between\">\n                            <div>\n                                <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n                                {{content?.leafNodesCount || 0}} completed</span>\n                            </div>\n                            <!-- View Achievement Button for completed milestones - Outside clickable area -->\n                            <div *ngIf=\"isMilestone && isEnrolled && (getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2)\"\n                                class=\"view-achievement-container mt-2\">\n                                <button type=\"button\" class=\"view-achievement-btn\" [disabled]=\"achievementLoading\"\n                                    (click)=\"viewMilestoneAchievement($event)\">\n                                    <span *ngIf=\"!achievementLoading\">View Achievement</span>\n                                    <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" \n                                        [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n                                </button>\n                            </div>\n                        </div>\n                        <!-- Unlock Criteria Message for Locked Milestones -->\n                        <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n                            <span class=\"locked-criteria-text mat-caption\">\n                                {{ getMilestoneUnlockMessage() }}\n                            </span>\n                        </div>\n                        \n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n                                        [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                        matTooltipPosition=\"above\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"] }]
+                    ], template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n    <ng-container *ngIf=\"isCollection && !isModule\">\n        <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isCollection && isModule\">\n        <ng-container *ngIf=\"content?.moduleResourseCount\">\n            <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"isResource\" class=\"resource-container\"\n        [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n        <div class=\"resource flex  sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n            [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n            <!-- Lock message for curated programs only (shown above content) -->\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled  && !isMilestoneLocked && !isParentMilestoneLocked\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <!-- For locked assessments: show content but make it non-clickable -->\n            <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n                [ngClass]=\"{'ml-3': isEnrolled}\">\n                <div class=\"text-truncate opacity-60\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <div class=\"flex items-center gap-2 w-full\">\n                            <mat-icon class=\"text-gray-500\">lock</mat-icon>\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                        </div>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </div>\n                \n                <!-- Lock message displayed BELOW assessment details when locked -->\n                <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n                    <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n                        This content is locked. Complete all mandatory items to unlock the assessment.\n                    </span>\n                </div>\n            </div>\n            \n            <!-- Clickable content template (when NOT locked) -->\n            <ng-template #clickableContent>\n                <a class=\"width-expand\"\n                    [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n                    [ngClass]=\"{'ml-3': isEnrolled}\"\n                    [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n                    [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked)  ? resourceLink.queryParams : null\"\n                    [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n                    matTooltipPosition=\"above\">\n                    <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                    <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                        <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                            <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                                'playerbrief.optional' | translate | titlecase}} </span>\n                        </div>\n                        <!-- for default grey icons -->\n                        <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                            <div class=\"resicons ws-mat-black60-text\">\n                                <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                          content?.mimeType ==='application/x-mpegURL'\">\n                                <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                    *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                    alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                        }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                        hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                        pipeDurationTransform:\n                                        'hms'\n                                        }}</span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n            </ng-template>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container\n                                *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n                                class=\"lock-icon mr-2 margin-bottom-xxs\">\n                            <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n                                <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n                                    [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n                                    [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                    matTooltipPosition=\"above\">\n                                    <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n                                </p>\n                                <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n                                    <span class=\"locked-text\">Locked</span>\n                                </div>\n                                <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n                                    <span class=\"mandatory-text mat-caption\">Mandatory</span>\n                                </div>\n                            </div>\n                            \n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <!-- Milestone Badge -->\n                        <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n                            <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n                        </div>\n                        <!-- Milestone Description (2 lines with ellipsis) -->\n                        <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n                            [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n                            matTooltipPosition=\"above\"\n                            matTooltipClass=\"multiline-tooltip\">\n                            {{ content?.description }}\n                        </p>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                        <!-- Milestone Completion Progress -->\n                        <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2 flex flex-col gap-2\">\n                            <div class=\"flex items-center justify-start gap-4 w-100\">\n                                <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of {{content?.leafNodesCount || 0}} completed</span>\n                                <!-- View Achievement Button for completed milestones - Always visible when completed -->\n                                <ng-container *ngIf=\"getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2\">\n                                    <button type=\"button\" class=\"view-achievement-btn ml-4\" [disabled]=\"achievementLoading\"\n                                        (click)=\"viewMilestoneAchievement($event)\">\n                                        <span *ngIf=\"!achievementLoading\">View Achievement</span>\n                                        <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n                                    </button>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <!-- Unlock Criteria Message for Locked Milestones -->\n                        <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n                            <span class=\"locked-criteria-text mat-caption\">\n                                {{ getMilestoneUnlockMessage() }}\n                            </span>\n                        </div>\n                        \n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n                                        [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                        matTooltipPosition=\"above\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$1.EventService }, { type: i1$3.MatLegacyDialog }, { type: i0.Renderer2 }, { type: CertificateService }, { type: AppTocService }, { type: i5.ContentLanguageService }, { type: ResourceDownloadHelperService }, { type: i2$1.ConfigurationsService }, { type: i7.MatLegacySnackBar }]; }, propDecorators: { content: [{
                 type: Input
             }], expandAll: [{
@@ -15567,7 +15612,7 @@ class AppTocV2Service {
             milestoneIndex++;
         });
         contentHeirarchy['leafNodes'] = [...leafNodes];
-        console.log('content Heirarchy', contentHeirarchy);
+        contentHeirarchy['leafNodesCount'] = leafNodes.length;
         return contentHeirarchy;
     }
     mapModuleCount(content) {
@@ -15583,9 +15628,6 @@ class AppTocV2Service {
         }
     }
     mapContentHierarchyProgressUpdate(contentHeirarchyData, enrollmentListData) {
-        console.log('=== mapContentHierarchyProgressUpdate ===');
-        console.log('Content hierarchy:', contentHeirarchyData?.name, contentHeirarchyData?.identifier);
-        console.log('Enrollment list data:', enrollmentListData);
         if (contentHeirarchyData && contentHeirarchyData.children) {
             let totalLeafNodes = 0;
             let totalCompletedLeafNodes = 0;
@@ -15702,13 +15744,6 @@ class AppTocV2Service {
         }
         // Try both contentId and collectionId as the API response may use either field
         const nodeEnrollData = enrollment?.contentList?.find((ele) => ele?.contentId === node.identifier || ele?.collectionId === node.identifier);
-        console.log(`Updating node progress for ${node.identifier} (${node.name}):`, {
-            hasEnrollment: !!enrollment,
-            hasNodeEnrollData: !!nodeEnrollData,
-            nodeEnrollData,
-            currentCompletionStatus: node.completionStatus,
-            currentCompletionPercentage: node.completionPercentage
-        });
         if (enrollment && nodeEnrollData && nodeEnrollData.status < 2) {
             node.completionPercentage = nodeEnrollData.completionPercentage || nodeEnrollData.progress || 0;
             node.completionStatus = Number(nodeEnrollData.status) || 0;
@@ -20842,7 +20877,6 @@ class AppTocHomeV2Component {
                     }
                 }
                 if (this.baseContentReadData?.courseCategory === 'Learning Pathway') {
-                    console.log('User enrolled in LP - computing milestone locks with isEnrolled=true');
                     this.tocSvc.callHirarchyProgressHashmap(this.content);
                     this.tocSvc.computeMilestoneLockingStatus(true);
                     this.syncMilestoneLockStatus();
@@ -20875,7 +20909,6 @@ class AppTocHomeV2Component {
                 this.tocSvc.callHirarchyProgressHashmap(this.content);
                 // For Learning Pathways, compute milestone locking when not enrolled (all locked)
                 if (this.baseContentReadData?.courseCategory === 'Learning Pathway') {
-                    console.log('User not enrolled - computing milestone locks');
                     this.tocSvc.computeMilestoneLockingStatus(false);
                     this.syncMilestoneLockStatus();
                 }
@@ -21509,7 +21542,6 @@ class AppTocHomeV2Component {
         this.hashmapUpdatedSubscription = this.tocSvc.hashmapUpdated$.subscribe((update) => {
             if (update && this.baseContentReadData?.courseCategory === 'Learning Pathway') {
                 const isEnrolled = this.userEnrollmentList && this.userEnrollmentList.length > 0;
-                console.log('Hashmap updated at:', update.timestamp, 'Enrolled:', isEnrolled, 'Syncing milestone lock status...');
                 // Sync content tree's isLocked with the updated hashmap values
                 this.syncMilestoneLockStatus();
             }
@@ -21633,18 +21665,17 @@ class AppTocHomeV2Component {
         if (this.baseContentReadData?.courseCategory === 'Learning Pathway') {
             return new Promise((resolve) => {
                 const content = this.baseContentReadData;
+                // STEP 1: Construct hierarchy structure
                 this.content = this.appTocV2Svc.constructHeirarchyData(content);
-                // Update progress with latest enrollment data
+                // STEP 2: Update progress with latest enrollment data
                 this.appTocV2Svc.mapContentHierarchyProgressUpdate(this.content, this.userEnrollmentList);
-                // Create hashmap and compute milestone locking after progress is updated
+                // STEP 3: Create hashmap from updated hierarchy (this should preserve completion status)
                 this.tocSvc.callHirarchyProgressHashmap(this.content);
-                console.log('Learning Pathway hashmap updated:', this.tocSvc.hashmap);
                 // Check if user is enrolled
                 const isEnrolled = this.userEnrollmentList && this.userEnrollmentList.length > 0;
-                // Compute milestone locking status with enrollment status and updated progress data
+                // STEP 4: Compute milestone locking status with enrollment status and updated progress data
                 this.tocSvc.computeMilestoneLockingStatus(isEnrolled);
-                console.log('Milestone locking recomputed. Enrolled:', isEnrolled);
-                // Sync content tree's isLocked with computed values
+                // STEP 5: Sync content tree's isLocked with computed values
                 this.syncMilestoneLockStatus();
                 this.getOrgIdForShare();
                 this.getTocStructure();
@@ -21728,7 +21759,6 @@ class AppTocHomeV2Component {
                     if (oldLocked !== child.isLocked) {
                         hasChanges = true;
                     }
-                    console.log(`Synced lock status for ${child.name} (${child.identifier}): isLocked=${child.isLocked}`);
                 }
             }
         });
@@ -21743,7 +21773,6 @@ class AppTocHomeV2Component {
             return;
         }
         try {
-            console.log('🔄 Refreshing milestone locks from hashmap...');
             // Check if user is enrolled
             const isEnrolled = this.userEnrollmentList && this.userEnrollmentList.length > 0;
             // Recompute milestone locking status from existing hashmap