tango-app-ui-store-builder 1.2.17 → 1.2.18

package/fesm2022/tango-app-ui-store-builder.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, inject, ViewChild, Input, EventEmitter, Output, HostListener, ChangeDetectionStrategy, forwardRef, Pipe, ViewChildren, ChangeDetectorRef, NgModule } from '@angular/core';
+import { Component, Injectable, inject, Input, ViewChild, EventEmitter, ChangeDetectionStrategy, HostListener, Output, forwardRef, Pipe, ViewChildren, ChangeDetectorRef, NgModule } from '@angular/core';
 import * as i2 from '@angular/router';
-import { NavigationEnd, RouterLink, RouterOutlet, RouterModule } from '@angular/router';
+import { NavigationEnd, RouterLink, RouterOutlet, RouterModule, Router } from '@angular/router';
 import * as i2$1 from 'tango-app-ui-global';
 import { GlobalStateService } from 'tango-app-ui-global';
 import * as i5 from '@angular/common';
-import { CommonModule, DatePipe, NgClass, NgStyle, NgFor, NgIf, TitleCasePipe, UpperCasePipe } from '@angular/common';
+import { DatePipe, CommonModule, NgClass, NgStyle, NgFor, NgIf, TitleCasePipe, UpperCasePipe } from '@angular/common';
 import * as i1$2 from '@angular/forms';
 import { FormControl, FormGroup, FormsModule, FormArray, NG_VALUE_ACCESSOR, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i7 from '@angular/cdk/drag-drop';
@@ -733,12 +733,24 @@ class StoreBuilderService {
     runVmPlacementQuery(data) {
         return this.http.post(`${this.storeBuilderApiUrl}/runVmPlacementQuery`, data);
     }
-    // Look Plano Collections
+    // Feature access — email-gated route/tab visibility. Each returns
+    // { code, data: { allowed, email }, ... }; the UI branches on data.allowed.
+    /** Whether the current session user may access Find & Replace
+     *  (email present in planostaticdatas `allowedFindReplaceUsers`). */
+    getFindReplaceAccess() {
+        return this.http.get(`${this.storeBuilderApiUrl}/featureAccess/findReplace`);
+    }
+    /** Whether the current session user may access the Fixture Library
+     *  (email present in planostaticdatas `allowedFixtureLibraryUsers`). */
+    getFixtureLibraryAccess() {
+        return this.http.get(`${this.storeBuilderApiUrl}/featureAccess/fixtureLibrary`);
+    }
     /** Whether the current session user may access the Looks feature
      *  (email present in planostaticdatas `allowedLookUsers`). */
     getLookAccess() {
-        return this.http.get(`${this.storeBuilderApiUrl}/lookPlanoCollection/access`);
+        return this.http.get(`${this.storeBuilderApiUrl}/featureAccess/looks`);
     }
+    // Look Plano Collections
     getLookPlanoCollectionList(data) {
         return this.http.post(`${this.storeBuilderApiUrl}/lookPlanoCollection/getCollectionList`, data);
     }
@@ -7549,6 +7561,27 @@ const getFixtureCanvasLabel = (fixture) => {
         .filter((v) => v !== null && v !== undefined && v !== "")
         .join("-");
 };
+/**
+ * Computes a fixture's product capacity as the live sum of its individual
+ * shelf capacities, mirroring the backend rule: a tray holds
+ * productPerShelf x trayRows, a plain shelf holds productPerShelf, and
+ * VM-only shelves carry no products. Always derive the displayed "Products"
+ * count from this (the shelf config) rather than the stored fixtureCapacity,
+ * which can be stale relative to the current shelves.
+ */
+const getFixtureProductCapacity = (shelfConfig) => {
+    if (!Array.isArray(shelfConfig))
+        return 0;
+    return shelfConfig.reduce((total, shelf) => {
+        if (!shelf || shelf.shelfType === "vmonly")
+            return total;
+        const perShelf = Number(shelf.productPerShelf) || 0;
+        if (shelf.shelfType === "tray") {
+            return total + perShelf * (Number(shelf.trayRows) || 0);
+        }
+        return total + perShelf;
+    }, 0);
+};
 const lightenColor = (hex, amount = 0.3) => {
     if (!hex)
         return hex;
@@ -10731,7 +10764,7 @@ class StorePlanoTreeViewComponent {
             fill: "transparent",
         });
         const actualShelfCount = mf?.shelfConfig?.filter((s) => s.shelfType != "vmonly")?.length ?? 0;
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelfCount} . Products -  ${mf.fixtureCapacity} . VM - ${mf.vmConfig.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelfCount} . Products -  ${getFixtureProductCapacity(mf.shelfConfig)} . VM - ${mf.vmConfig.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2 + 4,
             fontSize: 5,
@@ -12435,6 +12468,11 @@ class VerificationFeedbackComponent {
     currentFixtureIndex;
     planoFixture;
     aiFixture;
+    // Live fixture capacity = sum of individual shelf capacities (see plano.function),
+    // kept consistent with the planogram canvas instead of the stored fixtureCapacity.
+    get planoFixtureCapacity() {
+        return getFixtureProductCapacity(this.planoFixture?.shelfConfig);
+    }
     selectedImageForPreview = null;
     imagePreviewZoom = 1;
     imagePreviewPanX = 0;
@@ -12951,11 +12989,11 @@ class VerificationFeedbackComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VerificationFeedbackComponent, deps: [{ token: i2$1.GlobalStateService }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: { floorData: "floorData", totalFixtures: "totalFixtures", feedbackDetails: "feedbackDetails", cdn: "cdn", showAction: "showAction" }, outputs: { changeFixture: "changeFixture", action: "action" }, usesOnChanges: true, ngImport: i0, template: "<section id=\"verification-feedback\">\r\n\r\n    <div *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n        <div ngbAccordionItem=\"details\" [collapsed]=\"feedbackDetails?.taskInfoToggle\">\r\n            <div ngbAccordionHeader ngbAccordionToggle class=\"accordion-button task-info-header\">\r\n                <div class=\"w-100\">\r\n                    <h2>Fixture verification assigned</h2>\r\n                    <p>{{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                </div>\r\n            </div>\r\n\r\n            <div ngbAccordionCollapse>\r\n                <div ngbAccordionBody>\r\n                    <ng-template>\r\n                        <div class=\"log-block\">\r\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                <path\r\n                                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n\r\n                            <div class=\"d-flex gap-1 flex-column\">\r\n                                <h4>{{feedbackDetails?.fixtureFeedback?.taskData?.createdByName}}</h4>\r\n                                <p>\r\n                                    {{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mma, dd MMM yyyy'}}\r\n                                </p>\r\n                                <h5>Assigner</h5>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"log-block\">\r\n                            <!-- User avatar -->\r\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                <path\r\n                                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n\r\n                            <div class=\"d-flex gap-1 flex-column\">\r\n                                <h4> {{feedbackDetails?.fixtureFeedback?.taskData?.userName}}</h4>\r\n                                <p>\r\n                                    {{feedbackDetails?.fixtureFeedback?.taskData?.submitTime_string}}\r\n                                </p>\r\n                                <h5>Assignee</h5>\r\n                            </div>\r\n                        </div>\r\n\r\n\r\n                        @if (feedbackDetails?.globalComments?.length) {\r\n                            <h5 class=\"mb-2\">Comments</h5>\r\n                            <div class=\"log-block\" *ngFor=\"let c of feedbackDetails?.globalComments;let i= index\">\r\n                                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                    <path\r\n                                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n\r\n                                <div class=\"d-flex gap-1 flex-column\">\r\n                                    <h4>{{c?.userName}}</h4>\r\n                                    <p>{{c?.createdAt|date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                                    <h5>{{c?.comment}}</h5>\r\n                                </div>\r\n                            </div>\r\n                        }\r\n                    </ng-template>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <hr *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\">\r\n\r\n    <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n        <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n\r\n\r\n        <h3 class=\"m-0\">{{planoFixture?.header?.label}}</h3>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 flex-wrap\">\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n                {{ planoFixture.fixtureCategory | titlecase}}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n                {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span  class=\"badge inactive me-1\">\r\n                Fixture Capacity: {{ planoFixture?.fixtureCapacity || 0 }}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span  class=\"badge inactive me-1\">\r\n                Visual Merch Capacity: {{ planoFixture?.vmConfig?.length || 0 }}\r\n            </span>\r\n\r\n        </div>\r\n\r\n        <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n            {{currentFixtureIndex}}/{{totalFixtures.length}}\r\n        </h3>\r\n\r\n        <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n\r\n    </div>\r\n\r\n    @if( this.aiFixture?.fixtureId){\r\n        <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n            @if (showAction) {\r\n                <div class=\"col-4 p-2\">\r\n                    <div class=\"wrapper\">\r\n                        <div class=\"d-flex align-items-center gap-3\">\r\n                            @if (!isApproved && showAction) {\r\n                                <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditFeedback()\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_228_12536)\">\r\n                                            <path\r\n                                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_228_12536\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </button>\r\n\r\n                                <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickKeepPlano()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    Keep plano\r\n                                </button>\r\n                            }\r\n                        </div>\r\n                        <div class=\"mb-4\">\r\n                            <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <path\r\n                                        d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n\r\n                                <div class=\"d-flex align-items-center gap-3\">\r\n                                    <h4 class=\"m-0\">Existing template </h4>\r\n                                    <svg [ngbTooltip]=\"planoFixture?.fixtureName\" width=\"20\" height=\"20\"\r\n                                        viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_496_31664)\">\r\n                                            <path\r\n                                                d=\"M10.0013 13.3337V10.0003M10.0013 6.66699H10.0096M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n                                                stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_496_31664\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n\r\n                                </div>\r\n\r\n                                @if (isApproved) {\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'keepPlano' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithPlano' \"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                            d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                                            fill=\"#12B76A\" />\r\n                                    </svg>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                        <fixture [fixture]=\"planoFixture\"></fixture>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"col-4 p-2\">\r\n                    <div class=\"wrapper\">\r\n                        @if (!isApproved && showAction) {\r\n                            <div class=\"d-flex align-items-center gap-3\">\r\n                                <button class=\"btn redo-btn\" (click)=\"onClickRedo()\" [class.disabled]=\"isAIQuickEdit\" *ngIf=\"!feedbackDetails?.fixtureFeedback?.hideRedo\">\r\n                                    Redo\r\n                                </button>\r\n\r\n                                <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditAIFeedback()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_228_12536)\">\r\n                                            <path\r\n                                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_228_12536\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </button>\r\n\r\n                                <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickAcceptAI()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    Accept store response\r\n                                </button>\r\n                            </div>\r\n                        }\r\n\r\n                        <div class=\"mb-4\">\r\n                            <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <path\r\n                                        d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n                                        stroke=\"#101828\" stroke-width=\"1.5\" />\r\n                                </svg>\r\n\r\n\r\n                                <h4>Store response </h4>\r\n                                <span  class=\"badge inactive me-1\" *ngIf=\"!isAIQuickEdit\">\r\n                                    Capacity: {{aiFixture?.fixtureCapacity || 0 }}\r\n                                </span>\r\n                                @if (isApproved) {\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'acceptAi' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithAi'\"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                            d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                                            fill=\"#12B76A\" />\r\n                                    </svg>\r\n\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'redo' \"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n                                            fill=\"black\" />\r\n                                    </svg>\r\n                                }@else {\r\n                                    <svg *ngIf=\"showAction && !isAIQuickEdit\" class=\"ms-auto cursor-pointer\"\r\n                                        (click)=\"toggleAIQuickEdit()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M9 15.0002H15.75M12.375 2.62517C12.6734 2.3268 13.078 2.15918 13.5 2.15918C13.7089 2.15918 13.9158 2.20033 14.1088 2.28029C14.3019 2.36024 14.4773 2.47743 14.625 2.62517C14.7727 2.77291 14.8899 2.9483 14.9699 3.14132C15.0498 3.33435 15.091 3.54124 15.091 3.75017C15.091 3.9591 15.0498 4.16599 14.9699 4.35902C14.8899 4.55204 14.7727 4.72743 14.625 4.87517L5.25 14.2502L2.25 15.0002L3 12.0002L12.375 2.62517Z\"\r\n                                            stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                }\r\n\r\n\r\n                            </div>\r\n                        </div>\r\n                        <editable-fixture [fixture]=\"aiFixture\" [editMode]=\"isAIQuickEdit\"\r\n                            (onCancel)=\"onCancelAIQuickEdit()\" (onDone)=\"onSaveAIQuickEdit($event)\"\r\n                            (editTab)=\"onEditAIFeedback($event)\"></editable-fixture>\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n            <div class=\"p-2\" [ngClass]=\"{'col-4':showAction,'col':!showAction}\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"mb-4\" [ngStyle]=\"{'margin-top':showAction && !isApproved ? '50px' : '12px'}\">\r\n                        <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                            <h4>Store Image </h4>\r\n                        </div>\r\n                    </div>\r\n                    @if(cdn && aiFixture?.fixtureImage){\r\n                        <div class=\"fixture-image\" (click)=\"onClickImagePreview($event, cdn + aiFixture?.fixtureImage)\">\r\n                            @if(isImageLoading) {\r\n                                <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n                            }\r\n                            <img [src]=\"cdn + aiFixture?.fixtureImage\" \r\n                                 alt=\"Store response image\"\r\n                                 [style.display]=\"isImageLoading ? 'none' : 'block'\"\r\n                                 (loadstart)=\"onImageLoadStart()\"\r\n                                 (load)=\"onImageLoad()\"\r\n                                 (error)=\"onImageError()\"\r\n                                 (loadend)=\"onImageLoadEnd()\">\r\n                        </div>\r\n                    }@else {\r\n                        <div class=\"text-center my-7\">\r\n                            <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <path\r\n                                    d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n                                    fill=\"#EAECF0\" />\r\n                                <path\r\n                                    d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n                                    fill=\"#6BCAFF\" />\r\n                                <path\r\n                                    d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n                                    fill=\"#00A3FF\" />\r\n                                <path\r\n                                    d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n                                    fill=\"#00A3FF\" />\r\n                                <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n                                <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n                                <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n                            </svg>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div id=\"vm-comparison\" *ngIf=\"feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig.length\">\r\n            <h5 class=\"mb-1\">Visual Merchandise Images from AI output:</h5>\r\n\r\n            <div class=\"row g-0\">\r\n\r\n                @for (vm of feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig; track $index) {\r\n                    <div class=\"p-2\" [ngClass]=\"{'col-6':showAction, 'col-12':!showAction}\">\r\n                        <div class=\"vm-container\" (click)=\"onClickImagePreview($event, cdn+vm?.vmImage)\">\r\n                            <div class=\"vm-img\">\r\n                                <img [src]=\"cdn+vm?.vmImage\" alt=\"VM Image\">\r\n                            </div>\r\n                            <div class=\"d-flex flex-column gap-2 vm-details \">\r\n                                <h5>{{vm?.vmType}}</h5>\r\n                                <h5>{{vm?.vmName}}</h5>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    }@else {\r\n        <div class=\"my-6\">\r\n            <div class=\"text-center\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                    <path\r\n                        d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                        stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"mt-3 text-center\">\r\n                <div class=\"fw-bold h3 mt-2\">No response</div>\r\n                <div class=\"mt-4\">No AI response found for this fixture.</div>\r\n            </div>\r\n        </div>\r\n    }\r\n\r\n\r\n    @if (feedbackDetails?.fixtureFeedback?.answers?.[0]?.comments.length) {\r\n        <div id=\"fixture-comments\">\r\n            <h5 class=\"mb-2\">Comments</h5>\r\n\r\n            <div class=\"log-block\"\r\n                *ngFor=\"let c of feedbackDetails?.fixtureFeedback?.answers[0]?.comments;let i= index\">\r\n                <!-- User avatar -->\r\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                    <path\r\n                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n                <div class=\"d-flex gap-1 flex-column\">\r\n\r\n                    <div class=\"d-flex gap-1 flex-column\">\r\n                        <h4>{{c?.userName}}</h4>\r\n                        <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                    </div>\r\n\r\n                    @if(c?.responsetype === 'comment'){\r\n                        <h5>{{c?.comment}}</h5>\r\n                    }@else if(c?.responsetype === 'agree'){\r\n\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n                            Marked as \"Keep Plano\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithPlano'\">\r\n                            Marked as \"Keep Plano with Modification\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'acceptAi'\">\r\n                            Marked as \"Accept AI\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithAi'\">\r\n                            Marked as \"Accept AI with Modification\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n                    }@else if(c?.responsetype === 'disagree'){\r\n                        <h5>\r\n                            Marked as \"Redo\"\r\n                        </h5>\r\n                        <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n    }\r\n\r\n    <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n        <button class=\"preview-close\" (click)=\"$event.stopPropagation(); closeImagePreview()\">&#x2715;</button>\r\n        <div class=\"preview-zoom-controls\" (click)=\"$event.stopPropagation()\">\r\n            <button (click)=\"onPreviewZoomOut()\">&#x2212;</button>\r\n            <input type=\"range\" class=\"zoom-slider\" min=\"25\" max=\"500\" step=\"25\"\r\n                   [value]=\"imagePreviewZoom * 100\"\r\n                   (input)=\"onPreviewZoomSlider($event)\" />\r\n            <span>{{ (imagePreviewZoom * 100).toFixed(0) }}%</span>\r\n            <button (click)=\"onPreviewZoomIn()\">&#x2B;</button>\r\n        </div>\r\n        <div class=\"preview-image-container\" (click)=\"$event.stopPropagation()\"\r\n             (mousedown)=\"onPreviewPanStart($event)\"\r\n             (mousemove)=\"onPreviewPanMove($event)\"\r\n             (mouseup)=\"onPreviewPanEnd()\"\r\n             (mouseleave)=\"onPreviewPanEnd()\"\r\n             (wheel)=\"onPreviewWheel($event)\">\r\n            <img [src]=\"selectedImageForPreview\" class=\"full-img\"\r\n                 [style.transform]=\"'scale(' + imagePreviewZoom + ') translate(' + imagePreviewPanX / imagePreviewZoom + 'px,' + imagePreviewPanY / imagePreviewZoom + 'px)'\"\r\n                 draggable=\"false\" />\r\n        </div>\r\n    </div>\r\n\r\n    <ng-template #skeletonLoader>\r\n        <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n            <div class=\"shimmer rounded\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .btn-outline-cus{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .btn-outline-cus:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:default}#verification-feedback .preview-close{position:absolute;top:16px;right:16px;background:#ffffff26;border:none;color:#fff;font-size:20px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10000}#verification-feedback .preview-close:hover{background:#ffffff4d}#verification-feedback .preview-zoom-controls{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#ffffff26;border-radius:8px;padding:6px 16px;z-index:10000}#verification-feedback .preview-zoom-controls span{color:#fff;font-size:14px;min-width:48px;text-align:center;-webkit-user-select:none;user-select:none}#verification-feedback .preview-zoom-controls button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center}#verification-feedback .preview-zoom-controls button:hover{background:#fff3}#verification-feedback .preview-zoom-controls .zoom-slider{-webkit-appearance:none;appearance:none;width:120px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer}#verification-feedback .preview-image-container{overflow:hidden;display:flex;align-items:center;justify-content:center;width:90vw;height:85vh;cursor:default}#verification-feedback .preview-image-container:active{cursor:grabbing}#verification-feedback .full-img{max-width:90vw;max-height:85vh;border-radius:10px;object-fit:contain;cursor:grab;-webkit-user-select:none;user-select:none}#verification-feedback .full-img:active{cursor:grabbing}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}.loader .shimmer{height:unset}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionToggle, selector: "[ngbAccordionToggle]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: FixtureComponent, selector: "fixture", inputs: ["fixture", "showColors", "showVMs", "showBCs", "showHeaderFooterAlways"] }, { kind: "component", type: EditableFixtureComponent, selector: "editable-fixture", inputs: ["fixture", "showColors", "showVMs", "showBCs", "editMode"], outputs: ["onCancel", "onDone", "editTab"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VerificationFeedbackComponent, selector: "lib-verification-feedback", inputs: { floorData: "floorData", totalFixtures: "totalFixtures", feedbackDetails: "feedbackDetails", cdn: "cdn", showAction: "showAction" }, outputs: { changeFixture: "changeFixture", action: "action" }, usesOnChanges: true, ngImport: i0, template: "<section id=\"verification-feedback\">\r\n\r\n    <div *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n        <div ngbAccordionItem=\"details\" [collapsed]=\"feedbackDetails?.taskInfoToggle\">\r\n            <div ngbAccordionHeader ngbAccordionToggle class=\"accordion-button task-info-header\">\r\n                <div class=\"w-100\">\r\n                    <h2>Fixture verification assigned</h2>\r\n                    <p>{{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                </div>\r\n            </div>\r\n\r\n            <div ngbAccordionCollapse>\r\n                <div ngbAccordionBody>\r\n                    <ng-template>\r\n                        <div class=\"log-block\">\r\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                <path\r\n                                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n\r\n                            <div class=\"d-flex gap-1 flex-column\">\r\n                                <h4>{{feedbackDetails?.fixtureFeedback?.taskData?.createdByName}}</h4>\r\n                                <p>\r\n                                    {{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mma, dd MMM yyyy'}}\r\n                                </p>\r\n                                <h5>Assigner</h5>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"log-block\">\r\n                            <!-- User avatar -->\r\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                <path\r\n                                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n\r\n                            <div class=\"d-flex gap-1 flex-column\">\r\n                                <h4> {{feedbackDetails?.fixtureFeedback?.taskData?.userName}}</h4>\r\n                                <p>\r\n                                    {{feedbackDetails?.fixtureFeedback?.taskData?.submitTime_string}}\r\n                                </p>\r\n                                <h5>Assignee</h5>\r\n                            </div>\r\n                        </div>\r\n\r\n\r\n                        @if (feedbackDetails?.globalComments?.length) {\r\n                            <h5 class=\"mb-2\">Comments</h5>\r\n                            <div class=\"log-block\" *ngFor=\"let c of feedbackDetails?.globalComments;let i= index\">\r\n                                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                    <path\r\n                                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n\r\n                                <div class=\"d-flex gap-1 flex-column\">\r\n                                    <h4>{{c?.userName}}</h4>\r\n                                    <p>{{c?.createdAt|date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                                    <h5>{{c?.comment}}</h5>\r\n                                </div>\r\n                            </div>\r\n                        }\r\n                    </ng-template>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <hr *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\">\r\n\r\n    <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n        <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n\r\n\r\n        <h3 class=\"m-0\">{{planoFixture?.header?.label}}</h3>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 flex-wrap\">\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n                {{ planoFixture.fixtureCategory | titlecase}}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n                {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span  class=\"badge inactive me-1\">\r\n                Fixture Capacity: {{ planoFixtureCapacity }}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span  class=\"badge inactive me-1\">\r\n                Visual Merch Capacity: {{ planoFixture?.vmConfig?.length || 0 }}\r\n            </span>\r\n\r\n        </div>\r\n\r\n        <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n            {{currentFixtureIndex}}/{{totalFixtures.length}}\r\n        </h3>\r\n\r\n        <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n\r\n    </div>\r\n\r\n    @if( this.aiFixture?.fixtureId){\r\n        <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n            @if (showAction) {\r\n                <div class=\"col-4 p-2\">\r\n                    <div class=\"wrapper\">\r\n                        <div class=\"d-flex align-items-center gap-3\">\r\n                            @if (!isApproved && showAction) {\r\n                                <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditFeedback()\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_228_12536)\">\r\n                                            <path\r\n                                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_228_12536\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </button>\r\n\r\n                                <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickKeepPlano()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    Keep plano\r\n                                </button>\r\n                            }\r\n                        </div>\r\n                        <div class=\"mb-4\">\r\n                            <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <path\r\n                                        d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n\r\n                                <div class=\"d-flex align-items-center gap-3\">\r\n                                    <h4 class=\"m-0\">Existing template </h4>\r\n                                    <svg [ngbTooltip]=\"planoFixture?.fixtureName\" width=\"20\" height=\"20\"\r\n                                        viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_496_31664)\">\r\n                                            <path\r\n                                                d=\"M10.0013 13.3337V10.0003M10.0013 6.66699H10.0096M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n                                                stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_496_31664\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n\r\n                                </div>\r\n\r\n                                @if (isApproved) {\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'keepPlano' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithPlano' \"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                            d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                                            fill=\"#12B76A\" />\r\n                                    </svg>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                        <fixture [fixture]=\"planoFixture\"></fixture>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"col-4 p-2\">\r\n                    <div class=\"wrapper\">\r\n                        @if (!isApproved && showAction) {\r\n                            <div class=\"d-flex align-items-center gap-3\">\r\n                                <button class=\"btn redo-btn\" (click)=\"onClickRedo()\" [class.disabled]=\"isAIQuickEdit\" *ngIf=\"!feedbackDetails?.fixtureFeedback?.hideRedo\">\r\n                                    Redo\r\n                                </button>\r\n\r\n                                <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditAIFeedback()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_228_12536)\">\r\n                                            <path\r\n                                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_228_12536\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </button>\r\n\r\n                                <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickAcceptAI()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    Accept store response\r\n                                </button>\r\n                            </div>\r\n                        }\r\n\r\n                        <div class=\"mb-4\">\r\n                            <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <path\r\n                                        d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n                                        stroke=\"#101828\" stroke-width=\"1.5\" />\r\n                                </svg>\r\n\r\n\r\n                                <h4>Store response </h4>\r\n                                <span  class=\"badge inactive me-1\" *ngIf=\"!isAIQuickEdit\">\r\n                                    Capacity: {{aiFixture?.fixtureCapacity || 0 }}\r\n                                </span>\r\n                                @if (isApproved) {\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'acceptAi' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithAi'\"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                            d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                                            fill=\"#12B76A\" />\r\n                                    </svg>\r\n\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'redo' \"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n                                            fill=\"black\" />\r\n                                    </svg>\r\n                                }@else {\r\n                                    <svg *ngIf=\"showAction && !isAIQuickEdit\" class=\"ms-auto cursor-pointer\"\r\n                                        (click)=\"toggleAIQuickEdit()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M9 15.0002H15.75M12.375 2.62517C12.6734 2.3268 13.078 2.15918 13.5 2.15918C13.7089 2.15918 13.9158 2.20033 14.1088 2.28029C14.3019 2.36024 14.4773 2.47743 14.625 2.62517C14.7727 2.77291 14.8899 2.9483 14.9699 3.14132C15.0498 3.33435 15.091 3.54124 15.091 3.75017C15.091 3.9591 15.0498 4.16599 14.9699 4.35902C14.8899 4.55204 14.7727 4.72743 14.625 4.87517L5.25 14.2502L2.25 15.0002L3 12.0002L12.375 2.62517Z\"\r\n                                            stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                }\r\n\r\n\r\n                            </div>\r\n                        </div>\r\n                        <editable-fixture [fixture]=\"aiFixture\" [editMode]=\"isAIQuickEdit\"\r\n                            (onCancel)=\"onCancelAIQuickEdit()\" (onDone)=\"onSaveAIQuickEdit($event)\"\r\n                            (editTab)=\"onEditAIFeedback($event)\"></editable-fixture>\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n            <div class=\"p-2\" [ngClass]=\"{'col-4':showAction,'col':!showAction}\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"mb-4\" [ngStyle]=\"{'margin-top':showAction && !isApproved ? '50px' : '12px'}\">\r\n                        <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                            <h4>Store Image </h4>\r\n                        </div>\r\n                    </div>\r\n                    @if(cdn && aiFixture?.fixtureImage){\r\n                        <div class=\"fixture-image\" (click)=\"onClickImagePreview($event, cdn + aiFixture?.fixtureImage)\">\r\n                            @if(isImageLoading) {\r\n                                <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n                            }\r\n                            <img [src]=\"cdn + aiFixture?.fixtureImage\" \r\n                                 alt=\"Store response image\"\r\n                                 [style.display]=\"isImageLoading ? 'none' : 'block'\"\r\n                                 (loadstart)=\"onImageLoadStart()\"\r\n                                 (load)=\"onImageLoad()\"\r\n                                 (error)=\"onImageError()\"\r\n                                 (loadend)=\"onImageLoadEnd()\">\r\n                        </div>\r\n                    }@else {\r\n                        <div class=\"text-center my-7\">\r\n                            <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <path\r\n                                    d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n                                    fill=\"#EAECF0\" />\r\n                                <path\r\n                                    d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n                                    fill=\"#6BCAFF\" />\r\n                                <path\r\n                                    d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n                                    fill=\"#00A3FF\" />\r\n                                <path\r\n                                    d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n                                    fill=\"#00A3FF\" />\r\n                                <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n                                <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n                                <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n                            </svg>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div id=\"vm-comparison\" *ngIf=\"feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig.length\">\r\n            <h5 class=\"mb-1\">Visual Merchandise Images from AI output:</h5>\r\n\r\n            <div class=\"row g-0\">\r\n\r\n                @for (vm of feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig; track $index) {\r\n                    <div class=\"p-2\" [ngClass]=\"{'col-6':showAction, 'col-12':!showAction}\">\r\n                        <div class=\"vm-container\" (click)=\"onClickImagePreview($event, cdn+vm?.vmImage)\">\r\n                            <div class=\"vm-img\">\r\n                                <img [src]=\"cdn+vm?.vmImage\" alt=\"VM Image\">\r\n                            </div>\r\n                            <div class=\"d-flex flex-column gap-2 vm-details \">\r\n                                <h5>{{vm?.vmType}}</h5>\r\n                                <h5>{{vm?.vmName}}</h5>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    }@else {\r\n        <div class=\"my-6\">\r\n            <div class=\"text-center\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                    <path\r\n                        d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                        stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"mt-3 text-center\">\r\n                <div class=\"fw-bold h3 mt-2\">No response</div>\r\n                <div class=\"mt-4\">No AI response found for this fixture.</div>\r\n            </div>\r\n        </div>\r\n    }\r\n\r\n\r\n    @if (feedbackDetails?.fixtureFeedback?.answers?.[0]?.comments.length) {\r\n        <div id=\"fixture-comments\">\r\n            <h5 class=\"mb-2\">Comments</h5>\r\n\r\n            <div class=\"log-block\"\r\n                *ngFor=\"let c of feedbackDetails?.fixtureFeedback?.answers[0]?.comments;let i= index\">\r\n                <!-- User avatar -->\r\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                    <path\r\n                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n                <div class=\"d-flex gap-1 flex-column\">\r\n\r\n                    <div class=\"d-flex gap-1 flex-column\">\r\n                        <h4>{{c?.userName}}</h4>\r\n                        <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                    </div>\r\n\r\n                    @if(c?.responsetype === 'comment'){\r\n                        <h5>{{c?.comment}}</h5>\r\n                    }@else if(c?.responsetype === 'agree'){\r\n\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n                            Marked as \"Keep Plano\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithPlano'\">\r\n                            Marked as \"Keep Plano with Modification\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'acceptAi'\">\r\n                            Marked as \"Accept AI\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithAi'\">\r\n                            Marked as \"Accept AI with Modification\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n                    }@else if(c?.responsetype === 'disagree'){\r\n                        <h5>\r\n                            Marked as \"Redo\"\r\n                        </h5>\r\n                        <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n    }\r\n\r\n    <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n        <button class=\"preview-close\" (click)=\"$event.stopPropagation(); closeImagePreview()\">&#x2715;</button>\r\n        <div class=\"preview-zoom-controls\" (click)=\"$event.stopPropagation()\">\r\n            <button (click)=\"onPreviewZoomOut()\">&#x2212;</button>\r\n            <input type=\"range\" class=\"zoom-slider\" min=\"25\" max=\"500\" step=\"25\"\r\n                   [value]=\"imagePreviewZoom * 100\"\r\n                   (input)=\"onPreviewZoomSlider($event)\" />\r\n            <span>{{ (imagePreviewZoom * 100).toFixed(0) }}%</span>\r\n            <button (click)=\"onPreviewZoomIn()\">&#x2B;</button>\r\n        </div>\r\n        <div class=\"preview-image-container\" (click)=\"$event.stopPropagation()\"\r\n             (mousedown)=\"onPreviewPanStart($event)\"\r\n             (mousemove)=\"onPreviewPanMove($event)\"\r\n             (mouseup)=\"onPreviewPanEnd()\"\r\n             (mouseleave)=\"onPreviewPanEnd()\"\r\n             (wheel)=\"onPreviewWheel($event)\">\r\n            <img [src]=\"selectedImageForPreview\" class=\"full-img\"\r\n                 [style.transform]=\"'scale(' + imagePreviewZoom + ') translate(' + imagePreviewPanX / imagePreviewZoom + 'px,' + imagePreviewPanY / imagePreviewZoom + 'px)'\"\r\n                 draggable=\"false\" />\r\n        </div>\r\n    </div>\r\n\r\n    <ng-template #skeletonLoader>\r\n        <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n            <div class=\"shimmer rounded\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .btn-outline-cus{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .btn-outline-cus:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:default}#verification-feedback .preview-close{position:absolute;top:16px;right:16px;background:#ffffff26;border:none;color:#fff;font-size:20px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10000}#verification-feedback .preview-close:hover{background:#ffffff4d}#verification-feedback .preview-zoom-controls{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#ffffff26;border-radius:8px;padding:6px 16px;z-index:10000}#verification-feedback .preview-zoom-controls span{color:#fff;font-size:14px;min-width:48px;text-align:center;-webkit-user-select:none;user-select:none}#verification-feedback .preview-zoom-controls button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center}#verification-feedback .preview-zoom-controls button:hover{background:#fff3}#verification-feedback .preview-zoom-controls .zoom-slider{-webkit-appearance:none;appearance:none;width:120px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer}#verification-feedback .preview-image-container{overflow:hidden;display:flex;align-items:center;justify-content:center;width:90vw;height:85vh;cursor:default}#verification-feedback .preview-image-container:active{cursor:grabbing}#verification-feedback .full-img{max-width:90vw;max-height:85vh;border-radius:10px;object-fit:contain;cursor:grab;-webkit-user-select:none;user-select:none}#verification-feedback .full-img:active{cursor:grabbing}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}.loader .shimmer{height:unset}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionToggle, selector: "[ngbAccordionToggle]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: FixtureComponent, selector: "fixture", inputs: ["fixture", "showColors", "showVMs", "showBCs", "showHeaderFooterAlways"] }, { kind: "component", type: EditableFixtureComponent, selector: "editable-fixture", inputs: ["fixture", "showColors", "showVMs", "showBCs", "editMode"], outputs: ["onCancel", "onDone", "editTab"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VerificationFeedbackComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-verification-feedback", template: "<section id=\"verification-feedback\">\r\n\r\n    <div *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n        <div ngbAccordionItem=\"details\" [collapsed]=\"feedbackDetails?.taskInfoToggle\">\r\n            <div ngbAccordionHeader ngbAccordionToggle class=\"accordion-button task-info-header\">\r\n                <div class=\"w-100\">\r\n                    <h2>Fixture verification assigned</h2>\r\n                    <p>{{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                </div>\r\n            </div>\r\n\r\n            <div ngbAccordionCollapse>\r\n                <div ngbAccordionBody>\r\n                    <ng-template>\r\n                        <div class=\"log-block\">\r\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                <path\r\n                                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n\r\n                            <div class=\"d-flex gap-1 flex-column\">\r\n                                <h4>{{feedbackDetails?.fixtureFeedback?.taskData?.createdByName}}</h4>\r\n                                <p>\r\n                                    {{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mma, dd MMM yyyy'}}\r\n                                </p>\r\n                                <h5>Assigner</h5>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"log-block\">\r\n                            <!-- User avatar -->\r\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                <path\r\n                                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n\r\n                            <div class=\"d-flex gap-1 flex-column\">\r\n                                <h4> {{feedbackDetails?.fixtureFeedback?.taskData?.userName}}</h4>\r\n                                <p>\r\n                                    {{feedbackDetails?.fixtureFeedback?.taskData?.submitTime_string}}\r\n                                </p>\r\n                                <h5>Assignee</h5>\r\n                            </div>\r\n                        </div>\r\n\r\n\r\n                        @if (feedbackDetails?.globalComments?.length) {\r\n                            <h5 class=\"mb-2\">Comments</h5>\r\n                            <div class=\"log-block\" *ngFor=\"let c of feedbackDetails?.globalComments;let i= index\">\r\n                                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                    <path\r\n                                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n\r\n                                <div class=\"d-flex gap-1 flex-column\">\r\n                                    <h4>{{c?.userName}}</h4>\r\n                                    <p>{{c?.createdAt|date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                                    <h5>{{c?.comment}}</h5>\r\n                                </div>\r\n                            </div>\r\n                        }\r\n                    </ng-template>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <hr *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\">\r\n\r\n    <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n        <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n\r\n\r\n        <h3 class=\"m-0\">{{planoFixture?.header?.label}}</h3>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 flex-wrap\">\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n                {{ planoFixture.fixtureCategory | titlecase}}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n                {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span  class=\"badge inactive me-1\">\r\n                Fixture Capacity: {{ planoFixture?.fixtureCapacity || 0 }}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span  class=\"badge inactive me-1\">\r\n                Visual Merch Capacity: {{ planoFixture?.vmConfig?.length || 0 }}\r\n            </span>\r\n\r\n        </div>\r\n\r\n        <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n            {{currentFixtureIndex}}/{{totalFixtures.length}}\r\n        </h3>\r\n\r\n        <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n\r\n    </div>\r\n\r\n    @if( this.aiFixture?.fixtureId){\r\n        <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n            @if (showAction) {\r\n                <div class=\"col-4 p-2\">\r\n                    <div class=\"wrapper\">\r\n                        <div class=\"d-flex align-items-center gap-3\">\r\n                            @if (!isApproved && showAction) {\r\n                                <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditFeedback()\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_228_12536)\">\r\n                                            <path\r\n                                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_228_12536\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </button>\r\n\r\n                                <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickKeepPlano()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    Keep plano\r\n                                </button>\r\n                            }\r\n                        </div>\r\n                        <div class=\"mb-4\">\r\n                            <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <path\r\n                                        d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n\r\n                                <div class=\"d-flex align-items-center gap-3\">\r\n                                    <h4 class=\"m-0\">Existing template </h4>\r\n                                    <svg [ngbTooltip]=\"planoFixture?.fixtureName\" width=\"20\" height=\"20\"\r\n                                        viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_496_31664)\">\r\n                                            <path\r\n                                                d=\"M10.0013 13.3337V10.0003M10.0013 6.66699H10.0096M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n                                                stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_496_31664\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n\r\n                                </div>\r\n\r\n                                @if (isApproved) {\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'keepPlano' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithPlano' \"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                            d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                                            fill=\"#12B76A\" />\r\n                                    </svg>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                        <fixture [fixture]=\"planoFixture\"></fixture>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"col-4 p-2\">\r\n                    <div class=\"wrapper\">\r\n                        @if (!isApproved && showAction) {\r\n                            <div class=\"d-flex align-items-center gap-3\">\r\n                                <button class=\"btn redo-btn\" (click)=\"onClickRedo()\" [class.disabled]=\"isAIQuickEdit\" *ngIf=\"!feedbackDetails?.fixtureFeedback?.hideRedo\">\r\n                                    Redo\r\n                                </button>\r\n\r\n                                <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditAIFeedback()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_228_12536)\">\r\n                                            <path\r\n                                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_228_12536\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </button>\r\n\r\n                                <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickAcceptAI()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    Accept store response\r\n                                </button>\r\n                            </div>\r\n                        }\r\n\r\n                        <div class=\"mb-4\">\r\n                            <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <path\r\n                                        d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n                                        stroke=\"#101828\" stroke-width=\"1.5\" />\r\n                                </svg>\r\n\r\n\r\n                                <h4>Store response </h4>\r\n                                <span  class=\"badge inactive me-1\" *ngIf=\"!isAIQuickEdit\">\r\n                                    Capacity: {{aiFixture?.fixtureCapacity || 0 }}\r\n                                </span>\r\n                                @if (isApproved) {\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'acceptAi' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithAi'\"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                            d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                                            fill=\"#12B76A\" />\r\n                                    </svg>\r\n\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'redo' \"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n                                            fill=\"black\" />\r\n                                    </svg>\r\n                                }@else {\r\n                                    <svg *ngIf=\"showAction && !isAIQuickEdit\" class=\"ms-auto cursor-pointer\"\r\n                                        (click)=\"toggleAIQuickEdit()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M9 15.0002H15.75M12.375 2.62517C12.6734 2.3268 13.078 2.15918 13.5 2.15918C13.7089 2.15918 13.9158 2.20033 14.1088 2.28029C14.3019 2.36024 14.4773 2.47743 14.625 2.62517C14.7727 2.77291 14.8899 2.9483 14.9699 3.14132C15.0498 3.33435 15.091 3.54124 15.091 3.75017C15.091 3.9591 15.0498 4.16599 14.9699 4.35902C14.8899 4.55204 14.7727 4.72743 14.625 4.87517L5.25 14.2502L2.25 15.0002L3 12.0002L12.375 2.62517Z\"\r\n                                            stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                }\r\n\r\n\r\n                            </div>\r\n                        </div>\r\n                        <editable-fixture [fixture]=\"aiFixture\" [editMode]=\"isAIQuickEdit\"\r\n                            (onCancel)=\"onCancelAIQuickEdit()\" (onDone)=\"onSaveAIQuickEdit($event)\"\r\n                            (editTab)=\"onEditAIFeedback($event)\"></editable-fixture>\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n            <div class=\"p-2\" [ngClass]=\"{'col-4':showAction,'col':!showAction}\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"mb-4\" [ngStyle]=\"{'margin-top':showAction && !isApproved ? '50px' : '12px'}\">\r\n                        <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                            <h4>Store Image </h4>\r\n                        </div>\r\n                    </div>\r\n                    @if(cdn && aiFixture?.fixtureImage){\r\n                        <div class=\"fixture-image\" (click)=\"onClickImagePreview($event, cdn + aiFixture?.fixtureImage)\">\r\n                            @if(isImageLoading) {\r\n                                <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n                            }\r\n                            <img [src]=\"cdn + aiFixture?.fixtureImage\" \r\n                                 alt=\"Store response image\"\r\n                                 [style.display]=\"isImageLoading ? 'none' : 'block'\"\r\n                                 (loadstart)=\"onImageLoadStart()\"\r\n                                 (load)=\"onImageLoad()\"\r\n                                 (error)=\"onImageError()\"\r\n                                 (loadend)=\"onImageLoadEnd()\">\r\n                        </div>\r\n                    }@else {\r\n                        <div class=\"text-center my-7\">\r\n                            <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <path\r\n                                    d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n                                    fill=\"#EAECF0\" />\r\n                                <path\r\n                                    d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n                                    fill=\"#6BCAFF\" />\r\n                                <path\r\n                                    d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n                                    fill=\"#00A3FF\" />\r\n                                <path\r\n                                    d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n                                    fill=\"#00A3FF\" />\r\n                                <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n                                <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n                                <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n                            </svg>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div id=\"vm-comparison\" *ngIf=\"feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig.length\">\r\n            <h5 class=\"mb-1\">Visual Merchandise Images from AI output:</h5>\r\n\r\n            <div class=\"row g-0\">\r\n\r\n                @for (vm of feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig; track $index) {\r\n                    <div class=\"p-2\" [ngClass]=\"{'col-6':showAction, 'col-12':!showAction}\">\r\n                        <div class=\"vm-container\" (click)=\"onClickImagePreview($event, cdn+vm?.vmImage)\">\r\n                            <div class=\"vm-img\">\r\n                                <img [src]=\"cdn+vm?.vmImage\" alt=\"VM Image\">\r\n                            </div>\r\n                            <div class=\"d-flex flex-column gap-2 vm-details \">\r\n                                <h5>{{vm?.vmType}}</h5>\r\n                                <h5>{{vm?.vmName}}</h5>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    }@else {\r\n        <div class=\"my-6\">\r\n            <div class=\"text-center\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                    <path\r\n                        d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                        stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"mt-3 text-center\">\r\n                <div class=\"fw-bold h3 mt-2\">No response</div>\r\n                <div class=\"mt-4\">No AI response found for this fixture.</div>\r\n            </div>\r\n        </div>\r\n    }\r\n\r\n\r\n    @if (feedbackDetails?.fixtureFeedback?.answers?.[0]?.comments.length) {\r\n        <div id=\"fixture-comments\">\r\n            <h5 class=\"mb-2\">Comments</h5>\r\n\r\n            <div class=\"log-block\"\r\n                *ngFor=\"let c of feedbackDetails?.fixtureFeedback?.answers[0]?.comments;let i= index\">\r\n                <!-- User avatar -->\r\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                    <path\r\n                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n                <div class=\"d-flex gap-1 flex-column\">\r\n\r\n                    <div class=\"d-flex gap-1 flex-column\">\r\n                        <h4>{{c?.userName}}</h4>\r\n                        <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                    </div>\r\n\r\n                    @if(c?.responsetype === 'comment'){\r\n                        <h5>{{c?.comment}}</h5>\r\n                    }@else if(c?.responsetype === 'agree'){\r\n\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n                            Marked as \"Keep Plano\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithPlano'\">\r\n                            Marked as \"Keep Plano with Modification\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'acceptAi'\">\r\n                            Marked as \"Accept AI\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithAi'\">\r\n                            Marked as \"Accept AI with Modification\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n                    }@else if(c?.responsetype === 'disagree'){\r\n                        <h5>\r\n                            Marked as \"Redo\"\r\n                        </h5>\r\n                        <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n    }\r\n\r\n    <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n        <button class=\"preview-close\" (click)=\"$event.stopPropagation(); closeImagePreview()\">&#x2715;</button>\r\n        <div class=\"preview-zoom-controls\" (click)=\"$event.stopPropagation()\">\r\n            <button (click)=\"onPreviewZoomOut()\">&#x2212;</button>\r\n            <input type=\"range\" class=\"zoom-slider\" min=\"25\" max=\"500\" step=\"25\"\r\n                   [value]=\"imagePreviewZoom * 100\"\r\n                   (input)=\"onPreviewZoomSlider($event)\" />\r\n            <span>{{ (imagePreviewZoom * 100).toFixed(0) }}%</span>\r\n            <button (click)=\"onPreviewZoomIn()\">&#x2B;</button>\r\n        </div>\r\n        <div class=\"preview-image-container\" (click)=\"$event.stopPropagation()\"\r\n             (mousedown)=\"onPreviewPanStart($event)\"\r\n             (mousemove)=\"onPreviewPanMove($event)\"\r\n             (mouseup)=\"onPreviewPanEnd()\"\r\n             (mouseleave)=\"onPreviewPanEnd()\"\r\n             (wheel)=\"onPreviewWheel($event)\">\r\n            <img [src]=\"selectedImageForPreview\" class=\"full-img\"\r\n                 [style.transform]=\"'scale(' + imagePreviewZoom + ') translate(' + imagePreviewPanX / imagePreviewZoom + 'px,' + imagePreviewPanY / imagePreviewZoom + 'px)'\"\r\n                 draggable=\"false\" />\r\n        </div>\r\n    </div>\r\n\r\n    <ng-template #skeletonLoader>\r\n        <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n            <div class=\"shimmer rounded\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .btn-outline-cus{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .btn-outline-cus:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:default}#verification-feedback .preview-close{position:absolute;top:16px;right:16px;background:#ffffff26;border:none;color:#fff;font-size:20px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10000}#verification-feedback .preview-close:hover{background:#ffffff4d}#verification-feedback .preview-zoom-controls{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#ffffff26;border-radius:8px;padding:6px 16px;z-index:10000}#verification-feedback .preview-zoom-controls span{color:#fff;font-size:14px;min-width:48px;text-align:center;-webkit-user-select:none;user-select:none}#verification-feedback .preview-zoom-controls button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center}#verification-feedback .preview-zoom-controls button:hover{background:#fff3}#verification-feedback .preview-zoom-controls .zoom-slider{-webkit-appearance:none;appearance:none;width:120px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer}#verification-feedback .preview-image-container{overflow:hidden;display:flex;align-items:center;justify-content:center;width:90vw;height:85vh;cursor:default}#verification-feedback .preview-image-container:active{cursor:grabbing}#verification-feedback .full-img{max-width:90vw;max-height:85vh;border-radius:10px;object-fit:contain;cursor:grab;-webkit-user-select:none;user-select:none}#verification-feedback .full-img:active{cursor:grabbing}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}.loader .shimmer{height:unset}\n"] }]
+            args: [{ selector: "lib-verification-feedback", template: "<section id=\"verification-feedback\">\r\n\r\n    <div *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n        <div ngbAccordionItem=\"details\" [collapsed]=\"feedbackDetails?.taskInfoToggle\">\r\n            <div ngbAccordionHeader ngbAccordionToggle class=\"accordion-button task-info-header\">\r\n                <div class=\"w-100\">\r\n                    <h2>Fixture verification assigned</h2>\r\n                    <p>{{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                </div>\r\n            </div>\r\n\r\n            <div ngbAccordionCollapse>\r\n                <div ngbAccordionBody>\r\n                    <ng-template>\r\n                        <div class=\"log-block\">\r\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                <path\r\n                                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n\r\n                            <div class=\"d-flex gap-1 flex-column\">\r\n                                <h4>{{feedbackDetails?.fixtureFeedback?.taskData?.createdByName}}</h4>\r\n                                <p>\r\n                                    {{feedbackDetails?.fixtureFeedback?.taskData?.createdAt | date: 'hh:mma, dd MMM yyyy'}}\r\n                                </p>\r\n                                <h5>Assigner</h5>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"log-block\">\r\n                            <!-- User avatar -->\r\n                            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                <path\r\n                                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n\r\n                            <div class=\"d-flex gap-1 flex-column\">\r\n                                <h4> {{feedbackDetails?.fixtureFeedback?.taskData?.userName}}</h4>\r\n                                <p>\r\n                                    {{feedbackDetails?.fixtureFeedback?.taskData?.submitTime_string}}\r\n                                </p>\r\n                                <h5>Assignee</h5>\r\n                            </div>\r\n                        </div>\r\n\r\n\r\n                        @if (feedbackDetails?.globalComments?.length) {\r\n                            <h5 class=\"mb-2\">Comments</h5>\r\n                            <div class=\"log-block\" *ngFor=\"let c of feedbackDetails?.globalComments;let i= index\">\r\n                                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                                    <path\r\n                                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n\r\n                                <div class=\"d-flex gap-1 flex-column\">\r\n                                    <h4>{{c?.userName}}</h4>\r\n                                    <p>{{c?.createdAt|date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                                    <h5>{{c?.comment}}</h5>\r\n                                </div>\r\n                            </div>\r\n                        }\r\n                    </ng-template>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <hr *ngIf=\"feedbackDetails?.fixtureFeedback?.taskData\">\r\n\r\n    <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n        <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n\r\n\r\n        <h3 class=\"m-0\">{{planoFixture?.header?.label}}</h3>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 flex-wrap\">\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n                {{ planoFixture.fixtureCategory | titlecase}}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n                {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span  class=\"badge inactive me-1\">\r\n                Fixture Capacity: {{ planoFixtureCapacity }}\r\n            </span>\r\n\r\n            <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n            </svg>\r\n\r\n            <span  class=\"badge inactive me-1\">\r\n                Visual Merch Capacity: {{ planoFixture?.vmConfig?.length || 0 }}\r\n            </span>\r\n\r\n        </div>\r\n\r\n        <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n            {{currentFixtureIndex}}/{{totalFixtures.length}}\r\n        </h3>\r\n\r\n        <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n\r\n    </div>\r\n\r\n    @if( this.aiFixture?.fixtureId){\r\n        <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n            @if (showAction) {\r\n                <div class=\"col-4 p-2\">\r\n                    <div class=\"wrapper\">\r\n                        <div class=\"d-flex align-items-center gap-3\">\r\n                            @if (!isApproved && showAction) {\r\n                                <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditFeedback()\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_228_12536)\">\r\n                                            <path\r\n                                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_228_12536\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </button>\r\n\r\n                                <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickKeepPlano()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    Keep plano\r\n                                </button>\r\n                            }\r\n                        </div>\r\n                        <div class=\"mb-4\">\r\n                            <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <path\r\n                                        d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n\r\n                                <div class=\"d-flex align-items-center gap-3\">\r\n                                    <h4 class=\"m-0\">Existing template </h4>\r\n                                    <svg [ngbTooltip]=\"planoFixture?.fixtureName\" width=\"20\" height=\"20\"\r\n                                        viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_496_31664)\">\r\n                                            <path\r\n                                                d=\"M10.0013 13.3337V10.0003M10.0013 6.66699H10.0096M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z\"\r\n                                                stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_496_31664\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n\r\n                                </div>\r\n\r\n                                @if (isApproved) {\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'keepPlano' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithPlano' \"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                            d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                                            fill=\"#12B76A\" />\r\n                                    </svg>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                        <fixture [fixture]=\"planoFixture\"></fixture>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"col-4 p-2\">\r\n                    <div class=\"wrapper\">\r\n                        @if (!isApproved && showAction) {\r\n                            <div class=\"d-flex align-items-center gap-3\">\r\n                                <button class=\"btn redo-btn\" (click)=\"onClickRedo()\" [class.disabled]=\"isAIQuickEdit\" *ngIf=\"!feedbackDetails?.fixtureFeedback?.hideRedo\">\r\n                                    Redo\r\n                                </button>\r\n\r\n                                <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onEditAIFeedback()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <g clip-path=\"url(#clip0_228_12536)\">\r\n                                            <path\r\n                                                d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                                                stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_228_12536\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </button>\r\n\r\n                                <button class=\"btn primary-btn\" type=\"button\" (click)=\"onClickAcceptAI()\"\r\n                                    [disabled]=\"isAIQuickEdit\">\r\n                                    Accept store response\r\n                                </button>\r\n                            </div>\r\n                        }\r\n\r\n                        <div class=\"mb-4\">\r\n                            <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                                    <path\r\n                                        d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n                                        stroke=\"#101828\" stroke-width=\"1.5\" />\r\n                                </svg>\r\n\r\n\r\n                                <h4>Store response </h4>\r\n                                <span  class=\"badge inactive me-1\" *ngIf=\"!isAIQuickEdit\">\r\n                                    Capacity: {{aiFixture?.fixtureCapacity || 0 }}\r\n                                </span>\r\n                                @if (isApproved) {\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'acceptAi' || feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'editWithAi'\"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                            d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                                            fill=\"#12B76A\" />\r\n                                    </svg>\r\n\r\n                                    <svg *ngIf=\"feedbackDetails?.fixtureFeedback?.answers[0]?.userAction === 'redo' \"\r\n                                        class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n                                            fill=\"black\" />\r\n                                    </svg>\r\n                                }@else {\r\n                                    <svg *ngIf=\"showAction && !isAIQuickEdit\" class=\"ms-auto cursor-pointer\"\r\n                                        (click)=\"toggleAIQuickEdit()\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M9 15.0002H15.75M12.375 2.62517C12.6734 2.3268 13.078 2.15918 13.5 2.15918C13.7089 2.15918 13.9158 2.20033 14.1088 2.28029C14.3019 2.36024 14.4773 2.47743 14.625 2.62517C14.7727 2.77291 14.8899 2.9483 14.9699 3.14132C15.0498 3.33435 15.091 3.54124 15.091 3.75017C15.091 3.9591 15.0498 4.16599 14.9699 4.35902C14.8899 4.55204 14.7727 4.72743 14.625 4.87517L5.25 14.2502L2.25 15.0002L3 12.0002L12.375 2.62517Z\"\r\n                                            stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                }\r\n\r\n\r\n                            </div>\r\n                        </div>\r\n                        <editable-fixture [fixture]=\"aiFixture\" [editMode]=\"isAIQuickEdit\"\r\n                            (onCancel)=\"onCancelAIQuickEdit()\" (onDone)=\"onSaveAIQuickEdit($event)\"\r\n                            (editTab)=\"onEditAIFeedback($event)\"></editable-fixture>\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n            <div class=\"p-2\" [ngClass]=\"{'col-4':showAction,'col':!showAction}\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"mb-4\" [ngStyle]=\"{'margin-top':showAction && !isApproved ? '50px' : '12px'}\">\r\n                        <div class=\"d-flex align-items-center gap-2  my-4\">\r\n                            <h4>Store Image </h4>\r\n                        </div>\r\n                    </div>\r\n                    @if(cdn && aiFixture?.fixtureImage){\r\n                        <div class=\"fixture-image\" (click)=\"onClickImagePreview($event, cdn + aiFixture?.fixtureImage)\">\r\n                            @if(isImageLoading) {\r\n                                <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n                            }\r\n                            <img [src]=\"cdn + aiFixture?.fixtureImage\" \r\n                                 alt=\"Store response image\"\r\n                                 [style.display]=\"isImageLoading ? 'none' : 'block'\"\r\n                                 (loadstart)=\"onImageLoadStart()\"\r\n                                 (load)=\"onImageLoad()\"\r\n                                 (error)=\"onImageError()\"\r\n                                 (loadend)=\"onImageLoadEnd()\">\r\n                        </div>\r\n                    }@else {\r\n                        <div class=\"text-center my-7\">\r\n                            <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <path\r\n                                    d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n                                    fill=\"#EAECF0\" />\r\n                                <path\r\n                                    d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n                                    fill=\"#6BCAFF\" />\r\n                                <path\r\n                                    d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n                                    fill=\"#00A3FF\" />\r\n                                <path\r\n                                    d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n                                    fill=\"#00A3FF\" />\r\n                                <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n                                <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n                                <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n                            </svg>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div id=\"vm-comparison\" *ngIf=\"feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig.length\">\r\n            <h5 class=\"mb-1\">Visual Merchandise Images from AI output:</h5>\r\n\r\n            <div class=\"row g-0\">\r\n\r\n                @for (vm of feedbackDetails?.fixtureFeedback?.fixtureAIData?.vmConfig; track $index) {\r\n                    <div class=\"p-2\" [ngClass]=\"{'col-6':showAction, 'col-12':!showAction}\">\r\n                        <div class=\"vm-container\" (click)=\"onClickImagePreview($event, cdn+vm?.vmImage)\">\r\n                            <div class=\"vm-img\">\r\n                                <img [src]=\"cdn+vm?.vmImage\" alt=\"VM Image\">\r\n                            </div>\r\n                            <div class=\"d-flex flex-column gap-2 vm-details \">\r\n                                <h5>{{vm?.vmType}}</h5>\r\n                                <h5>{{vm?.vmName}}</h5>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    }@else {\r\n        <div class=\"my-6\">\r\n            <div class=\"text-center\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                    <path\r\n                        d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                        stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"mt-3 text-center\">\r\n                <div class=\"fw-bold h3 mt-2\">No response</div>\r\n                <div class=\"mt-4\">No AI response found for this fixture.</div>\r\n            </div>\r\n        </div>\r\n    }\r\n\r\n\r\n    @if (feedbackDetails?.fixtureFeedback?.answers?.[0]?.comments.length) {\r\n        <div id=\"fixture-comments\">\r\n            <h5 class=\"mb-2\">Comments</h5>\r\n\r\n            <div class=\"log-block\"\r\n                *ngFor=\"let c of feedbackDetails?.fixtureFeedback?.answers[0]?.comments;let i= index\">\r\n                <!-- User avatar -->\r\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                    <path\r\n                        d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n                <div class=\"d-flex gap-1 flex-column\">\r\n\r\n                    <div class=\"d-flex gap-1 flex-column\">\r\n                        <h4>{{c?.userName}}</h4>\r\n                        <p>{{c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy'}}</p>\r\n                    </div>\r\n\r\n                    @if(c?.responsetype === 'comment'){\r\n                        <h5>{{c?.comment}}</h5>\r\n                    }@else if(c?.responsetype === 'agree'){\r\n\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n                            Marked as \"Keep Plano\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithPlano'\">\r\n                            Marked as \"Keep Plano with Modification\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'acceptAi'\">\r\n                            Marked as \"Accept AI\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"feedbackDetails?.fixtureFeedback?.answers?.[0]?.userAction === 'editWithAi'\">\r\n                            Marked as \"Accept AI with Modification\".\r\n                        </h5>\r\n                        <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n                    }@else if(c?.responsetype === 'disagree'){\r\n                        <h5>\r\n                            Marked as \"Redo\"\r\n                        </h5>\r\n                        <h5 *ngIf=\"c?.comment\">Note: {{c.comment}}</h5>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n    }\r\n\r\n    <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n        <button class=\"preview-close\" (click)=\"$event.stopPropagation(); closeImagePreview()\">&#x2715;</button>\r\n        <div class=\"preview-zoom-controls\" (click)=\"$event.stopPropagation()\">\r\n            <button (click)=\"onPreviewZoomOut()\">&#x2212;</button>\r\n            <input type=\"range\" class=\"zoom-slider\" min=\"25\" max=\"500\" step=\"25\"\r\n                   [value]=\"imagePreviewZoom * 100\"\r\n                   (input)=\"onPreviewZoomSlider($event)\" />\r\n            <span>{{ (imagePreviewZoom * 100).toFixed(0) }}%</span>\r\n            <button (click)=\"onPreviewZoomIn()\">&#x2B;</button>\r\n        </div>\r\n        <div class=\"preview-image-container\" (click)=\"$event.stopPropagation()\"\r\n             (mousedown)=\"onPreviewPanStart($event)\"\r\n             (mousemove)=\"onPreviewPanMove($event)\"\r\n             (mouseup)=\"onPreviewPanEnd()\"\r\n             (mouseleave)=\"onPreviewPanEnd()\"\r\n             (wheel)=\"onPreviewWheel($event)\">\r\n            <img [src]=\"selectedImageForPreview\" class=\"full-img\"\r\n                 [style.transform]=\"'scale(' + imagePreviewZoom + ') translate(' + imagePreviewPanX / imagePreviewZoom + 'px,' + imagePreviewPanY / imagePreviewZoom + 'px)'\"\r\n                 draggable=\"false\" />\r\n        </div>\r\n    </div>\r\n\r\n    <ng-template #skeletonLoader>\r\n        <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n            <div class=\"shimmer rounded\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                    <br />\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .btn-outline-cus{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .btn-outline-cus:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:default}#verification-feedback .preview-close{position:absolute;top:16px;right:16px;background:#ffffff26;border:none;color:#fff;font-size:20px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10000}#verification-feedback .preview-close:hover{background:#ffffff4d}#verification-feedback .preview-zoom-controls{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#ffffff26;border-radius:8px;padding:6px 16px;z-index:10000}#verification-feedback .preview-zoom-controls span{color:#fff;font-size:14px;min-width:48px;text-align:center;-webkit-user-select:none;user-select:none}#verification-feedback .preview-zoom-controls button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center}#verification-feedback .preview-zoom-controls button:hover{background:#fff3}#verification-feedback .preview-zoom-controls .zoom-slider{-webkit-appearance:none;appearance:none;width:120px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer}#verification-feedback .preview-image-container{overflow:hidden;display:flex;align-items:center;justify-content:center;width:90vw;height:85vh;cursor:default}#verification-feedback .preview-image-container:active{cursor:grabbing}#verification-feedback .full-img{max-width:90vw;max-height:85vh;border-radius:10px;object-fit:contain;cursor:grab;-webkit-user-select:none;user-select:none}#verification-feedback .full-img:active{cursor:grabbing}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}.loader .shimmer{height:unset}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.GlobalStateService }, { type: i1$1.NgbModal }], propDecorators: { floorData: [{
                 type: Input
             }], totalFixtures: [{
@@ -13727,6 +13765,11 @@ class ZoneVerificationFeedbackComponent {
     }
     planoFixture;
     zoneFixture;
+    // Live fixture capacity = sum of individual shelf capacities (see plano.function),
+    // kept consistent with the planogram canvas instead of the stored fixtureCapacity.
+    get planoFixtureCapacity() {
+        return getFixtureProductCapacity(this.planoFixture?.shelfConfig);
+    }
     currentFixtureIndex = 0;
     selectedImageForPreview = null;
     imagePreviewZoom = 1;
@@ -14000,11 +14043,11 @@ class ZoneVerificationFeedbackComponent {
         this.isImageLoading = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneVerificationFeedbackComponent, deps: [{ token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ZoneVerificationFeedbackComponent, selector: "lib-zone-verification-feedback", inputs: { floorData: "floorData", feedbackDetails: "feedbackDetails", zoneTask: "zoneTask", zoneFeedback: "zoneFeedback", totalFixtures: "totalFixtures", cdn: "cdn", showAction: "showAction" }, outputs: { changeFixture: "changeFixture", action: "action" }, viewQueries: [{ propertyName: "editableFixture", first: true, predicate: ZoneEditableFixtureComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section id=\"verification-feedback\">\r\n\r\n  <!-- Task info accordion -->\r\n  <div *ngIf=\"hasZoneTask\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n    <div ngbAccordionItem=\"details\">\r\n      <div ngbAccordionHeader ngbAccordionToggle class=\"accordion-button task-info-header\">\r\n        <div class=\"w-100\">\r\n          <h2>Zone verification assigned</h2>\r\n          <p>{{ zoneTask?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n        </div>\r\n      </div>\r\n\r\n      <div ngbAccordionCollapse>\r\n        <div ngbAccordionBody>\r\n          <ng-template>\r\n            <div class=\"log-block\">\r\n              <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                <path\r\n                  d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                  stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n\r\n              <div class=\"d-flex gap-1 flex-column\">\r\n                <h4>{{ zoneTask?.createdByName }}</h4>\r\n                <p>{{ zoneTask?.createdAt | date: 'hh:mma, dd MMM yyyy' }}</p>\r\n                <h5>Assigner</h5>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"log-block\">\r\n              <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                <path\r\n                  d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                  stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n\r\n              <div class=\"d-flex gap-1 flex-column\">\r\n                <h4>{{ zoneTask?.userName }}</h4>\r\n                <p>{{ zoneTask?.submitTime_string || zoneTask?.startTime_string }}</p>\r\n                <h5>Assignee</h5>\r\n              </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"zoneTask?.comments?.length\">\r\n              <h5 class=\"mb-2\">Comments</h5>\r\n              <div class=\"log-block\" *ngFor=\"let c of zoneTask?.comments\">\r\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                  <path\r\n                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <div class=\"d-flex gap-1 flex-column\">\r\n                  <h4>{{ c?.userName }}</h4>\r\n                  <p>{{ c?.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n                  <h5>{{ c?.comment }}</h5>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <hr *ngIf=\"hasZoneTask\">\r\n\r\n  <!-- Empty state: no task assigned -->\r\n  <ng-container *ngIf=\"!hasZoneTask\">\r\n    <div class=\"my-6\">\r\n      <div class=\"text-center\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n          <path\r\n            d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n            stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n        </svg>\r\n      </div>\r\n      <div class=\"mt-3 text-center\">\r\n        <div class=\"fw-bold h3 mt-2\">No response</div>\r\n        <div class=\"mt-4\">No zone verification task has been assigned for this floor.</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Empty state: task assigned but not yet submitted (only on a fresh task \u2014 during a\r\n       redo's open period we keep the previous round's responses visible like fixture does) -->\r\n  <ng-container *ngIf=\"hasZoneTask && isTaskOpen && !zoneTask?.redoStatus\">\r\n    <div class=\"my-6\">\r\n      <div class=\"text-center\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n          <path\r\n            d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n            stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n        </svg>\r\n      </div>\r\n      <div class=\"mt-3 text-center\">\r\n        <div class=\"fw-bold h3 mt-2\">No response</div>\r\n        <div class=\"mt-4\">Task assigned. Awaiting submission from the store.</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Header strip + 3-column comparison: visible when task is inprogress / submit, OR during\r\n       a redo's open period (we render the previous round's data read-only since canShowActions\r\n       already gates the action buttons on checklistStatus === 'submit') -->\r\n  <ng-container *ngIf=\"hasZoneTask && (!isTaskOpen || zoneTask?.redoStatus)\">\r\n\r\n    <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n      <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n        viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n\r\n      <h3 class=\"m-0\">{{ planoFixture?.header?.label }}</h3>\r\n\r\n      <div class=\"d-flex align-items-center gap-3 flex-wrap\">\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n          {{ planoFixture.fixtureCategory | titlecase }}\r\n        </span>\r\n\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n          {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n        </span>\r\n\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span class=\"badge inactive me-1\">\r\n          Fixture Capacity: {{ planoFixture?.fixtureCapacity || 0 }}\r\n        </span>\r\n      </div>\r\n\r\n      <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n        {{ currentFixtureIndex }}/{{ totalFixtures.length }}\r\n      </h3>\r\n\r\n      <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n        viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </div>\r\n\r\n    <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n\r\n      @if (showAction) {\r\n        <!-- Column 1: Existing template (current plano) -->\r\n        <!-- <div class=\"col-4 p-2\">\r\n        <div class=\"wrapper\">\r\n          @if (canShowActions && hasFixtureResponse) {\r\n            <div class=\"d-flex align-items-center gap-3\">\r\n              <button class=\"btn primary-btn ms-auto\" type=\"button\" (click)=\"onClickKeepPlano()\">\r\n                Keep plano\r\n              </button>\r\n            </div>\r\n          }\r\n          <div class=\"mb-4\">\r\n            <div class=\"d-flex align-items-center gap-2 my-4\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n                  stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n              <h4 class=\"m-0\">Existing template</h4>\r\n              <svg *ngIf=\"isApproved && currentUserAction === 'keepPlano'\"\r\n                class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                  d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                  fill=\"#12B76A\" />\r\n              </svg>\r\n            </div>\r\n          </div>\r\n          <fixture [fixture]=\"planoFixture\" [showVMs]=\"true\" [showHeaderFooterAlways]=\"true\"></fixture>\r\n        </div>\r\n      </div> -->\r\n\r\n        <!-- Column 2: Store response (zone-grouped) -->\r\n        <div class=\"col-6 p-2\">\r\n          <div class=\"wrapper\">\r\n            @if (isClFixture) {\r\n              <div class=\"my-6\">\r\n                <div class=\"text-center\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                    <path\r\n                      d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                      stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                  </svg>\r\n                </div>\r\n                <div class=\"mt-3 text-center\">\r\n                  <div class=\"fw-bold h3 mt-2\">CL Excluded</div>\r\n                </div>\r\n              </div>\r\n            } @else {\r\n              @if (canShowActions && hasFixtureResponse) {\r\n                <div class=\"d-flex align-items-center gap-3\">\r\n                  <!-- <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onClickEditResponse()\">\r\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <path\r\n                        d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                        stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                  </button> -->\r\n                  <button class=\"btn redo-btn\" type=\"button\" (click)=\"onClickRedo()\">\r\n                    Redo\r\n                  </button>\r\n                  <button class=\"btn btn-outline btn-outline-cus ms-auto\" type=\"button\" (click)=\"onClickKeepPlano()\">\r\n                    Reject\r\n                  </button>\r\n                  <button class=\"btn primary-btn\" type=\"button\"\r\n                    [disabled]=\"!editableFixture?.isValid\"\r\n                    [title]=\"editableFixture?.validationMessage || ''\"\r\n                    (click)=\"onClickAcceptResponse()\">\r\n                    Accept\r\n                  </button>\r\n                </div>\r\n              }\r\n              <div class=\"mb-4\">\r\n                <div class=\"d-flex align-items-center gap-2 my-4\">\r\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n                      stroke=\"#101828\" stroke-width=\"1.5\" />\r\n                  </svg>\r\n                  <h4>Store response</h4>\r\n                  <span *ngIf=\"hasFixtureResponse\" class=\"badge inactive me-1\">\r\n                    Capacity: {{ zoneFixture?.fixtureCapacity || 0 }}\r\n                  </span>\r\n                  <svg\r\n                    *ngIf=\"isApproved && (currentUserAction === 'acceptResponse' || currentUserAction === 'editAccepted')\"\r\n                    class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                      d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                      fill=\"#12B76A\" />\r\n                  </svg>\r\n\r\n                  <svg *ngIf=\"isApproved && (currentUserAction === 'keepPlano')\" class=\"ms-auto\" width=\"20\" height=\"20\"\r\n                    viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n                    <rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FEE4E2\" />\r\n\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                      d=\"M6.225 6.225C6.56667 5.88333 7.11667 5.88333 7.45833 6.225L10 8.76667L12.5417 6.225C12.8833 5.88333 13.4333 5.88333 13.775 6.225C14.1167 6.56667 14.1167 7.11667 13.775 7.45833L11.2333 10L13.775 12.5417C14.1167 12.8833 14.1167 13.4333 13.775 13.775C13.4333 14.1167 12.8833 14.1167 12.5417 13.775L10 11.2333L7.45833 13.775C7.11667 14.1167 6.56667 14.1167 6.225 13.775C5.88333 13.4333 5.88333 12.8833 6.225 12.5417L8.76667 10L6.225 7.45833C5.88333 7.11667 5.88333 6.56667 6.225 6.225Z\"\r\n                      fill=\"#F04438\" />\r\n                  </svg>\r\n                  <svg *ngIf=\"currentUserAction === 'redo'\"\r\n                    class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n                      fill=\"black\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              @if (hasFixtureResponse) {\r\n                <zone-editable-fixture\r\n                  [fixture]=\"zoneFixture\"\r\n                  [planoFixture]=\"planoFixture\"\r\n                  [showVMs]=\"false\"\r\n                  [showHeaderFooterAlways]=\"true\"\r\n                  [editable]=\"canShowActions\">\r\n                </zone-editable-fixture>\r\n              } @else {\r\n                <div class=\"my-6\">\r\n                  <div class=\"text-center\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                      <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                      <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                      <path\r\n                        d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                        stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                    </svg>\r\n                  </div>\r\n                  <div class=\"mt-3 text-center\">\r\n                    <div>No response for this fixture yet.</div>\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Column 3: Store image -->\r\n      <div class=\"p-2\" [ngClass]=\"{'col-6': showAction, 'col': !showAction}\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"mb-4\" [ngStyle]=\"{'margin-top':'12px'}\">\r\n            <div class=\"d-flex align-items-center gap-2 my-4\">\r\n              <h4>Store Image</h4>\r\n            </div>\r\n          </div>\r\n          @if (zoneImageUrl) {\r\n            <div class=\"fixture-image\" (click)=\"onClickImagePreview($event, zoneImageUrl)\">\r\n              @if (isImageLoading) {\r\n                <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n              }\r\n              <img [src]=\"zoneImageUrl\" alt=\"Store response image\"\r\n                [style.display]=\"isImageLoading ? 'none' : 'block'\" (loadstart)=\"onImageLoadStart()\"\r\n                (load)=\"onImageLoad()\" (error)=\"onImageError()\" (loadend)=\"onImageLoadEnd()\">\r\n            </div>\r\n\r\n              <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n                <button class=\"preview-close\" (click)=\"$event.stopPropagation(); closeImagePreview()\">&#x2715;</button>\r\n                <div class=\"preview-zoom-controls\" (click)=\"$event.stopPropagation()\">\r\n                  <button (click)=\"onPreviewZoomOut()\">&#x2212;</button>\r\n                  <input type=\"range\" class=\"zoom-slider\" min=\"25\" max=\"500\" step=\"25\" [value]=\"imagePreviewZoom * 100\"\r\n                    (input)=\"onPreviewZoomSlider($event)\" />\r\n                  <span>{{ (imagePreviewZoom * 100).toFixed(0) }}%</span>\r\n                  <button (click)=\"onPreviewZoomIn()\">&#x2B;</button>\r\n                </div>\r\n                <div class=\"preview-image-container\" (click)=\"$event.stopPropagation()\"\r\n                  (mousedown)=\"onPreviewPanStart($event)\" (mousemove)=\"onPreviewPanMove($event)\"\r\n                  (mouseup)=\"onPreviewPanEnd()\" (mouseleave)=\"onPreviewPanEnd()\" (wheel)=\"onPreviewWheel($event)\">\r\n                  <img [src]=\"selectedImageForPreview\" class=\"full-img\"\r\n                    [style.transform]=\"'scale(' + imagePreviewZoom + ') translate(' + imagePreviewPanX / imagePreviewZoom + 'px,' + imagePreviewPanY / imagePreviewZoom + 'px)'\"\r\n                    draggable=\"false\" />\r\n                </div>\r\n              </div>\r\n            } @else {\r\n              <div class=\"my-6\">\r\n                <div class=\"text-center\">\r\n                  <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n                      fill=\"#EAECF0\" />\r\n                    <path\r\n                      d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n                      fill=\"#6BCAFF\" />\r\n                    <path\r\n                      d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n                      fill=\"#00A3FF\" />\r\n                    <path\r\n                      d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n                      fill=\"#00A3FF\" />\r\n                    <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n                    <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n                    <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (zoneFeedback?.answers?.[0]?.comments?.length) {\r\n      <div id=\"fixture-comments\">\r\n        <h5 class=\"mb-2\">Comments</h5>\r\n\r\n        <div class=\"log-block\" *ngFor=\"let c of zoneFeedback?.answers?.[0]?.comments; let i = index\">\r\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n            <path\r\n              d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n              stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n\r\n          <div class=\"d-flex gap-1 flex-column\">\r\n            <div class=\"d-flex gap-1 flex-column\">\r\n              <h4>{{ c?.userName }}</h4>\r\n              <p>{{ c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n            </div>\r\n\r\n            @if (c?.responsetype === 'comment') {\r\n              <h5>{{ c?.comment }}</h5>\r\n            } @else if (c?.responsetype === 'agree') {\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n                Marked as \"Keep Plano\".\r\n              </h5>\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'acceptResponse'\">\r\n                Marked as \"Accept Response\".\r\n              </h5>\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'editAccepted'\">\r\n                Marked as \"Accept Response with Modification\".\r\n              </h5>\r\n              <h5 *ngIf=\"c?.comment\">Note: {{ c.comment }}</h5>\r\n            } @else if (c?.responsetype === 'disagree') {\r\n              <h5>Marked as \"Redo\"</h5>\r\n              <h5 *ngIf=\"c?.comment\">Note: {{ c.comment }}</h5>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n\r\n  <ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n      <div class=\"shimmer rounded\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .btn-outline-cus{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .btn-outline-cus:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}.loader .shimmer{height:unset}#verification-feedback .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:default}#verification-feedback .preview-close{position:absolute;top:16px;right:16px;background:#ffffff26;border:none;color:#fff;font-size:20px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10000}#verification-feedback .preview-close:hover{background:#ffffff4d}#verification-feedback .preview-zoom-controls{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#ffffff26;border-radius:8px;padding:6px 16px;z-index:10000}#verification-feedback .preview-zoom-controls span{color:#fff;font-size:14px;min-width:48px;text-align:center;-webkit-user-select:none;user-select:none}#verification-feedback .preview-zoom-controls button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center}#verification-feedback .preview-zoom-controls button:hover{background:#fff3}#verification-feedback .preview-zoom-controls .zoom-slider{-webkit-appearance:none;appearance:none;width:120px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer}#verification-feedback .preview-image-container{overflow:hidden;display:flex;align-items:center;justify-content:center;width:90vw;height:85vh;cursor:default}#verification-feedback .preview-image-container:active{cursor:grabbing}#verification-feedback .full-img{max-width:90vw;max-height:85vh;border-radius:10px;object-fit:contain;cursor:grab;-webkit-user-select:none;user-select:none}#verification-feedback .full-img:active{cursor:grabbing}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionToggle, selector: "[ngbAccordionToggle]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: ZoneEditableFixtureComponent, selector: "zone-editable-fixture", inputs: ["fixture", "planoFixture", "showColors", "showVMs", "showBCs", "showHeaderFooterAlways", "editable"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ZoneVerificationFeedbackComponent, selector: "lib-zone-verification-feedback", inputs: { floorData: "floorData", feedbackDetails: "feedbackDetails", zoneTask: "zoneTask", zoneFeedback: "zoneFeedback", totalFixtures: "totalFixtures", cdn: "cdn", showAction: "showAction" }, outputs: { changeFixture: "changeFixture", action: "action" }, viewQueries: [{ propertyName: "editableFixture", first: true, predicate: ZoneEditableFixtureComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section id=\"verification-feedback\">\r\n\r\n  <!-- Task info accordion -->\r\n  <div *ngIf=\"hasZoneTask\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n    <div ngbAccordionItem=\"details\">\r\n      <div ngbAccordionHeader ngbAccordionToggle class=\"accordion-button task-info-header\">\r\n        <div class=\"w-100\">\r\n          <h2>Zone verification assigned</h2>\r\n          <p>{{ zoneTask?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n        </div>\r\n      </div>\r\n\r\n      <div ngbAccordionCollapse>\r\n        <div ngbAccordionBody>\r\n          <ng-template>\r\n            <div class=\"log-block\">\r\n              <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                <path\r\n                  d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                  stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n\r\n              <div class=\"d-flex gap-1 flex-column\">\r\n                <h4>{{ zoneTask?.createdByName }}</h4>\r\n                <p>{{ zoneTask?.createdAt | date: 'hh:mma, dd MMM yyyy' }}</p>\r\n                <h5>Assigner</h5>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"log-block\">\r\n              <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                <path\r\n                  d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                  stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n\r\n              <div class=\"d-flex gap-1 flex-column\">\r\n                <h4>{{ zoneTask?.userName }}</h4>\r\n                <p>{{ zoneTask?.submitTime_string || zoneTask?.startTime_string }}</p>\r\n                <h5>Assignee</h5>\r\n              </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"zoneTask?.comments?.length\">\r\n              <h5 class=\"mb-2\">Comments</h5>\r\n              <div class=\"log-block\" *ngFor=\"let c of zoneTask?.comments\">\r\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                  <path\r\n                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <div class=\"d-flex gap-1 flex-column\">\r\n                  <h4>{{ c?.userName }}</h4>\r\n                  <p>{{ c?.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n                  <h5>{{ c?.comment }}</h5>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <hr *ngIf=\"hasZoneTask\">\r\n\r\n  <!-- Empty state: no task assigned -->\r\n  <ng-container *ngIf=\"!hasZoneTask\">\r\n    <div class=\"my-6\">\r\n      <div class=\"text-center\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n          <path\r\n            d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n            stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n        </svg>\r\n      </div>\r\n      <div class=\"mt-3 text-center\">\r\n        <div class=\"fw-bold h3 mt-2\">No response</div>\r\n        <div class=\"mt-4\">No zone verification task has been assigned for this floor.</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Empty state: task assigned but not yet submitted (only on a fresh task \u2014 during a\r\n       redo's open period we keep the previous round's responses visible like fixture does) -->\r\n  <ng-container *ngIf=\"hasZoneTask && isTaskOpen && !zoneTask?.redoStatus\">\r\n    <div class=\"my-6\">\r\n      <div class=\"text-center\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n          <path\r\n            d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n            stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n        </svg>\r\n      </div>\r\n      <div class=\"mt-3 text-center\">\r\n        <div class=\"fw-bold h3 mt-2\">No response</div>\r\n        <div class=\"mt-4\">Task assigned. Awaiting submission from the store.</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Header strip + 3-column comparison: visible when task is inprogress / submit, OR during\r\n       a redo's open period (we render the previous round's data read-only since canShowActions\r\n       already gates the action buttons on checklistStatus === 'submit') -->\r\n  <ng-container *ngIf=\"hasZoneTask && (!isTaskOpen || zoneTask?.redoStatus)\">\r\n\r\n    <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n      <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n        viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n\r\n      <h3 class=\"m-0\">{{ planoFixture?.header?.label }}</h3>\r\n\r\n      <div class=\"d-flex align-items-center gap-3 flex-wrap\">\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n          {{ planoFixture.fixtureCategory | titlecase }}\r\n        </span>\r\n\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n          {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n        </span>\r\n\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span class=\"badge inactive me-1\">\r\n          Fixture Capacity: {{ planoFixtureCapacity }}\r\n        </span>\r\n      </div>\r\n\r\n      <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n        {{ currentFixtureIndex }}/{{ totalFixtures.length }}\r\n      </h3>\r\n\r\n      <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n        viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </div>\r\n\r\n    <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n\r\n      @if (showAction) {\r\n        <!-- Column 1: Existing template (current plano) -->\r\n        <!-- <div class=\"col-4 p-2\">\r\n        <div class=\"wrapper\">\r\n          @if (canShowActions && hasFixtureResponse) {\r\n            <div class=\"d-flex align-items-center gap-3\">\r\n              <button class=\"btn primary-btn ms-auto\" type=\"button\" (click)=\"onClickKeepPlano()\">\r\n                Keep plano\r\n              </button>\r\n            </div>\r\n          }\r\n          <div class=\"mb-4\">\r\n            <div class=\"d-flex align-items-center gap-2 my-4\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n                  stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n              <h4 class=\"m-0\">Existing template</h4>\r\n              <svg *ngIf=\"isApproved && currentUserAction === 'keepPlano'\"\r\n                class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                  d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                  fill=\"#12B76A\" />\r\n              </svg>\r\n            </div>\r\n          </div>\r\n          <fixture [fixture]=\"planoFixture\" [showVMs]=\"true\" [showHeaderFooterAlways]=\"true\"></fixture>\r\n        </div>\r\n      </div> -->\r\n\r\n        <!-- Column 2: Store response (zone-grouped) -->\r\n        <div class=\"col-6 p-2\">\r\n          <div class=\"wrapper\">\r\n            @if (isClFixture) {\r\n              <div class=\"my-6\">\r\n                <div class=\"text-center\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                    <path\r\n                      d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                      stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                  </svg>\r\n                </div>\r\n                <div class=\"mt-3 text-center\">\r\n                  <div class=\"fw-bold h3 mt-2\">CL Excluded</div>\r\n                </div>\r\n              </div>\r\n            } @else {\r\n              @if (canShowActions && hasFixtureResponse) {\r\n                <div class=\"d-flex align-items-center gap-3\">\r\n                  <!-- <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onClickEditResponse()\">\r\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <path\r\n                        d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                        stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                  </button> -->\r\n                  <button class=\"btn redo-btn\" type=\"button\" (click)=\"onClickRedo()\">\r\n                    Redo\r\n                  </button>\r\n                  <button class=\"btn btn-outline btn-outline-cus ms-auto\" type=\"button\" (click)=\"onClickKeepPlano()\">\r\n                    Reject\r\n                  </button>\r\n                  <button class=\"btn primary-btn\" type=\"button\"\r\n                    [disabled]=\"!editableFixture?.isValid\"\r\n                    [title]=\"editableFixture?.validationMessage || ''\"\r\n                    (click)=\"onClickAcceptResponse()\">\r\n                    Accept\r\n                  </button>\r\n                </div>\r\n              }\r\n              <div class=\"mb-4\">\r\n                <div class=\"d-flex align-items-center gap-2 my-4\">\r\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n                      stroke=\"#101828\" stroke-width=\"1.5\" />\r\n                  </svg>\r\n                  <h4>Store response</h4>\r\n                  <span *ngIf=\"hasFixtureResponse\" class=\"badge inactive me-1\">\r\n                    Capacity: {{ zoneFixture?.fixtureCapacity || 0 }}\r\n                  </span>\r\n                  <svg\r\n                    *ngIf=\"isApproved && (currentUserAction === 'acceptResponse' || currentUserAction === 'editAccepted')\"\r\n                    class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                      d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                      fill=\"#12B76A\" />\r\n                  </svg>\r\n\r\n                  <svg *ngIf=\"isApproved && (currentUserAction === 'keepPlano')\" class=\"ms-auto\" width=\"20\" height=\"20\"\r\n                    viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n                    <rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FEE4E2\" />\r\n\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                      d=\"M6.225 6.225C6.56667 5.88333 7.11667 5.88333 7.45833 6.225L10 8.76667L12.5417 6.225C12.8833 5.88333 13.4333 5.88333 13.775 6.225C14.1167 6.56667 14.1167 7.11667 13.775 7.45833L11.2333 10L13.775 12.5417C14.1167 12.8833 14.1167 13.4333 13.775 13.775C13.4333 14.1167 12.8833 14.1167 12.5417 13.775L10 11.2333L7.45833 13.775C7.11667 14.1167 6.56667 14.1167 6.225 13.775C5.88333 13.4333 5.88333 12.8833 6.225 12.5417L8.76667 10L6.225 7.45833C5.88333 7.11667 5.88333 6.56667 6.225 6.225Z\"\r\n                      fill=\"#F04438\" />\r\n                  </svg>\r\n                  <svg *ngIf=\"currentUserAction === 'redo'\"\r\n                    class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n                      fill=\"black\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              @if (hasFixtureResponse) {\r\n                <zone-editable-fixture\r\n                  [fixture]=\"zoneFixture\"\r\n                  [planoFixture]=\"planoFixture\"\r\n                  [showVMs]=\"false\"\r\n                  [showHeaderFooterAlways]=\"true\"\r\n                  [editable]=\"canShowActions\">\r\n                </zone-editable-fixture>\r\n              } @else {\r\n                <div class=\"my-6\">\r\n                  <div class=\"text-center\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                      <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                      <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                      <path\r\n                        d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                        stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                    </svg>\r\n                  </div>\r\n                  <div class=\"mt-3 text-center\">\r\n                    <div>No response for this fixture yet.</div>\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Column 3: Store image -->\r\n      <div class=\"p-2\" [ngClass]=\"{'col-6': showAction, 'col': !showAction}\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"mb-4\" [ngStyle]=\"{'margin-top':'12px'}\">\r\n            <div class=\"d-flex align-items-center gap-2 my-4\">\r\n              <h4>Store Image</h4>\r\n            </div>\r\n          </div>\r\n          @if (zoneImageUrl) {\r\n            <div class=\"fixture-image\" (click)=\"onClickImagePreview($event, zoneImageUrl)\">\r\n              @if (isImageLoading) {\r\n                <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n              }\r\n              <img [src]=\"zoneImageUrl\" alt=\"Store response image\"\r\n                [style.display]=\"isImageLoading ? 'none' : 'block'\" (loadstart)=\"onImageLoadStart()\"\r\n                (load)=\"onImageLoad()\" (error)=\"onImageError()\" (loadend)=\"onImageLoadEnd()\">\r\n            </div>\r\n\r\n              <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n                <button class=\"preview-close\" (click)=\"$event.stopPropagation(); closeImagePreview()\">&#x2715;</button>\r\n                <div class=\"preview-zoom-controls\" (click)=\"$event.stopPropagation()\">\r\n                  <button (click)=\"onPreviewZoomOut()\">&#x2212;</button>\r\n                  <input type=\"range\" class=\"zoom-slider\" min=\"25\" max=\"500\" step=\"25\" [value]=\"imagePreviewZoom * 100\"\r\n                    (input)=\"onPreviewZoomSlider($event)\" />\r\n                  <span>{{ (imagePreviewZoom * 100).toFixed(0) }}%</span>\r\n                  <button (click)=\"onPreviewZoomIn()\">&#x2B;</button>\r\n                </div>\r\n                <div class=\"preview-image-container\" (click)=\"$event.stopPropagation()\"\r\n                  (mousedown)=\"onPreviewPanStart($event)\" (mousemove)=\"onPreviewPanMove($event)\"\r\n                  (mouseup)=\"onPreviewPanEnd()\" (mouseleave)=\"onPreviewPanEnd()\" (wheel)=\"onPreviewWheel($event)\">\r\n                  <img [src]=\"selectedImageForPreview\" class=\"full-img\"\r\n                    [style.transform]=\"'scale(' + imagePreviewZoom + ') translate(' + imagePreviewPanX / imagePreviewZoom + 'px,' + imagePreviewPanY / imagePreviewZoom + 'px)'\"\r\n                    draggable=\"false\" />\r\n                </div>\r\n              </div>\r\n            } @else {\r\n              <div class=\"my-6\">\r\n                <div class=\"text-center\">\r\n                  <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n                      fill=\"#EAECF0\" />\r\n                    <path\r\n                      d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n                      fill=\"#6BCAFF\" />\r\n                    <path\r\n                      d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n                      fill=\"#00A3FF\" />\r\n                    <path\r\n                      d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n                      fill=\"#00A3FF\" />\r\n                    <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n                    <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n                    <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (zoneFeedback?.answers?.[0]?.comments?.length) {\r\n      <div id=\"fixture-comments\">\r\n        <h5 class=\"mb-2\">Comments</h5>\r\n\r\n        <div class=\"log-block\" *ngFor=\"let c of zoneFeedback?.answers?.[0]?.comments; let i = index\">\r\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n            <path\r\n              d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n              stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n\r\n          <div class=\"d-flex gap-1 flex-column\">\r\n            <div class=\"d-flex gap-1 flex-column\">\r\n              <h4>{{ c?.userName }}</h4>\r\n              <p>{{ c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n            </div>\r\n\r\n            @if (c?.responsetype === 'comment') {\r\n              <h5>{{ c?.comment }}</h5>\r\n            } @else if (c?.responsetype === 'agree') {\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n                Marked as \"Keep Plano\".\r\n              </h5>\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'acceptResponse'\">\r\n                Marked as \"Accept Response\".\r\n              </h5>\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'editAccepted'\">\r\n                Marked as \"Accept Response with Modification\".\r\n              </h5>\r\n              <h5 *ngIf=\"c?.comment\">Note: {{ c.comment }}</h5>\r\n            } @else if (c?.responsetype === 'disagree') {\r\n              <h5>Marked as \"Redo\"</h5>\r\n              <h5 *ngIf=\"c?.comment\">Note: {{ c.comment }}</h5>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n\r\n  <ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n      <div class=\"shimmer rounded\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .btn-outline-cus{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .btn-outline-cus:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}.loader .shimmer{height:unset}#verification-feedback .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:default}#verification-feedback .preview-close{position:absolute;top:16px;right:16px;background:#ffffff26;border:none;color:#fff;font-size:20px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10000}#verification-feedback .preview-close:hover{background:#ffffff4d}#verification-feedback .preview-zoom-controls{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#ffffff26;border-radius:8px;padding:6px 16px;z-index:10000}#verification-feedback .preview-zoom-controls span{color:#fff;font-size:14px;min-width:48px;text-align:center;-webkit-user-select:none;user-select:none}#verification-feedback .preview-zoom-controls button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center}#verification-feedback .preview-zoom-controls button:hover{background:#fff3}#verification-feedback .preview-zoom-controls .zoom-slider{-webkit-appearance:none;appearance:none;width:120px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer}#verification-feedback .preview-image-container{overflow:hidden;display:flex;align-items:center;justify-content:center;width:90vw;height:85vh;cursor:default}#verification-feedback .preview-image-container:active{cursor:grabbing}#verification-feedback .full-img{max-width:90vw;max-height:85vh;border-radius:10px;object-fit:contain;cursor:grab;-webkit-user-select:none;user-select:none}#verification-feedback .full-img:active{cursor:grabbing}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionToggle, selector: "[ngbAccordionToggle]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: ZoneEditableFixtureComponent, selector: "zone-editable-fixture", inputs: ["fixture", "planoFixture", "showColors", "showVMs", "showBCs", "showHeaderFooterAlways", "editable"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneVerificationFeedbackComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-zone-verification-feedback", template: "<section id=\"verification-feedback\">\r\n\r\n  <!-- Task info accordion -->\r\n  <div *ngIf=\"hasZoneTask\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n    <div ngbAccordionItem=\"details\">\r\n      <div ngbAccordionHeader ngbAccordionToggle class=\"accordion-button task-info-header\">\r\n        <div class=\"w-100\">\r\n          <h2>Zone verification assigned</h2>\r\n          <p>{{ zoneTask?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n        </div>\r\n      </div>\r\n\r\n      <div ngbAccordionCollapse>\r\n        <div ngbAccordionBody>\r\n          <ng-template>\r\n            <div class=\"log-block\">\r\n              <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                <path\r\n                  d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                  stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n\r\n              <div class=\"d-flex gap-1 flex-column\">\r\n                <h4>{{ zoneTask?.createdByName }}</h4>\r\n                <p>{{ zoneTask?.createdAt | date: 'hh:mma, dd MMM yyyy' }}</p>\r\n                <h5>Assigner</h5>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"log-block\">\r\n              <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                <path\r\n                  d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                  stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n\r\n              <div class=\"d-flex gap-1 flex-column\">\r\n                <h4>{{ zoneTask?.userName }}</h4>\r\n                <p>{{ zoneTask?.submitTime_string || zoneTask?.startTime_string }}</p>\r\n                <h5>Assignee</h5>\r\n              </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"zoneTask?.comments?.length\">\r\n              <h5 class=\"mb-2\">Comments</h5>\r\n              <div class=\"log-block\" *ngFor=\"let c of zoneTask?.comments\">\r\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                  <path\r\n                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <div class=\"d-flex gap-1 flex-column\">\r\n                  <h4>{{ c?.userName }}</h4>\r\n                  <p>{{ c?.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n                  <h5>{{ c?.comment }}</h5>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <hr *ngIf=\"hasZoneTask\">\r\n\r\n  <!-- Empty state: no task assigned -->\r\n  <ng-container *ngIf=\"!hasZoneTask\">\r\n    <div class=\"my-6\">\r\n      <div class=\"text-center\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n          <path\r\n            d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n            stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n        </svg>\r\n      </div>\r\n      <div class=\"mt-3 text-center\">\r\n        <div class=\"fw-bold h3 mt-2\">No response</div>\r\n        <div class=\"mt-4\">No zone verification task has been assigned for this floor.</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Empty state: task assigned but not yet submitted (only on a fresh task \u2014 during a\r\n       redo's open period we keep the previous round's responses visible like fixture does) -->\r\n  <ng-container *ngIf=\"hasZoneTask && isTaskOpen && !zoneTask?.redoStatus\">\r\n    <div class=\"my-6\">\r\n      <div class=\"text-center\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n          <path\r\n            d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n            stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n        </svg>\r\n      </div>\r\n      <div class=\"mt-3 text-center\">\r\n        <div class=\"fw-bold h3 mt-2\">No response</div>\r\n        <div class=\"mt-4\">Task assigned. Awaiting submission from the store.</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Header strip + 3-column comparison: visible when task is inprogress / submit, OR during\r\n       a redo's open period (we render the previous round's data read-only since canShowActions\r\n       already gates the action buttons on checklistStatus === 'submit') -->\r\n  <ng-container *ngIf=\"hasZoneTask && (!isTaskOpen || zoneTask?.redoStatus)\">\r\n\r\n    <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n      <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n        viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n\r\n      <h3 class=\"m-0\">{{ planoFixture?.header?.label }}</h3>\r\n\r\n      <div class=\"d-flex align-items-center gap-3 flex-wrap\">\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n          {{ planoFixture.fixtureCategory | titlecase }}\r\n        </span>\r\n\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n          {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n        </span>\r\n\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span class=\"badge inactive me-1\">\r\n          Fixture Capacity: {{ planoFixture?.fixtureCapacity || 0 }}\r\n        </span>\r\n      </div>\r\n\r\n      <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n        {{ currentFixtureIndex }}/{{ totalFixtures.length }}\r\n      </h3>\r\n\r\n      <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n        viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </div>\r\n\r\n    <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n\r\n      @if (showAction) {\r\n        <!-- Column 1: Existing template (current plano) -->\r\n        <!-- <div class=\"col-4 p-2\">\r\n        <div class=\"wrapper\">\r\n          @if (canShowActions && hasFixtureResponse) {\r\n            <div class=\"d-flex align-items-center gap-3\">\r\n              <button class=\"btn primary-btn ms-auto\" type=\"button\" (click)=\"onClickKeepPlano()\">\r\n                Keep plano\r\n              </button>\r\n            </div>\r\n          }\r\n          <div class=\"mb-4\">\r\n            <div class=\"d-flex align-items-center gap-2 my-4\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n                  stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n              <h4 class=\"m-0\">Existing template</h4>\r\n              <svg *ngIf=\"isApproved && currentUserAction === 'keepPlano'\"\r\n                class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                  d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                  fill=\"#12B76A\" />\r\n              </svg>\r\n            </div>\r\n          </div>\r\n          <fixture [fixture]=\"planoFixture\" [showVMs]=\"true\" [showHeaderFooterAlways]=\"true\"></fixture>\r\n        </div>\r\n      </div> -->\r\n\r\n        <!-- Column 2: Store response (zone-grouped) -->\r\n        <div class=\"col-6 p-2\">\r\n          <div class=\"wrapper\">\r\n            @if (isClFixture) {\r\n              <div class=\"my-6\">\r\n                <div class=\"text-center\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                    <path\r\n                      d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                      stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                  </svg>\r\n                </div>\r\n                <div class=\"mt-3 text-center\">\r\n                  <div class=\"fw-bold h3 mt-2\">CL Excluded</div>\r\n                </div>\r\n              </div>\r\n            } @else {\r\n              @if (canShowActions && hasFixtureResponse) {\r\n                <div class=\"d-flex align-items-center gap-3\">\r\n                  <!-- <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onClickEditResponse()\">\r\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <path\r\n                        d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                        stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                  </button> -->\r\n                  <button class=\"btn redo-btn\" type=\"button\" (click)=\"onClickRedo()\">\r\n                    Redo\r\n                  </button>\r\n                  <button class=\"btn btn-outline btn-outline-cus ms-auto\" type=\"button\" (click)=\"onClickKeepPlano()\">\r\n                    Reject\r\n                  </button>\r\n                  <button class=\"btn primary-btn\" type=\"button\"\r\n                    [disabled]=\"!editableFixture?.isValid\"\r\n                    [title]=\"editableFixture?.validationMessage || ''\"\r\n                    (click)=\"onClickAcceptResponse()\">\r\n                    Accept\r\n                  </button>\r\n                </div>\r\n              }\r\n              <div class=\"mb-4\">\r\n                <div class=\"d-flex align-items-center gap-2 my-4\">\r\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n                      stroke=\"#101828\" stroke-width=\"1.5\" />\r\n                  </svg>\r\n                  <h4>Store response</h4>\r\n                  <span *ngIf=\"hasFixtureResponse\" class=\"badge inactive me-1\">\r\n                    Capacity: {{ zoneFixture?.fixtureCapacity || 0 }}\r\n                  </span>\r\n                  <svg\r\n                    *ngIf=\"isApproved && (currentUserAction === 'acceptResponse' || currentUserAction === 'editAccepted')\"\r\n                    class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                      d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                      fill=\"#12B76A\" />\r\n                  </svg>\r\n\r\n                  <svg *ngIf=\"isApproved && (currentUserAction === 'keepPlano')\" class=\"ms-auto\" width=\"20\" height=\"20\"\r\n                    viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n                    <rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FEE4E2\" />\r\n\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                      d=\"M6.225 6.225C6.56667 5.88333 7.11667 5.88333 7.45833 6.225L10 8.76667L12.5417 6.225C12.8833 5.88333 13.4333 5.88333 13.775 6.225C14.1167 6.56667 14.1167 7.11667 13.775 7.45833L11.2333 10L13.775 12.5417C14.1167 12.8833 14.1167 13.4333 13.775 13.775C13.4333 14.1167 12.8833 14.1167 12.5417 13.775L10 11.2333L7.45833 13.775C7.11667 14.1167 6.56667 14.1167 6.225 13.775C5.88333 13.4333 5.88333 12.8833 6.225 12.5417L8.76667 10L6.225 7.45833C5.88333 7.11667 5.88333 6.56667 6.225 6.225Z\"\r\n                      fill=\"#F04438\" />\r\n                  </svg>\r\n                  <svg *ngIf=\"currentUserAction === 'redo'\"\r\n                    class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n                      fill=\"black\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              @if (hasFixtureResponse) {\r\n                <zone-editable-fixture\r\n                  [fixture]=\"zoneFixture\"\r\n                  [planoFixture]=\"planoFixture\"\r\n                  [showVMs]=\"false\"\r\n                  [showHeaderFooterAlways]=\"true\"\r\n                  [editable]=\"canShowActions\">\r\n                </zone-editable-fixture>\r\n              } @else {\r\n                <div class=\"my-6\">\r\n                  <div class=\"text-center\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                      <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                      <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                      <path\r\n                        d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                        stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                    </svg>\r\n                  </div>\r\n                  <div class=\"mt-3 text-center\">\r\n                    <div>No response for this fixture yet.</div>\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Column 3: Store image -->\r\n      <div class=\"p-2\" [ngClass]=\"{'col-6': showAction, 'col': !showAction}\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"mb-4\" [ngStyle]=\"{'margin-top':'12px'}\">\r\n            <div class=\"d-flex align-items-center gap-2 my-4\">\r\n              <h4>Store Image</h4>\r\n            </div>\r\n          </div>\r\n          @if (zoneImageUrl) {\r\n            <div class=\"fixture-image\" (click)=\"onClickImagePreview($event, zoneImageUrl)\">\r\n              @if (isImageLoading) {\r\n                <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n              }\r\n              <img [src]=\"zoneImageUrl\" alt=\"Store response image\"\r\n                [style.display]=\"isImageLoading ? 'none' : 'block'\" (loadstart)=\"onImageLoadStart()\"\r\n                (load)=\"onImageLoad()\" (error)=\"onImageError()\" (loadend)=\"onImageLoadEnd()\">\r\n            </div>\r\n\r\n              <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n                <button class=\"preview-close\" (click)=\"$event.stopPropagation(); closeImagePreview()\">&#x2715;</button>\r\n                <div class=\"preview-zoom-controls\" (click)=\"$event.stopPropagation()\">\r\n                  <button (click)=\"onPreviewZoomOut()\">&#x2212;</button>\r\n                  <input type=\"range\" class=\"zoom-slider\" min=\"25\" max=\"500\" step=\"25\" [value]=\"imagePreviewZoom * 100\"\r\n                    (input)=\"onPreviewZoomSlider($event)\" />\r\n                  <span>{{ (imagePreviewZoom * 100).toFixed(0) }}%</span>\r\n                  <button (click)=\"onPreviewZoomIn()\">&#x2B;</button>\r\n                </div>\r\n                <div class=\"preview-image-container\" (click)=\"$event.stopPropagation()\"\r\n                  (mousedown)=\"onPreviewPanStart($event)\" (mousemove)=\"onPreviewPanMove($event)\"\r\n                  (mouseup)=\"onPreviewPanEnd()\" (mouseleave)=\"onPreviewPanEnd()\" (wheel)=\"onPreviewWheel($event)\">\r\n                  <img [src]=\"selectedImageForPreview\" class=\"full-img\"\r\n                    [style.transform]=\"'scale(' + imagePreviewZoom + ') translate(' + imagePreviewPanX / imagePreviewZoom + 'px,' + imagePreviewPanY / imagePreviewZoom + 'px)'\"\r\n                    draggable=\"false\" />\r\n                </div>\r\n              </div>\r\n            } @else {\r\n              <div class=\"my-6\">\r\n                <div class=\"text-center\">\r\n                  <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n                      fill=\"#EAECF0\" />\r\n                    <path\r\n                      d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n                      fill=\"#6BCAFF\" />\r\n                    <path\r\n                      d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n                      fill=\"#00A3FF\" />\r\n                    <path\r\n                      d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n                      fill=\"#00A3FF\" />\r\n                    <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n                    <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n                    <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (zoneFeedback?.answers?.[0]?.comments?.length) {\r\n      <div id=\"fixture-comments\">\r\n        <h5 class=\"mb-2\">Comments</h5>\r\n\r\n        <div class=\"log-block\" *ngFor=\"let c of zoneFeedback?.answers?.[0]?.comments; let i = index\">\r\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n            <path\r\n              d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n              stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n\r\n          <div class=\"d-flex gap-1 flex-column\">\r\n            <div class=\"d-flex gap-1 flex-column\">\r\n              <h4>{{ c?.userName }}</h4>\r\n              <p>{{ c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n            </div>\r\n\r\n            @if (c?.responsetype === 'comment') {\r\n              <h5>{{ c?.comment }}</h5>\r\n            } @else if (c?.responsetype === 'agree') {\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n                Marked as \"Keep Plano\".\r\n              </h5>\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'acceptResponse'\">\r\n                Marked as \"Accept Response\".\r\n              </h5>\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'editAccepted'\">\r\n                Marked as \"Accept Response with Modification\".\r\n              </h5>\r\n              <h5 *ngIf=\"c?.comment\">Note: {{ c.comment }}</h5>\r\n            } @else if (c?.responsetype === 'disagree') {\r\n              <h5>Marked as \"Redo\"</h5>\r\n              <h5 *ngIf=\"c?.comment\">Note: {{ c.comment }}</h5>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n\r\n  <ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n      <div class=\"shimmer rounded\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .btn-outline-cus{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .btn-outline-cus:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}.loader .shimmer{height:unset}#verification-feedback .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:default}#verification-feedback .preview-close{position:absolute;top:16px;right:16px;background:#ffffff26;border:none;color:#fff;font-size:20px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10000}#verification-feedback .preview-close:hover{background:#ffffff4d}#verification-feedback .preview-zoom-controls{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#ffffff26;border-radius:8px;padding:6px 16px;z-index:10000}#verification-feedback .preview-zoom-controls span{color:#fff;font-size:14px;min-width:48px;text-align:center;-webkit-user-select:none;user-select:none}#verification-feedback .preview-zoom-controls button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center}#verification-feedback .preview-zoom-controls button:hover{background:#fff3}#verification-feedback .preview-zoom-controls .zoom-slider{-webkit-appearance:none;appearance:none;width:120px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer}#verification-feedback .preview-image-container{overflow:hidden;display:flex;align-items:center;justify-content:center;width:90vw;height:85vh;cursor:default}#verification-feedback .preview-image-container:active{cursor:grabbing}#verification-feedback .full-img{max-width:90vw;max-height:85vh;border-radius:10px;object-fit:contain;cursor:grab;-webkit-user-select:none;user-select:none}#verification-feedback .full-img:active{cursor:grabbing}\n"] }]
+            args: [{ selector: "lib-zone-verification-feedback", template: "<section id=\"verification-feedback\">\r\n\r\n  <!-- Task info accordion -->\r\n  <div *ngIf=\"hasZoneTask\" id=\"task-info\" ngbAccordion #accordion=\"ngbAccordion\">\r\n    <div ngbAccordionItem=\"details\">\r\n      <div ngbAccordionHeader ngbAccordionToggle class=\"accordion-button task-info-header\">\r\n        <div class=\"w-100\">\r\n          <h2>Zone verification assigned</h2>\r\n          <p>{{ zoneTask?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n        </div>\r\n      </div>\r\n\r\n      <div ngbAccordionCollapse>\r\n        <div ngbAccordionBody>\r\n          <ng-template>\r\n            <div class=\"log-block\">\r\n              <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                <path\r\n                  d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                  stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n\r\n              <div class=\"d-flex gap-1 flex-column\">\r\n                <h4>{{ zoneTask?.createdByName }}</h4>\r\n                <p>{{ zoneTask?.createdAt | date: 'hh:mma, dd MMM yyyy' }}</p>\r\n                <h5>Assigner</h5>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"log-block\">\r\n              <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                <path\r\n                  d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                  stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n\r\n              <div class=\"d-flex gap-1 flex-column\">\r\n                <h4>{{ zoneTask?.userName }}</h4>\r\n                <p>{{ zoneTask?.submitTime_string || zoneTask?.startTime_string }}</p>\r\n                <h5>Assignee</h5>\r\n              </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"zoneTask?.comments?.length\">\r\n              <h5 class=\"mb-2\">Comments</h5>\r\n              <div class=\"log-block\" *ngFor=\"let c of zoneTask?.comments\">\r\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n                  <path\r\n                    d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n                    stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <div class=\"d-flex gap-1 flex-column\">\r\n                  <h4>{{ c?.userName }}</h4>\r\n                  <p>{{ c?.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n                  <h5>{{ c?.comment }}</h5>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <hr *ngIf=\"hasZoneTask\">\r\n\r\n  <!-- Empty state: no task assigned -->\r\n  <ng-container *ngIf=\"!hasZoneTask\">\r\n    <div class=\"my-6\">\r\n      <div class=\"text-center\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n          <path\r\n            d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n            stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n        </svg>\r\n      </div>\r\n      <div class=\"mt-3 text-center\">\r\n        <div class=\"fw-bold h3 mt-2\">No response</div>\r\n        <div class=\"mt-4\">No zone verification task has been assigned for this floor.</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Empty state: task assigned but not yet submitted (only on a fresh task \u2014 during a\r\n       redo's open period we keep the previous round's responses visible like fixture does) -->\r\n  <ng-container *ngIf=\"hasZoneTask && isTaskOpen && !zoneTask?.redoStatus\">\r\n    <div class=\"my-6\">\r\n      <div class=\"text-center\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n          <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n          <path\r\n            d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n            stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n        </svg>\r\n      </div>\r\n      <div class=\"mt-3 text-center\">\r\n        <div class=\"fw-bold h3 mt-2\">No response</div>\r\n        <div class=\"mt-4\">Task assigned. Awaiting submission from the store.</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Header strip + 3-column comparison: visible when task is inprogress / submit, OR during\r\n       a redo's open period (we render the previous round's data read-only since canShowActions\r\n       already gates the action buttons on checklistStatus === 'submit') -->\r\n  <ng-container *ngIf=\"hasZoneTask && (!isTaskOpen || zoneTask?.redoStatus)\">\r\n\r\n    <div id=\"feedback-handler\" class=\"d-flex align-items-center gap-6 my-6 px-3 fixture-navigate\">\r\n      <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('previous')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n        viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M15 6L9 12L15 18\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n\r\n      <h3 class=\"m-0\">{{ planoFixture?.header?.label }}</h3>\r\n\r\n      <div class=\"d-flex align-items-center gap-3 flex-wrap\">\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span *ngIf=\"planoFixture?.fixtureCategory\" class=\"badge inactive me-1\">\r\n          {{ planoFixture.fixtureCategory | titlecase }}\r\n        </span>\r\n\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span *ngIf=\"planoFixture?.fixtureWidth?.value\" class=\"badge inactive me-1\">\r\n          {{ planoFixture.fixtureWidth.value }} {{ planoFixture.fixtureWidth?.unit ?? 'ft' }}\r\n        </span>\r\n\r\n        <svg width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"#EAECF0\" />\r\n        </svg>\r\n\r\n        <span class=\"badge inactive me-1\">\r\n          Fixture Capacity: {{ planoFixtureCapacity }}\r\n        </span>\r\n      </div>\r\n\r\n      <h3 *ngIf=\"showAction\" class=\"m-0 ms-auto\">\r\n        {{ currentFixtureIndex }}/{{ totalFixtures.length }}\r\n      </h3>\r\n\r\n      <svg *ngIf=\"showAction\" (click)=\"onChangeFixture('next')\" class=\"cursor-pointer\" width=\"24\" height=\"24\"\r\n        viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M9 18L15 12L9 6\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </div>\r\n\r\n    <div id=\"fixture-comparison\" class=\"row g-0 my-3\">\r\n\r\n      @if (showAction) {\r\n        <!-- Column 1: Existing template (current plano) -->\r\n        <!-- <div class=\"col-4 p-2\">\r\n        <div class=\"wrapper\">\r\n          @if (canShowActions && hasFixtureResponse) {\r\n            <div class=\"d-flex align-items-center gap-3\">\r\n              <button class=\"btn primary-btn ms-auto\" type=\"button\" (click)=\"onClickKeepPlano()\">\r\n                Keep plano\r\n              </button>\r\n            </div>\r\n          }\r\n          <div class=\"mb-4\">\r\n            <div class=\"d-flex align-items-center gap-2 my-4\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M2.725 5.80008L10 10.0084L17.275 5.80008M10 18.4001V10.0001M17.5 13.3334V6.66675C17.4997 6.37448 17.4225 6.08742 17.2763 5.83438C17.13 5.58134 16.9198 5.37122 16.6667 5.22508L10.8333 1.89175C10.58 1.74547 10.2926 1.66846 10 1.66846C9.70744 1.66846 9.42003 1.74547 9.16667 1.89175L3.33333 5.22508C3.08022 5.37122 2.86998 5.58134 2.72372 5.83438C2.57745 6.08742 2.5003 6.37448 2.5 6.66675V13.3334C2.5003 13.6257 2.57745 13.9127 2.72372 14.1658C2.86998 14.4188 3.08022 14.6289 3.33333 14.7751L9.16667 18.1084C9.42003 18.2547 9.70744 18.3317 10 18.3317C10.2926 18.3317 10.58 18.2547 10.8333 18.1084L16.6667 14.7751C16.9198 14.6289 17.13 14.4188 17.2763 14.1658C17.4225 13.9127 17.4997 13.6257 17.5 13.3334Z\"\r\n                  stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n              <h4 class=\"m-0\">Existing template</h4>\r\n              <svg *ngIf=\"isApproved && currentUserAction === 'keepPlano'\"\r\n                class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                  d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                  fill=\"#12B76A\" />\r\n              </svg>\r\n            </div>\r\n          </div>\r\n          <fixture [fixture]=\"planoFixture\" [showVMs]=\"true\" [showHeaderFooterAlways]=\"true\"></fixture>\r\n        </div>\r\n      </div> -->\r\n\r\n        <!-- Column 2: Store response (zone-grouped) -->\r\n        <div class=\"col-6 p-2\">\r\n          <div class=\"wrapper\">\r\n            @if (isClFixture) {\r\n              <div class=\"my-6\">\r\n                <div class=\"text-center\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                    <path\r\n                      d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                      stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                  </svg>\r\n                </div>\r\n                <div class=\"mt-3 text-center\">\r\n                  <div class=\"fw-bold h3 mt-2\">CL Excluded</div>\r\n                </div>\r\n              </div>\r\n            } @else {\r\n              @if (canShowActions && hasFixtureResponse) {\r\n                <div class=\"d-flex align-items-center gap-3\">\r\n                  <!-- <button class=\"btn quick-btn ms-auto\" type=\"button\" (click)=\"onClickEditResponse()\">\r\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <path\r\n                        d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n                        stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                  </button> -->\r\n                  <button class=\"btn redo-btn\" type=\"button\" (click)=\"onClickRedo()\">\r\n                    Redo\r\n                  </button>\r\n                  <button class=\"btn btn-outline btn-outline-cus ms-auto\" type=\"button\" (click)=\"onClickKeepPlano()\">\r\n                    Reject\r\n                  </button>\r\n                  <button class=\"btn primary-btn\" type=\"button\"\r\n                    [disabled]=\"!editableFixture?.isValid\"\r\n                    [title]=\"editableFixture?.validationMessage || ''\"\r\n                    (click)=\"onClickAcceptResponse()\">\r\n                    Accept\r\n                  </button>\r\n                </div>\r\n              }\r\n              <div class=\"mb-4\">\r\n                <div class=\"d-flex align-items-center gap-2 my-4\">\r\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M15.6504 14.6191H4.34863V10.7373C4.23826 10.7455 4.12644 10.75 4.01367 10.75C3.97137 10.75 3.92943 10.7463 3.8877 10.7451V15.8037C3.88788 16.447 4.42222 16.9883 5.09863 16.9883H14.9004C15.5768 16.9883 16.1102 16.447 16.1104 15.8037V10.7451C16.0708 10.7462 16.0311 10.75 15.9912 10.75C15.8768 10.75 15.7629 10.7449 15.6504 10.7363V14.6191ZM15.4639 3.01172H4.53418C4.48723 3.01187 4.44973 3.03776 4.43457 3.06152V3.0625L2.67871 5.80371L2.66016 5.83301C2.04768 6.82786 2.64325 8.11739 3.73438 8.26367C3.83174 8.27561 3.92224 8.28222 4.01074 8.28223C4.58889 8.28223 5.09978 8.03419 5.45605 7.64746L6.00977 7.04688L6.56152 7.64941C6.91341 8.03371 7.42301 8.28215 8.00488 8.28223C8.58433 8.28223 9.09759 8.03349 9.44922 7.64941L10.002 7.04492L10.5557 7.64941C10.9073 8.03349 11.4206 8.28223 12 8.28223C12.5792 8.2821 13.0918 8.03337 13.4434 7.64941L13.9971 7.04492L14.5498 7.64941C14.9014 8.03349 15.4147 8.28223 15.9941 8.28223C16.0791 8.28222 16.1716 8.27533 16.2676 8.26367C17.3635 8.11504 17.9623 6.8008 17.3232 5.80371L15.5645 3.0625L15.5635 3.06152C15.5483 3.03769 15.511 3.01172 15.4639 3.01172Z\"\r\n                      stroke=\"#101828\" stroke-width=\"1.5\" />\r\n                  </svg>\r\n                  <h4>Store response</h4>\r\n                  <span *ngIf=\"hasFixtureResponse\" class=\"badge inactive me-1\">\r\n                    Capacity: {{ zoneFixture?.fixtureCapacity || 0 }}\r\n                  </span>\r\n                  <svg\r\n                    *ngIf=\"isApproved && (currentUserAction === 'acceptResponse' || currentUserAction === 'editAccepted')\"\r\n                    class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect y=\"8.74228e-07\" width=\"20\" height=\"20\" rx=\"10\" fill=\"#D1FADF\" />\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                      d=\"M14.2464 6.15839L8.27969 11.9167L6.69635 10.2251C6.40469 9.95005 5.94635 9.93339 5.61302 10.1667C5.28802 10.4084 5.19635 10.8334 5.39635 11.1751L7.27135 14.2251C7.45469 14.5084 7.77135 14.6834 8.12969 14.6834C8.47135 14.6834 8.79635 14.5084 8.97969 14.2251C9.27969 13.8334 15.0047 7.00839 15.0047 7.00839C15.7547 6.24172 14.8464 5.56672 14.2464 6.15005L14.2464 6.15839Z\"\r\n                      fill=\"#12B76A\" />\r\n                  </svg>\r\n\r\n                  <svg *ngIf=\"isApproved && (currentUserAction === 'keepPlano')\" class=\"ms-auto\" width=\"20\" height=\"20\"\r\n                    viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n                    <rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FEE4E2\" />\r\n\r\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                      d=\"M6.225 6.225C6.56667 5.88333 7.11667 5.88333 7.45833 6.225L10 8.76667L12.5417 6.225C12.8833 5.88333 13.4333 5.88333 13.775 6.225C14.1167 6.56667 14.1167 7.11667 13.775 7.45833L11.2333 10L13.775 12.5417C14.1167 12.8833 14.1167 13.4333 13.775 13.775C13.4333 14.1167 12.8833 14.1167 12.5417 13.775L10 11.2333L7.45833 13.775C7.11667 14.1167 6.56667 14.1167 6.225 13.775C5.88333 13.4333 5.88333 12.8833 6.225 12.5417L8.76667 10L6.225 7.45833C5.88333 7.11667 5.88333 6.56667 6.225 6.225Z\"\r\n                      fill=\"#F04438\" />\r\n                  </svg>\r\n                  <svg *ngIf=\"currentUserAction === 'redo'\"\r\n                    class=\"ms-auto\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M8.25065 15.8335C6.90343 15.8335 5.74704 15.396 4.78148 14.521C3.81593 13.646 3.33343 12.5557 3.33398 11.2502C3.33398 9.94461 3.81676 8.85433 4.78232 7.97933C5.74787 7.10433 6.90398 6.66683 8.25065 6.66683H13.5007L11.334 4.50016L12.5007 3.3335L16.6673 7.50016L12.5007 11.6668L11.334 10.5002L13.5007 8.3335H8.25065C7.37565 8.3335 6.6151 8.61127 5.96898 9.16683C5.32287 9.72238 5.0001 10.4168 5.00065 11.2502C5.00065 12.0835 5.32371 12.7779 5.96982 13.3335C6.61593 13.8891 7.37621 14.1668 8.25065 14.1668H14.1673V15.8335H8.25065Z\"\r\n                      fill=\"black\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              @if (hasFixtureResponse) {\r\n                <zone-editable-fixture\r\n                  [fixture]=\"zoneFixture\"\r\n                  [planoFixture]=\"planoFixture\"\r\n                  [showVMs]=\"false\"\r\n                  [showHeaderFooterAlways]=\"true\"\r\n                  [editable]=\"canShowActions\">\r\n                </zone-editable-fixture>\r\n              } @else {\r\n                <div class=\"my-6\">\r\n                  <div class=\"text-center\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n                      <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                      <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                      <path\r\n                        d=\"M35.9502 48.1997C35.6489 48.2315 35.3422 48.2505 35.0312 48.2505C34.8617 48.2505 34.6944 48.2436 34.5293 48.2339V58.6069C34.5293 60.0349 35.7123 61.226 37.2002 61.2261H56.8047C58.2927 61.2261 59.4756 60.035 59.4756 58.6069V48.2349C59.3137 48.2441 59.1498 48.2505 58.9854 48.2505C58.6714 48.2505 58.3608 48.2325 58.0547 48.1997V55.9878H35.9502V48.1997ZM57.9316 32.7739H36.0732C35.8959 32.7739 35.7406 32.8667 35.6631 32.9878L35.6611 32.9897L32.1514 38.4731L32.0566 38.6206C30.8311 40.7404 32.0957 43.4674 34.4473 43.7769C34.6482 43.8013 34.8379 43.8159 35.0254 43.8159C36.2555 43.8159 37.3434 43.2872 38.1006 42.4653L39.0225 41.4644L39.9414 42.4683C40.6903 43.2863 41.777 43.8159 43.0146 43.8159C44.2467 43.8158 45.3386 43.2856 46.0869 42.4683L47.0088 41.4614L47.9307 42.4683C48.679 43.2857 49.7707 43.8159 51.0029 43.8159C52.2351 43.8159 53.3268 43.2857 54.0752 42.4683L54.9971 41.4614L55.9189 42.4683C56.6673 43.2857 57.76 43.8159 58.9922 43.8159C59.1736 43.8159 59.3687 43.8021 59.5684 43.7778H59.5674C61.9611 43.4573 63.2293 40.6078 61.8613 38.4731L61.8604 38.4741L58.3438 32.9907L58.3428 32.9878C58.2653 32.8665 58.1092 32.7739 57.9316 32.7739Z\"\r\n                        stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n                    </svg>\r\n                  </div>\r\n                  <div class=\"mt-3 text-center\">\r\n                    <div>No response for this fixture yet.</div>\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Column 3: Store image -->\r\n      <div class=\"p-2\" [ngClass]=\"{'col-6': showAction, 'col': !showAction}\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"mb-4\" [ngStyle]=\"{'margin-top':'12px'}\">\r\n            <div class=\"d-flex align-items-center gap-2 my-4\">\r\n              <h4>Store Image</h4>\r\n            </div>\r\n          </div>\r\n          @if (zoneImageUrl) {\r\n            <div class=\"fixture-image\" (click)=\"onClickImagePreview($event, zoneImageUrl)\">\r\n              @if (isImageLoading) {\r\n                <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n              }\r\n              <img [src]=\"zoneImageUrl\" alt=\"Store response image\"\r\n                [style.display]=\"isImageLoading ? 'none' : 'block'\" (loadstart)=\"onImageLoadStart()\"\r\n                (load)=\"onImageLoad()\" (error)=\"onImageError()\" (loadend)=\"onImageLoadEnd()\">\r\n            </div>\r\n\r\n              <div class=\"img-preview\" *ngIf=\"selectedImageForPreview\" (click)=\"closeImagePreview()\">\r\n                <button class=\"preview-close\" (click)=\"$event.stopPropagation(); closeImagePreview()\">&#x2715;</button>\r\n                <div class=\"preview-zoom-controls\" (click)=\"$event.stopPropagation()\">\r\n                  <button (click)=\"onPreviewZoomOut()\">&#x2212;</button>\r\n                  <input type=\"range\" class=\"zoom-slider\" min=\"25\" max=\"500\" step=\"25\" [value]=\"imagePreviewZoom * 100\"\r\n                    (input)=\"onPreviewZoomSlider($event)\" />\r\n                  <span>{{ (imagePreviewZoom * 100).toFixed(0) }}%</span>\r\n                  <button (click)=\"onPreviewZoomIn()\">&#x2B;</button>\r\n                </div>\r\n                <div class=\"preview-image-container\" (click)=\"$event.stopPropagation()\"\r\n                  (mousedown)=\"onPreviewPanStart($event)\" (mousemove)=\"onPreviewPanMove($event)\"\r\n                  (mouseup)=\"onPreviewPanEnd()\" (mouseleave)=\"onPreviewPanEnd()\" (wheel)=\"onPreviewWheel($event)\">\r\n                  <img [src]=\"selectedImageForPreview\" class=\"full-img\"\r\n                    [style.transform]=\"'scale(' + imagePreviewZoom + ') translate(' + imagePreviewPanX / imagePreviewZoom + 'px,' + imagePreviewPanY / imagePreviewZoom + 'px)'\"\r\n                    draggable=\"false\" />\r\n                </div>\r\n              </div>\r\n            } @else {\r\n              <div class=\"my-6\">\r\n                <div class=\"text-center\">\r\n                  <svg width=\"186\" height=\"84\" viewBox=\"0 0 186 84\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M130.256 15.3284C140.092 15.3284 148.065 23.302 148.065 33.1379C148.065 37.2176 150.826 41.8684 154.906 41.8684H167.972C177.807 41.8687 185.781 49.8422 185.781 59.678C185.781 69.5141 177.807 77.4885 167.971 77.4885H81.3662C69.7186 77.4883 58.6349 68.4084 46.9873 68.4084H5.93652C2.65782 68.4084 0 65.7506 0 62.4719C0.000127823 59.1933 2.6579 56.5354 5.93652 56.5354H61.8728C63.0069 56.5354 63.9669 55.6929 64.2897 54.6056C64.7994 52.8892 63.6267 50.9485 61.8361 50.9485H43.6514C33.8153 50.9485 25.8418 42.974 25.8418 33.1379C25.842 23.302 33.8154 15.3284 43.6514 15.3284H130.256Z\"\r\n                      fill=\"#EAECF0\" />\r\n                    <path\r\n                      d=\"M126.664 27.335V48.65L120.959 43.75C118.229 41.405 113.819 41.405 111.089 43.75L96.5291 56.245C93.7991 58.59 89.3891 58.59 86.6591 56.245L85.4691 55.265C82.9841 53.095 79.0291 52.885 76.2291 54.775L59.0091 66.325L58.6241 66.605C57.3291 63.805 56.6641 60.48 56.6641 56.665V27.335C56.6641 14.595 64.2591 7 76.9991 7H106.329C119.069 7 126.664 14.595 126.664 27.335Z\"\r\n                      fill=\"#6BCAFF\" />\r\n                    <path\r\n                      d=\"M81.164 36.3299C85.7645 36.3299 89.494 32.6005 89.494 27.9999C89.494 23.3994 85.7645 19.6699 81.164 19.6699C76.5635 19.6699 72.834 23.3994 72.834 27.9999C72.834 32.6005 76.5635 36.3299 81.164 36.3299Z\"\r\n                      fill=\"#00A3FF\" />\r\n                    <path\r\n                      d=\"M126.665 48.65V56.665C126.665 69.405 119.07 77 106.33 77H77C68.075 77 61.635 73.255 58.625 66.605L59.01 66.325L76.23 54.775C79.03 52.885 82.985 53.095 85.47 55.265L86.66 56.245C89.39 58.59 93.8 58.59 96.53 56.245L111.09 43.75C113.82 41.405 118.23 41.405 120.96 43.75L126.665 48.65Z\"\r\n                      fill=\"#00A3FF\" />\r\n                    <circle cx=\"138.064\" cy=\"28.3128\" r=\"4.40042\" fill=\"#6BCAFF\" />\r\n                    <circle cx=\"47.8256\" cy=\"39.2409\" r=\"2.45255\" fill=\"#6BCAFF\" />\r\n                    <ellipse cx=\"139.183\" cy=\"61.0072\" rx=\"4.29197\" ry=\"4.59854\" fill=\"#00A3FF\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (zoneFeedback?.answers?.[0]?.comments?.length) {\r\n      <div id=\"fixture-comments\">\r\n        <h5 class=\"mb-2\">Comments</h5>\r\n\r\n        <div class=\"log-block\" *ngFor=\"let c of zoneFeedback?.answers?.[0]?.comments; let i = index\">\r\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#EAF8FF\" />\r\n            <path\r\n              d=\"M22.6673 23.5V21.8333C22.6673 20.9493 22.3161 20.1014 21.691 19.4763C21.0659 18.8512 20.218 18.5 19.334 18.5H12.6673C11.7833 18.5 10.9354 18.8512 10.3103 19.4763C9.68517 20.1014 9.33398 20.9493 9.33398 21.8333V23.5M19.334 11.8333C19.334 13.6743 17.8416 15.1667 16.0007 15.1667C14.1597 15.1667 12.6673 13.6743 12.6673 11.8333C12.6673 9.99238 14.1597 8.5 16.0007 8.5C17.8416 8.5 19.334 9.99238 19.334 11.8333Z\"\r\n              stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n\r\n          <div class=\"d-flex gap-1 flex-column\">\r\n            <div class=\"d-flex gap-1 flex-column\">\r\n              <h4>{{ c?.userName }}</h4>\r\n              <p>{{ c?.timeStamp | date:'hh:mm:ss a - dd MMM yyyy' }}</p>\r\n            </div>\r\n\r\n            @if (c?.responsetype === 'comment') {\r\n              <h5>{{ c?.comment }}</h5>\r\n            } @else if (c?.responsetype === 'agree') {\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'keepPlano'\">\r\n                Marked as \"Keep Plano\".\r\n              </h5>\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'acceptResponse'\">\r\n                Marked as \"Accept Response\".\r\n              </h5>\r\n              <h5 *ngIf=\"zoneFeedback?.answers?.[0]?.userAction === 'editAccepted'\">\r\n                Marked as \"Accept Response with Modification\".\r\n              </h5>\r\n              <h5 *ngIf=\"c?.comment\">Note: {{ c.comment }}</h5>\r\n            } @else if (c?.responsetype === 'disagree') {\r\n              <h5>Marked as \"Redo\"</h5>\r\n              <h5 *ngIf=\"c?.comment\">Note: {{ c.comment }}</h5>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n\r\n  <ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n      <div class=\"shimmer rounded\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n          <br />\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</section>", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}#verification-feedback{height:100%;overflow-y:auto}#verification-feedback .fixture-navigate,#verification-feedback .task-info-header{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#verification-feedback h5{color:#1d2939;font-family:Inter;font-weight:600;font-size:12px;line-height:18px;margin:0}#verification-feedback .log-block{display:flex;gap:12px;padding:4px;margin-bottom:18px}#verification-feedback .log-block h4{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback .log-block p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085;margin:0}#verification-feedback #task-info .task-info-header{background-color:#fff!important;padding:6px;width:100%}#verification-feedback #task-info .task-info-header h2{font-weight:600;font-size:14px;line-height:20px;color:#1d2939}#verification-feedback #task-info .task-info-header p{font-family:Inter;font-weight:400;font-size:12px;line-height:18px;color:#667085}#verification-feedback #fixture-quick-details .quick-edit-container{background:#f9fafb;padding:12px;border-radius:6px;width:100%;height:100%}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-quick-details .quick-edit-container .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-quick-details .quick-edit-container .redo-btn{font-family:Inter;font-weight:600;font-size:14px;line-height:18px;color:#1d2939;cursor:pointer}#verification-feedback #fixture-quick-details .quick-edit-container h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .label{font-family:Inter;font-weight:500;font-size:14px;line-height:20px;color:#475467;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .quick-details .value{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin-bottom:0}#verification-feedback #fixture-quick-details .quick-edit-container .diff .value{color:#d92d20!important;font-weight:600}#verification-feedback #fixture-quick-details .quick-edit-container .edit-input{padding:0 4px;border-radius:4px;width:50%;height:20px}#verification-feedback #fixture-comparison .wrapper{padding:12px;background:#f9fafb;border-radius:4px;height:100%}#verification-feedback #fixture-comparison .primary-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#009bf3;background:#eaf8ff;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .primary-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .btn-outline-cus{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .btn-outline-cus:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .quick-btn{font-size:13px!important;line-height:10px!important;padding:6px 8px!important;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;background:#fff}#verification-feedback #fixture-comparison .quick-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison .redo-btn{font-weight:600;font-size:12px;padding:8px 16px;line-height:18px;border-radius:8px;color:#344054;background:#fff;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d}#verification-feedback #fixture-comparison .redo-btn:hover{box-shadow:0 1px 2px #10182834}#verification-feedback #fixture-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison h4{font-family:Inter;font-weight:500;font-size:16px;line-height:24px;color:#1d2939;margin:0}#verification-feedback #fixture-comparison p{font-weight:400;font-size:12px;line-height:18px;color:#475467;margin:0}#verification-feedback #fixture-comparison .fixture-image{margin-bottom:12px}#verification-feedback #fixture-comparison .fixture-image img{object-fit:contain;width:100%}#verification-feedback #vm-comparison h5{font-family:Inter;font-weight:600;font-size:14px;line-height:20px;color:#1d2939;margin:0}#verification-feedback #vm-comparison .vm-container{padding:12px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);display:flex;gap:12px;cursor:pointer}#verification-feedback #vm-comparison .vm-container .vm-img{width:134px;height:134px;border-radius:4px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Gray-50, #f9fafb)}#verification-feedback #vm-comparison .vm-container .vm-img img{border-radius:2px;min-width:132px;min-height:134px;object-fit:contain;width:100%;height:100%;display:block}#verification-feedback #vm-comparison .vm-container .vm-details,#verification-feedback #vm-comparison .vm-container .vm-details h5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#verification-feedback .disabled{pointer-events:none;cursor:not-allowed!important;opacity:.6}.loader .shimmer{height:unset}#verification-feedback .img-preview{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:default}#verification-feedback .preview-close{position:absolute;top:16px;right:16px;background:#ffffff26;border:none;color:#fff;font-size:20px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10000}#verification-feedback .preview-close:hover{background:#ffffff4d}#verification-feedback .preview-zoom-controls{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#ffffff26;border-radius:8px;padding:6px 16px;z-index:10000}#verification-feedback .preview-zoom-controls span{color:#fff;font-size:14px;min-width:48px;text-align:center;-webkit-user-select:none;user-select:none}#verification-feedback .preview-zoom-controls button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center}#verification-feedback .preview-zoom-controls button:hover{background:#fff3}#verification-feedback .preview-zoom-controls .zoom-slider{-webkit-appearance:none;appearance:none;width:120px;height:4px;background:#ffffff4d;border-radius:2px;outline:none;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer}#verification-feedback .preview-zoom-controls .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer}#verification-feedback .preview-image-container{overflow:hidden;display:flex;align-items:center;justify-content:center;width:90vw;height:85vh;cursor:default}#verification-feedback .preview-image-container:active{cursor:grabbing}#verification-feedback .full-img{max-width:90vw;max-height:85vh;border-radius:10px;object-fit:contain;cursor:grab;-webkit-user-select:none;user-select:none}#verification-feedback .full-img:active{cursor:grabbing}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbModal }], propDecorators: { floorData: [{
                 type: Input
             }], feedbackDetails: [{
@@ -16300,7 +16343,7 @@ class ManageStorePlanoComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${fixtureData?.fixtureCapacity ?? 0} . VM - ${fixtureData?.vmConfig?.length ?? 0}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData?.shelfConfig)} . VM - ${fixtureData?.vmConfig?.length ?? 0}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -20745,7 +20788,7 @@ class TemplateTreeComponent {
             });
             const actualShelfCount = mf?.shelfConfig?.filter((s) => s.shelfType != "vmonly")
                 ?.length ?? 0;
-            const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelfCount} . Products -  ${mf.fixtureCapacity} . VM - ${mf.vmConfig.length}`, {
+            const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelfCount} . Products -  ${getFixtureProductCapacity(mf.shelfConfig)} . VM - ${mf.vmConfig.length}`, {
                 left: bottomX + bottomWidth / 2,
                 top: bottomY + bottomHeight / 2,
                 fontSize: 5,
@@ -22184,6 +22227,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Shared "Access denied" panel for the email-gated features. Reused two ways:
+ *  - Inline, with [feature] bound (e.g. inside the Find & Replace tab).
+ *  - As a route component (the findReplaceAccessGuard redirect target), reading
+ *    the feature name from the `feature` query param.
+ * Mirrors the access-denied markup used by the Looks page.
+ */
+class AccessDeniedComponent {
+    route;
+    feature = '';
+    constructor(route) {
+        this.route = route;
+    }
+    ngOnInit() {
+        if (!this.feature) {
+            this.feature = this.route.snapshot.queryParamMap.get('feature') || 'this feature';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AccessDeniedComponent, deps: [{ token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AccessDeniedComponent, selector: "lib-access-denied", inputs: { feature: "feature" }, ngImport: i0, template: "<section class=\"access-denied-wrapper\">\r\n  <div class=\"row mx-0 my-5\">\r\n    <div class=\"card p-5 col-md-12\">\r\n      <div class=\"access-denied text-center py-10\">\r\n        <div class=\"access-denied-icon mb-4\">\r\n          <i class=\"bi bi-shield-lock\"></i>\r\n        </div>\r\n        <h3 class=\"mb-2\">Access denied</h3>\r\n        <p class=\"text-muted mb-0\">\r\n          You don't have permission to access {{ feature }}. Contact your\r\n          administrator to be added to the allowed users list.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".access-denied-wrapper .access-denied .access-denied-icon i{font-size:48px;color:#ef4444;line-height:1}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AccessDeniedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-access-denied', template: "<section class=\"access-denied-wrapper\">\r\n  <div class=\"row mx-0 my-5\">\r\n    <div class=\"card p-5 col-md-12\">\r\n      <div class=\"access-denied text-center py-10\">\r\n        <div class=\"access-denied-icon mb-4\">\r\n          <i class=\"bi bi-shield-lock\"></i>\r\n        </div>\r\n        <h3 class=\"mb-2\">Access denied</h3>\r\n        <p class=\"text-muted mb-0\">\r\n          You don't have permission to access {{ feature }}. Contact your\r\n          administrator to be added to the allowed users list.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".access-denied-wrapper .access-denied .access-denied-icon i{font-size:48px;color:#ef4444;line-height:1}\n"] }]
+        }], ctorParameters: () => [{ type: i2.ActivatedRoute }], propDecorators: { feature: [{
+                type: Input
+            }] } });
+
 class FixtureTemplateTableComponent {
     ngbModal;
     router;
@@ -22199,6 +22270,10 @@ class FixtureTemplateTableComponent {
     viewMode = "list";
     fixtureTemplateChildList = [];
     activeTab = "all-templates"; // 'all-templates' or 'find-replace'
+    // Find & Replace is email-gated (planostaticdatas `allowedFindReplaceUsers`).
+    // frAccessChecked gates the tab/panel until the check resolves so neither flashes.
+    frAccessChecked = false;
+    frAllowed = false;
     sortedColumn = "";
     sortOrder = 1;
     childSortedColumn = "";
@@ -22251,6 +22326,7 @@ class FixtureTemplateTableComponent {
     }
     ngOnInit() {
         this.setPageData();
+        this.checkFindReplaceAccess();
         this.route.queryParamMap
             .pipe(takeUntil(this.destroy$))
             .subscribe((params) => {
@@ -22378,6 +22454,22 @@ class FixtureTemplateTableComponent {
             { title: "", path: "", isActive: false, isSeparator: true },
         ]);
     }
+    /** Resolve whether the session user may use Find & Replace. Never throws.
+     *  Hides the tab when denied; the tab content falls back to an access-denied
+     *  panel for anyone who deep-links to ?tab=find-replace. */
+    async checkFindReplaceAccess() {
+        try {
+            const res = await lastValueFrom(this.storeBuilderService.getFindReplaceAccess());
+            this.frAllowed = !!res?.data?.allowed;
+        }
+        catch (err) {
+            console.log("@@ ~ checkFindReplaceAccess [ERR]:", err);
+            this.frAllowed = false;
+        }
+        finally {
+            this.frAccessChecked = true;
+        }
+    }
     getFixtureLibList() {
         this.storeBuilderService.getFixtureNameList(this.clientId).subscribe({
             next: (res) => {
@@ -22842,11 +22934,11 @@ class FixtureTemplateTableComponent {
         this.templateSub?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixtureTemplateTableComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: StoreBuilderService }, { token: PlanoDataService }, { token: i2$1.GlobalStateService }, { token: i4.ToastService }, { token: i2$1.PageInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FixtureTemplateTableComponent, selector: "lib-fixture-template-table", ngImport: i0, template: "<!-- Tabs Navigation -->\r\n<div class=\"d-flex justify-content-start mb-4\">\r\n  <ul class=\"nav nav-line-tabs nav-line-tabs-2x\">\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [routerLink]=\"[]\"\r\n        [queryParams]=\"{ tab: 'all-templates' }\"\r\n        [queryParamsHandling]=\"'merge'\"\r\n        [class.active]=\"activeTab === 'all-templates'\"\r\n        (click)=\"onTabChange('all-templates')\"\r\n      >\r\n        All Templates\r\n      </a>\r\n    </li>\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [routerLink]=\"[]\"\r\n        [queryParams]=\"{ tab: 'find-replace' }\"\r\n        [queryParamsHandling]=\"'merge'\"\r\n        [class.active]=\"activeTab === 'find-replace'\"\r\n        (click)=\"onTabChange('find-replace')\"\r\n      >\r\n        Find and Replace\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</div>\r\n\r\n<!-- All Templates Content -->\r\n<section id=\"fixtureTemplate\" class=\"template-wrapper\" [ngStyle]=\"{'height': fixtureTemplateInfo ? '75vh' : ''}\" *ngIf=\"activeTab === 'all-templates'\">\r\n  <!-- Template view header -->\r\n   <div class=\"row h-100 mx-0 my-5 gap-2\">\r\n      <div class=\"col-height card p-5\" [ngClass]=\"fixtureTemplateInfo ? 'col-md-8' : 'col-md-12'\" [ngStyle]=\"{'overflow-y':fixtureTemplateInfo ? 'auto' : ''}\">\r\n        <div\r\n          *ngIf=\"fixtureTemplatesList.length !== 0 || searchTerm || isFilterApplied\"\r\n          class=\"d-flex justify-content-between align-items-center mb-5\"\r\n        >\r\n          <div>\r\n            <h4>All Fixture Templates</h4>\r\n            <span>{{ totalItems }} - Total Templates</span>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n            <div style=\"position: relative\" [ngClass]=\"{ 'd-none': viewMode === 'tree' }\">\r\n              <input\r\n                type=\"text\"\r\n                [(ngModel)]=\"searchTerm\"\r\n                (change)=\"onSearch()\"\r\n                style=\"padding-left: 3rem; padding-right: 3rem\"\r\n                class=\"form-control\"\r\n                name=\"search\"\r\n                autocomplete=\"off\"\r\n                placeholder=\"Search\"\r\n              />\r\n      \r\n              <span class=\"search-icon\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                  <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n                  <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n                </svg>\r\n              </span>\r\n      \r\n              <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n                <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n                  <g id=\"SVGRepo_iconCarrier\">\r\n                    <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                    <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                    <circle\r\n                      cx=\"12\"\r\n                      cy=\"12\"\r\n                      r=\"9\"\r\n                      stroke=\"#667085\"\r\n                      stroke-width=\"2\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    ></circle>\r\n                  </g>\r\n                </svg>\r\n              </button>\r\n            </div>\r\n      \r\n            <!-- <button\r\n              type=\"button\"\r\n              [disabled]=\"fixtureTemplatesList.length <= 0\"\r\n              (click)=\"redirectToreplace()\"\r\n              class=\"btn btn-outline text-nowrap\"\r\n            >\r\n              <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M17.6094 17.5L13.9844 13.875M15.9427 9.16667C15.9427 12.8486 12.9579 15.8333 9.27604 15.8333C5.59414 15.8333 2.60938 12.8486 2.60938 9.16667C2.60938 5.48477 5.59414 2.5 9.27604 2.5C12.9579 2.5 15.9427 5.48477 15.9427 9.16667Z\"\r\n                  stroke=\"#344054\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Find & Replace\r\n            </button> -->\r\n      \r\n            <lib-filters\r\n              [ngClass]=\"{ 'd-none': viewMode === 'tree' }\"\r\n              [dataObject]=\"filterObject\"\r\n              (appliedFilters)=\"applyFilters($event)\"\r\n            ></lib-filters>\r\n      \r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <div class=\"toggle-button me-1\" [ngClass]=\"{ selected: viewMode === 'list' }\" (click)=\"toggleViewMode('list')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M6.24078 4.54639H15.8906M6.24078 9.00017H15.8906M6.24078 13.4539H15.8906M2.5293 4.54639H2.53672M2.5293 9.00017H2.53672M2.5293 13.4539H2.53672\"\r\n                    [attr.stroke]=\"viewMode === 'list' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n      \r\n              <!-- <div class=\"toggle-button me-1\" [ngClass]=\"{ selected: viewMode === 'grid' }\" (click)=\"toggleViewMode('grid')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M7.91886 2.31934H2.72278V7.51541H7.91886V2.31934Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M16.0841 2.31934H10.888V7.51541H16.0841V2.31934Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M16.0841 10.4846H10.888V15.6807H16.0841V10.4846Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M7.91886 10.4846H2.72278V15.6807H7.91886V10.4846Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div> -->\r\n      \r\n              <div class=\"toggle-button\" [ngClass]=\"{ selected: viewMode === 'tree' }\" (click)=\"toggleViewMode('tree')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M9.92678 10.4845C7.43266 10.4845 6.61613 11.4866 6.3489 12.1472C7.14316 12.4887 7.69988 13.2755 7.69988 14.196C7.69988 14.7866 7.46527 15.353 7.04764 15.7706C6.63002 16.1882 6.0636 16.4228 5.47299 16.4228C4.88239 16.4228 4.31597 16.1882 3.89834 15.7706C3.48072 15.353 3.2461 14.7866 3.2461 14.196C3.2461 13.2235 3.86221 12.3996 4.7307 12.0953V5.9045C4.29573 5.75187 3.91908 5.4676 3.65304 5.09115C3.387 4.7147 3.24477 4.26476 3.2461 3.8038C3.2461 3.21319 3.48072 2.64677 3.89834 2.22915C4.31597 1.81152 4.88239 1.5769 5.47299 1.5769C6.0636 1.5769 6.63002 1.81152 7.04764 2.22915C7.46527 2.64677 7.69988 3.21319 7.69988 3.8038C7.69988 4.7762 7.08378 5.60015 6.21529 5.9045V9.83125C6.86851 9.34875 7.81865 8.99987 9.18448 8.99987C11.1664 8.99987 11.8271 8.0052 12.0423 7.34455C11.6362 7.17537 11.2892 6.88992 11.0449 6.52407C10.8005 6.15823 10.6698 5.72832 10.6691 5.28839C10.6691 4.69778 10.9037 4.13136 11.3213 3.71374C11.7389 3.29612 12.3054 3.0615 12.896 3.0615C13.4866 3.0615 14.053 3.29612 14.4706 3.71374C14.8882 4.13136 15.1229 4.69778 15.1229 5.28839C15.1229 6.28307 14.4696 7.14413 13.5715 7.41136C13.3785 8.47284 12.6584 10.4845 9.92678 10.4845ZM5.47299 13.4537C5.27612 13.4537 5.08732 13.5319 4.94811 13.6711C4.8089 13.8103 4.7307 13.9991 4.7307 14.196C4.7307 14.3928 4.8089 14.5816 4.94811 14.7208C5.08732 14.86 5.27612 14.9383 5.47299 14.9383C5.66986 14.9383 5.85867 14.86 5.99788 14.7208C6.13708 14.5816 6.21529 14.3928 6.21529 14.196C6.21529 13.9991 6.13708 13.8103 5.99788 13.6711C5.85867 13.5319 5.66986 13.4537 5.47299 13.4537ZM5.47299 3.0615C5.27612 3.0615 5.08732 3.1397 4.94811 3.27891C4.8089 3.41812 4.7307 3.60693 4.7307 3.8038C4.7307 4.00066 4.8089 4.18947 4.94811 4.32868C5.08732 4.46789 5.27612 4.54609 5.47299 4.54609C5.66986 4.54609 5.85867 4.46789 5.99788 4.32868C6.13708 4.18947 6.21529 4.00066 6.21529 3.8038C6.21529 3.60693 6.13708 3.41812 5.99788 3.27891C5.85867 3.1397 5.66986 3.0615 5.47299 3.0615ZM12.896 4.54609C12.6991 4.54609 12.5103 4.6243 12.3711 4.76351C12.2319 4.90271 12.1537 5.09152 12.1537 5.28839C12.1537 5.48526 12.2319 5.67406 12.3711 5.81327C12.5103 5.95248 12.6991 6.03069 12.896 6.03069C13.0928 6.03069 13.2816 5.95248 13.4208 5.81327C13.5601 5.67406 13.6383 5.48526 13.6383 5.28839C13.6383 5.09152 13.5601 4.90271 13.4208 4.76351C13.2816 4.6243 13.0928 4.54609 12.896 4.54609Z\"\r\n                    fill=\"#344054\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      \r\n        <div *ngIf=\"isPageLoading; else contentPart\">\r\n          <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      \r\n        <ng-template #contentPart>\r\n          <div *ngIf=\"!fixtureTemplatesList.length\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-12 my-6\">\r\n                <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                  <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n                  <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                  <div class=\"nodatasubtext\">There is no result for template</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n      \r\n          <div *ngIf=\"fixtureTemplatesList.length !== 0\">\r\n            <!-- Fixture Template list view -->\r\n            <section id=\"list-view\" *ngIf=\"viewMode === 'list'\">\r\n              <div class=\"table-responsive\">\r\n                <table class=\"w-100 table bottom-border text-nowrap\">\r\n                  <thead>\r\n                    <tr>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureName')\" class=\"cursor-pointer\">\r\n                          Master Template\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureName' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureCategory')\" class=\"cursor-pointer\">\r\n                          Fixture type\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureCategory' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureWidth')\" class=\"cursor-pointer\">\r\n                          Size width (ft)\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureWidth' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureWidth' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('productBrandName')\" class=\"cursor-pointer\">\r\n                          Brand\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'productBrandName' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'productBrandName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('productCategory')\" class=\"cursor-pointer\">\r\n                          Product category\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'productCategory' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'productCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('childCount')\" class=\"cursor-pointer\">\r\n                          Variant\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'childCount' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'childCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>Action</th>\r\n                    </tr>\r\n                  </thead>\r\n                  <tbody *ngFor=\"let template of fixtureTemplatesList; let i = index\">\r\n                    <tr [ngStyle]=\"{'background-color': template.templateDetails ? '#f6fcff' :  ''}\" (click)=\"enableRow(i)\" class=\"cursor-pointer\">\r\n                      <td style=\"max-width: 300px\">\r\n                        <div class=\"d-flex align-items-center w-100\">\r\n                          <!-- <div class=\"thumbnail\"></div> -->\r\n                          <div\r\n                            class=\"cursor-pointer\"\r\n                            (click)=\"\r\n                              template['open'] = !template['open']; template['loading'] = false; reset();$event.stopPropagation(); getVariantList(template, i);\r\n                            \"\r\n                          >\r\n                            <span class=\"round-badge me-3\">\r\n                              @if(!template.open) {\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M6 12L10 8L6 4\"\r\n                                  stroke=\"#344054\"\r\n                                  stroke-width=\"1.33333\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                              }@else {\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M4 6L8 10L12 6\"\r\n                                  stroke=\"#344054\"\r\n                                  stroke-width=\"1.33333\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                              }\r\n                            </span>\r\n                          </div>\r\n                          <!-- <a\r\n                            [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                            [queryParams]=\"{ templateId: template.id, isEdit: false }\"\r\n                            class=\"text-decoration-underline ellipsis\"\r\n                            [ngbTooltip]=\"template.name\"\r\n                          > -->\r\n                            <span class=\"template-name-ellipsis\" [ngbTooltip]=\"template.name\">\r\n                              {{ template.name }}\r\n                            </span>\r\n                          <!-- </a> -->\r\n                        </div>\r\n                      </td>\r\n                      <td>{{ template.type }}</td>\r\n                      <td>{{ template.size }}</td>\r\n                      <td *ngIf=\"!hideBrand\">\r\n                        <span *ngIf=\"template.brands.length <= 0\"> - </span>\r\n      \r\n                        <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                          <div *ngFor=\"let b of template.brands; let i = index\" class=\"badge inactive me-2\">\r\n                            <span *ngIf=\"i <= 2\"> {{ b }} </span>\r\n                            <span *ngIf=\"i === 3\"> +{{ template.brands.length - 3 }} </span>\r\n                          </div>\r\n                        </div>\r\n      \r\n                        <ng-template #brandTooltip>\r\n                          <ng-container *ngFor=\"let c of template.brands; let last = last\">\r\n                            {{ c }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </ng-template>\r\n                      </td>\r\n                      <td *ngIf=\"!hideBrand\">\r\n                        <span *ngIf=\"template.categories.length <= 0\"> - </span>\r\n      \r\n                        <div [ngbTooltip]=\"categoryTooltip\" class=\"cursor-pointer\">\r\n                          <div *ngFor=\"let item of template.categories; let i = index\" class=\"badge inactive me-2\">\r\n                            <span *ngIf=\"i <= 2\"> {{ item }} </span>\r\n                            <span *ngIf=\"i === 3\"> +{{ template.categories.length - 3 }} </span>\r\n                          </div>\r\n                        </div>\r\n      \r\n                        <ng-template #categoryTooltip>\r\n                          <ng-container *ngFor=\"let c of template.categories; let last = last\">\r\n                            {{ c }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </ng-template>\r\n                      </td>\r\n                      <td class=\"text-center\" *ngIf=\"!hideBrand\">\r\n                        <span class=\"cursor-pointer\">\r\n                          {{ template.childCount }}\r\n                        </span>\r\n                      </td>\r\n                      <td (click)=\"$event.stopPropagation();\">\r\n                        <div class=\"d-flex\">\r\n                          <div class=\"cursor-pointer\">\r\n                              <a\r\n                              [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                              [queryParams]=\"{ templateId: template.id, isEdit: false }\"\r\n                              class=\"text-decoration-underline ellipsis\"\r\n                              [ngbTooltip]=\"template.name\"\r\n                            >\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_69_46439)\">\r\n                                <path d=\"M19.166 10.0003C19.166 10.0003 15.8327 16.667 9.99935 16.667C4.16602 16.667 0.832683 10.0003 0.832683 10.0003C0.832683 10.0003 4.16602 3.33366 9.99935 3.33366C15.8327 3.33366 19.166 10.0003 19.166 10.0003Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                <path d=\"M9.99935 7.50033C8.61864 7.50033 7.49935 8.61961 7.49935 10.0003C7.49935 11.381 8.61864 12.5003 9.99935 12.5003C11.3801 12.5003 12.4994 11.381 12.4994 10.0003C12.4994 8.61961 11.3801 7.50033 9.99935 7.50033Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_69_46439\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(20 20) rotate(-180)\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                              </svg>\r\n                            </a>\r\n                          </div>\r\n                          <div class=\"cursor-pointer ps-3\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" (click)=\"onDuplicate(template.id!, i, 'master')\">\r\n                              <path d=\"M15.834 10.0003L4.16732 10.0003M10.0007 4.16699V15.8337\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                          </div>\r\n      \r\n                        </div>\r\n                        <!-- <div class=\"dropdown\">\r\n                          <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                            <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                          </button>\r\n                          <ul class=\"dropdown-menu\">\r\n                            <li>\r\n                              <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(template.id!, i, 'master')\">\r\n                                Create Variant\r\n                              </a>\r\n                            </li>\r\n                          </ul>\r\n                        </div> -->\r\n                      </td>\r\n                    </tr>\r\n                    <tr *ngIf=\"template.open\">\r\n                      <td colspan=\"7\">\r\n                        <div *ngIf=\"template.loading; else childcontentPart\">\r\n                          <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                            <div class=\"shimmer\">\r\n                              <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                              </div>\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                        <ng-template #childcontentPart>\r\n                          <div class=\"card\">\r\n                            <div *ngIf=\"!fixtureTemplateChildList.length\">\r\n                              <div class=\"row\">\r\n                                <div class=\"col-lg-12\">\r\n                                  <table class=\"w-100 table bottom-border text-nowrap\">\r\n                                    <tr>\r\n                                      <th>Variant</th>\r\n                                      <th>Assigned stores</th>\r\n                                      <th *ngIf=\"!hideBrand\">Brand</th>\r\n                                      <th *ngIf=\"!hideBrand\">Product category</th>\r\n                                      <th>Status</th>\r\n                                      <th>Action</th>\r\n                                    </tr>\r\n                                    <tr>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                    </tr>\r\n                                  </table>\r\n                                  <!-- <div class=\"card-body d-flex justify-content-center align-items-center flex-column\"> \r\n                                    <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n                                    <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                                    <div class=\"nodatasubtext\">There is no result for variants</div>\r\n                                  </div> -->\r\n                                </div>\r\n                              </div>\r\n                            </div>\r\n                            <table class=\"w-100 table bottom-border text-nowrap\" *ngIf=\"fixtureTemplateChildList.length\">\r\n                              <thead>\r\n                                <tr>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('fixtureName', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Variant\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'fixtureName' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'fixtureName' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('storeCount', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Assigned Stores\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'storeCount' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'storeCount' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th *ngIf=\"!hideBrand\">\r\n                                    <span (click)=\"onChildSortTable('productBrandName', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Brand\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'productBrandName' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'productBrandName'\r\n                                            ? 'fa-arrow-up'\r\n                                            : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th *ngIf=\"!hideBrand\">\r\n                                    <span (click)=\"onChildSortTable('productCategory', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Product category\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'productCategory' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'productCategory'\r\n                                            ? 'fa-arrow-up'\r\n                                            : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('status', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Status\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'status' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'status' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>Action</th>\r\n                                </tr>\r\n                              </thead>\r\n                              <tbody>\r\n                                <tr *ngFor=\"let childTemplate of fixtureTemplateChildList;let j=index\" (click)=\"enableRow(i,j,'child')\" [ngStyle]=\"{'background-color': childTemplate.templateDetails ? '#f6fcff' :  ''}\" class=\"cursor-pointer\">\r\n                                  <td style=\"max-width: 300px\">\r\n                                    <div class=\"d-flex align-items-center w-100\">\r\n                                      <!-- <div class=\"thumbnail\"></div> -->\r\n                                      <!-- <a\r\n                                        [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                                        [queryParams]=\"{ templateId: childTemplate._id, isEdit: false }\"\r\n                                        class=\"text-decoration-underline ellipsis\"\r\n                                        [ngbTooltip]=\"childTemplate.fixtureName\"\r\n                                      > -->\r\n                                        <span class=\"template-name-ellipsis\" [ngbTooltip]=\"childTemplate.fixtureName\">\r\n                                          {{ childTemplate.fixtureName }}\r\n                                        </span>\r\n                                      <!-- </a> -->\r\n                                    </div>\r\n                                  </td>\r\n                                  <td>\r\n                                    <div>\r\n                                      <a\r\n                                        [routerLink]=\"['/manage/planogram/fixture-template/assign-stores']\"\r\n                                        [queryParams]=\"{ templateId: childTemplate._id, isEdit: false }\"\r\n                                        class=\"text-decoration-underline\"\r\n                                        [ngbTooltip]=\"storeTooltip\"\r\n                                      >\r\n                                        {{ childTemplate.storeCount }}\r\n                                      </a>\r\n                                    </div>\r\n                                    <ng-template #storeTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.storeList; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td *ngIf=\"!hideBrand\">\r\n                                    <span *ngIf=\"childTemplate.productBrandName.length <= 0\"> - </span>\r\n      \r\n                                    <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                                      <div *ngFor=\"let b of childTemplate.productBrandName; let i = index\" class=\"badge inactive me-2\">\r\n                                        <span *ngIf=\"i <= 2\"> {{ b }} </span>\r\n                                        <span *ngIf=\"i === 3\"> +{{ childTemplate.productBrandName.length - 3 }} </span>\r\n                                      </div>\r\n                                    </div>\r\n      \r\n                                    <ng-template #brandTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.productBrandName; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td *ngIf=\"!hideBrand\">\r\n                                    <span *ngIf=\"childTemplate.productCategory.length <= 0\"> - </span>\r\n      \r\n                                    <div [ngbTooltip]=\"categoryTooltip\" class=\"cursor-pointer\">\r\n                                      <div\r\n                                        *ngFor=\"let item of childTemplate.productCategory; let i = index\"\r\n                                        class=\"badge inactive me-2\"\r\n                                      >\r\n                                        <span *ngIf=\"i <= 2\"> {{ item }} </span>\r\n                                        <span *ngIf=\"i === 3\"> +{{ childTemplate.productCategory.length - 3 }} </span>\r\n                                      </div>\r\n                                    </div>\r\n      \r\n                                    <ng-template #categoryTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.productCategory; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td>\r\n                                    <div class=\"badge\" [ngClass]=\"childTemplate.status\">{{ childTemplate.status | titlecase }}</div>\r\n                                  </td>\r\n                                  <td (click)=\"$event.stopPropagation();\">\r\n                                    <div class=\"dropdown\">\r\n                                      <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                                        <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                                      </button>\r\n                                      <ul class=\"dropdown-menu\">\r\n                                        <li><a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(childTemplate)\">Edit</a></li>\r\n                                        <li>\r\n                                          <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(childTemplate._id!)\">\r\n                                            Duplicate\r\n                                          </a>\r\n                                        </li>\r\n                                        <li>\r\n                                          <a\r\n                                            class=\"dropdown-item cursor-pointer\"\r\n                                            [routerLink]=\"['/manage/planogram/findAndReplace']\"\r\n                                            [queryParams]=\"{ selectedFixture: childTemplate._id }\"\r\n                                          >\r\n                                            Find and replace\r\n                                          </a>\r\n                                        </li>\r\n                                        <li>\r\n                                          <a\r\n                                            class=\"dropdown-item cursor-pointer text-danger\"\r\n                                            (click)=\"onDelete(childTemplate._id!, childTemplate.storeCount, template.id, i)\"\r\n                                          >\r\n                                            Delete\r\n                                          </a>\r\n                                        </li>\r\n                                      </ul>\r\n                                    </div>\r\n                                  </td>\r\n                                </tr>\r\n                              </tbody>\r\n                            </table>\r\n                            <lib-pagination\r\n                              *ngIf=\"fixtureTemplateChildList.length\"\r\n                              [itemsPerPage]=\"childLimit\"\r\n                              [currentPage]=\"childOffset\"\r\n                              [totalItems]=\"childTotalItems\"\r\n                              [paginationSizes]=\"childPaginationSizes\"\r\n                              [pageSize]=\"childPaginationSize()\"\r\n                              (pageChange)=\"onChildPageChange($event, template.id, i)\"\r\n                              (pageSizeChange)=\"onChildPageSizeChange($event, template.id, i)\"\r\n                            >\r\n                            </lib-pagination>\r\n                          </div>\r\n                        </ng-template>\r\n                      </td>\r\n                    </tr>\r\n                  </tbody>\r\n                </table>\r\n              </div>\r\n            </section>\r\n      \r\n      \r\n            <!-- Fixture Template grid view -->\r\n            <section id=\"grid-view\" *ngIf=\"viewMode === 'grid'\" class=\"table-responsive\">\r\n              <div class=\"row gx-6 gy-4 m-0\">\r\n                <div class=\"col-md-4\" *ngFor=\"let template of fixtureTemplatesList\">\r\n                  <div class=\"card\" (click)=\"onClickCard($event, template)\">\r\n                    <div class=\"card-img\">\r\n                      <div class=\"card-action dropdown\" (click)=\"$event.stopPropagation()\">\r\n                        <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                          <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                        </button>\r\n                        <ul class=\"dropdown-menu\">\r\n                          <!-- <li>\r\n                            <a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(template.id!); $event.stopPropagation()\">\r\n                              Create Variant\r\n                            </a>\r\n                          </li> -->\r\n                          <!-- <li>\r\n                              <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(template.id!); $event.stopPropagation()\">\r\n                                Duplicate\r\n                              </a>\r\n                            </li> -->\r\n                          <!-- <li>\r\n                              <a\r\n                                class=\"dropdown-item cursor-pointer text-danger\"\r\n                                (click)=\"onDelete(template.id!, template.storeCount); $event.stopPropagation()\"\r\n                              >\r\n                                Delete\r\n                              </a>\r\n                            </li> -->\r\n                        </ul>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                      <h3>\r\n                        {{ template.name }}\r\n                      </h3>\r\n                      <div class=\"badge\" [ngClass]=\"template.status\">{{ template.status | titlecase }}</div>\r\n                    </div>\r\n                    <div class=\"d-flex flex-wrap mt-1\">\r\n                      <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                        @for (b of template.brands; track $index;let last = $last) {\r\n                        <div class=\"badge inactive me-2 mb-2\">\r\n                          <span *ngIf=\"$index <= 2\"> {{ b }} </span>\r\n                          <span *ngIf=\"$index === 3\"> + {{ template.brands.length - 3 }} </span>\r\n                        </div>\r\n                        <span *ngIf=\"$index < 2 && !last\" class=\"me-2 card-tagline\">&#8226;</span>\r\n                        }\r\n                      </div>\r\n      \r\n                      <ng-template #brandTooltip>\r\n                        <p>\r\n                          <b>Brands: </b>\r\n                          <ng-container *ngFor=\"let b of template.brands; let last = last\">\r\n                            {{ b }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </p>\r\n                      </ng-template>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n      \r\n            <!-- Fixture Template tree view -->\r\n            <section id=\"tree-view\" *ngIf=\"viewMode === 'tree'\">\r\n              <fixture-template-tree [clientId]=\"clientId\" [viewMode]=\"'group'\"></fixture-template-tree>\r\n            </section>\r\n      \r\n            <!-- Pagination -->\r\n            <lib-pagination\r\n              *ngIf=\"viewMode !== 'tree'\"\r\n              [itemsPerPage]=\"limit\"\r\n              [currentPage]=\"offset\"\r\n              [totalItems]=\"totalItems\"\r\n              [paginationSizes]=\"paginationSizes\"\r\n              [pageSize]=\"paginationSize()\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\"\r\n            >\r\n            </lib-pagination>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div [ngClass]=\"{'d-none':!fixtureTemplateInfo}\" class=\"col bg-white rounded p-3 fixture-overview card col-height\" style=\"overflow-y:auto\">\r\n          <lib-template-details [fixtureTemplateDetails]=\"fixtureTemplateInfo\" [vmList]=\"vmList\" (onClose)=\"onClickClose()\" [vmList]=\"vmList\"></lib-template-details>\r\n      </div>\r\n   </div>\r\n</section>\r\n\r\n<!-- Find and Replace Content -->\r\n<div *ngIf=\"activeTab === 'find-replace'\">\r\n  <lib-find-replace-table></lib-find-replace-table>\r\n</div>\r\n\r\n<ng-template #verticalDots>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n    <path\r\n      d=\"M1 8.99998C1 9.52925 1.44771 9.95831 2 9.95831C2.55228 9.95831 3 9.52925 3 8.99998C3 8.47071 2.55228 8.04165 2 8.04165C1.44771 8.04165 1 8.47071 1 8.99998Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M0.999999 15.7083C0.999999 16.2376 1.44771 16.6666 2 16.6666C2.55228 16.6666 3 16.2376 3 15.7083C3 15.179 2.55228 14.75 2 14.75C1.44771 14.75 0.999999 15.179 0.999999 15.7083Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M1 2.29165C1 2.82092 1.44772 3.24998 2 3.24998C2.55228 3.24998 3 2.82092 3 2.29165C3 1.76237 2.55228 1.33331 2 1.33331C1.44772 1.33331 1 1.76237 1 2.29165Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</ng-template>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.round-badge{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;border-radius:12px;background:var(--Gray-100, #F2F4F7)}.fixture-overview{max-width:530px;overflow-y:auto}.template-name-ellipsis{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-height{flex:1;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: TemplateTreeComponent, selector: "fixture-template-tree", inputs: ["viewMode", "clientId", "masterFixtureData", "allFixture"] }, { kind: "component", type: FindReplaceTableComponent, selector: "lib-find-replace-table" }, { kind: "component", type: TemplateDetailsComponent, selector: "lib-template-details", inputs: ["fixtureTemplateDetails", "vmList"], outputs: ["onClose"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FixtureTemplateTableComponent, selector: "lib-fixture-template-table", ngImport: i0, template: "<!-- Tabs Navigation -->\r\n<div class=\"d-flex justify-content-start mb-4\">\r\n  <ul class=\"nav nav-line-tabs nav-line-tabs-2x\">\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [routerLink]=\"[]\"\r\n        [queryParams]=\"{ tab: 'all-templates' }\"\r\n        [queryParamsHandling]=\"'merge'\"\r\n        [class.active]=\"activeTab === 'all-templates'\"\r\n        (click)=\"onTabChange('all-templates')\"\r\n      >\r\n        All Templates\r\n      </a>\r\n    </li>\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [routerLink]=\"[]\"\r\n        [queryParams]=\"{ tab: 'find-replace' }\"\r\n        [queryParamsHandling]=\"'merge'\"\r\n        [class.active]=\"activeTab === 'find-replace'\"\r\n        (click)=\"onTabChange('find-replace')\"\r\n      >\r\n        Find and Replace\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</div>\r\n\r\n<!-- All Templates Content -->\r\n<section id=\"fixtureTemplate\" class=\"template-wrapper\" [ngStyle]=\"{'height': fixtureTemplateInfo ? '75vh' : ''}\" *ngIf=\"activeTab === 'all-templates'\">\r\n  <!-- Template view header -->\r\n   <div class=\"row h-100 mx-0 my-5 gap-2\">\r\n      <div class=\"col-height card p-5\" [ngClass]=\"fixtureTemplateInfo ? 'col-md-8' : 'col-md-12'\" [ngStyle]=\"{'overflow-y':fixtureTemplateInfo ? 'auto' : ''}\">\r\n        <div\r\n          *ngIf=\"fixtureTemplatesList.length !== 0 || searchTerm || isFilterApplied\"\r\n          class=\"d-flex justify-content-between align-items-center mb-5\"\r\n        >\r\n          <div>\r\n            <h4>All Fixture Templates</h4>\r\n            <span>{{ totalItems }} - Total Templates</span>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n            <div style=\"position: relative\" [ngClass]=\"{ 'd-none': viewMode === 'tree' }\">\r\n              <input\r\n                type=\"text\"\r\n                [(ngModel)]=\"searchTerm\"\r\n                (change)=\"onSearch()\"\r\n                style=\"padding-left: 3rem; padding-right: 3rem\"\r\n                class=\"form-control\"\r\n                name=\"search\"\r\n                autocomplete=\"off\"\r\n                placeholder=\"Search\"\r\n              />\r\n      \r\n              <span class=\"search-icon\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                  <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n                  <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n                </svg>\r\n              </span>\r\n      \r\n              <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n                <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n                  <g id=\"SVGRepo_iconCarrier\">\r\n                    <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                    <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                    <circle\r\n                      cx=\"12\"\r\n                      cy=\"12\"\r\n                      r=\"9\"\r\n                      stroke=\"#667085\"\r\n                      stroke-width=\"2\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    ></circle>\r\n                  </g>\r\n                </svg>\r\n              </button>\r\n            </div>\r\n      \r\n            <!-- <button\r\n              type=\"button\"\r\n              [disabled]=\"fixtureTemplatesList.length <= 0\"\r\n              (click)=\"redirectToreplace()\"\r\n              class=\"btn btn-outline text-nowrap\"\r\n            >\r\n              <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M17.6094 17.5L13.9844 13.875M15.9427 9.16667C15.9427 12.8486 12.9579 15.8333 9.27604 15.8333C5.59414 15.8333 2.60938 12.8486 2.60938 9.16667C2.60938 5.48477 5.59414 2.5 9.27604 2.5C12.9579 2.5 15.9427 5.48477 15.9427 9.16667Z\"\r\n                  stroke=\"#344054\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Find & Replace\r\n            </button> -->\r\n      \r\n            <lib-filters\r\n              [ngClass]=\"{ 'd-none': viewMode === 'tree' }\"\r\n              [dataObject]=\"filterObject\"\r\n              (appliedFilters)=\"applyFilters($event)\"\r\n            ></lib-filters>\r\n      \r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <div class=\"toggle-button me-1\" [ngClass]=\"{ selected: viewMode === 'list' }\" (click)=\"toggleViewMode('list')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M6.24078 4.54639H15.8906M6.24078 9.00017H15.8906M6.24078 13.4539H15.8906M2.5293 4.54639H2.53672M2.5293 9.00017H2.53672M2.5293 13.4539H2.53672\"\r\n                    [attr.stroke]=\"viewMode === 'list' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n      \r\n              <!-- <div class=\"toggle-button me-1\" [ngClass]=\"{ selected: viewMode === 'grid' }\" (click)=\"toggleViewMode('grid')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M7.91886 2.31934H2.72278V7.51541H7.91886V2.31934Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M16.0841 2.31934H10.888V7.51541H16.0841V2.31934Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M16.0841 10.4846H10.888V15.6807H16.0841V10.4846Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M7.91886 10.4846H2.72278V15.6807H7.91886V10.4846Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div> -->\r\n      \r\n              <div class=\"toggle-button\" [ngClass]=\"{ selected: viewMode === 'tree' }\" (click)=\"toggleViewMode('tree')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M9.92678 10.4845C7.43266 10.4845 6.61613 11.4866 6.3489 12.1472C7.14316 12.4887 7.69988 13.2755 7.69988 14.196C7.69988 14.7866 7.46527 15.353 7.04764 15.7706C6.63002 16.1882 6.0636 16.4228 5.47299 16.4228C4.88239 16.4228 4.31597 16.1882 3.89834 15.7706C3.48072 15.353 3.2461 14.7866 3.2461 14.196C3.2461 13.2235 3.86221 12.3996 4.7307 12.0953V5.9045C4.29573 5.75187 3.91908 5.4676 3.65304 5.09115C3.387 4.7147 3.24477 4.26476 3.2461 3.8038C3.2461 3.21319 3.48072 2.64677 3.89834 2.22915C4.31597 1.81152 4.88239 1.5769 5.47299 1.5769C6.0636 1.5769 6.63002 1.81152 7.04764 2.22915C7.46527 2.64677 7.69988 3.21319 7.69988 3.8038C7.69988 4.7762 7.08378 5.60015 6.21529 5.9045V9.83125C6.86851 9.34875 7.81865 8.99987 9.18448 8.99987C11.1664 8.99987 11.8271 8.0052 12.0423 7.34455C11.6362 7.17537 11.2892 6.88992 11.0449 6.52407C10.8005 6.15823 10.6698 5.72832 10.6691 5.28839C10.6691 4.69778 10.9037 4.13136 11.3213 3.71374C11.7389 3.29612 12.3054 3.0615 12.896 3.0615C13.4866 3.0615 14.053 3.29612 14.4706 3.71374C14.8882 4.13136 15.1229 4.69778 15.1229 5.28839C15.1229 6.28307 14.4696 7.14413 13.5715 7.41136C13.3785 8.47284 12.6584 10.4845 9.92678 10.4845ZM5.47299 13.4537C5.27612 13.4537 5.08732 13.5319 4.94811 13.6711C4.8089 13.8103 4.7307 13.9991 4.7307 14.196C4.7307 14.3928 4.8089 14.5816 4.94811 14.7208C5.08732 14.86 5.27612 14.9383 5.47299 14.9383C5.66986 14.9383 5.85867 14.86 5.99788 14.7208C6.13708 14.5816 6.21529 14.3928 6.21529 14.196C6.21529 13.9991 6.13708 13.8103 5.99788 13.6711C5.85867 13.5319 5.66986 13.4537 5.47299 13.4537ZM5.47299 3.0615C5.27612 3.0615 5.08732 3.1397 4.94811 3.27891C4.8089 3.41812 4.7307 3.60693 4.7307 3.8038C4.7307 4.00066 4.8089 4.18947 4.94811 4.32868C5.08732 4.46789 5.27612 4.54609 5.47299 4.54609C5.66986 4.54609 5.85867 4.46789 5.99788 4.32868C6.13708 4.18947 6.21529 4.00066 6.21529 3.8038C6.21529 3.60693 6.13708 3.41812 5.99788 3.27891C5.85867 3.1397 5.66986 3.0615 5.47299 3.0615ZM12.896 4.54609C12.6991 4.54609 12.5103 4.6243 12.3711 4.76351C12.2319 4.90271 12.1537 5.09152 12.1537 5.28839C12.1537 5.48526 12.2319 5.67406 12.3711 5.81327C12.5103 5.95248 12.6991 6.03069 12.896 6.03069C13.0928 6.03069 13.2816 5.95248 13.4208 5.81327C13.5601 5.67406 13.6383 5.48526 13.6383 5.28839C13.6383 5.09152 13.5601 4.90271 13.4208 4.76351C13.2816 4.6243 13.0928 4.54609 12.896 4.54609Z\"\r\n                    fill=\"#344054\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      \r\n        <div *ngIf=\"isPageLoading; else contentPart\">\r\n          <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      \r\n        <ng-template #contentPart>\r\n          <div *ngIf=\"!fixtureTemplatesList.length\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-12 my-6\">\r\n                <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                  <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n                  <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                  <div class=\"nodatasubtext\">There is no result for template</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n      \r\n          <div *ngIf=\"fixtureTemplatesList.length !== 0\">\r\n            <!-- Fixture Template list view -->\r\n            <section id=\"list-view\" *ngIf=\"viewMode === 'list'\">\r\n              <div class=\"table-responsive\">\r\n                <table class=\"w-100 table bottom-border text-nowrap\">\r\n                  <thead>\r\n                    <tr>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureName')\" class=\"cursor-pointer\">\r\n                          Master Template\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureName' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureCategory')\" class=\"cursor-pointer\">\r\n                          Fixture type\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureCategory' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureWidth')\" class=\"cursor-pointer\">\r\n                          Size width (ft)\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureWidth' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureWidth' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('productBrandName')\" class=\"cursor-pointer\">\r\n                          Brand\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'productBrandName' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'productBrandName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('productCategory')\" class=\"cursor-pointer\">\r\n                          Product category\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'productCategory' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'productCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('childCount')\" class=\"cursor-pointer\">\r\n                          Variant\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'childCount' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'childCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>Action</th>\r\n                    </tr>\r\n                  </thead>\r\n                  <tbody *ngFor=\"let template of fixtureTemplatesList; let i = index\">\r\n                    <tr [ngStyle]=\"{'background-color': template.templateDetails ? '#f6fcff' :  ''}\" (click)=\"enableRow(i)\" class=\"cursor-pointer\">\r\n                      <td style=\"max-width: 300px\">\r\n                        <div class=\"d-flex align-items-center w-100\">\r\n                          <!-- <div class=\"thumbnail\"></div> -->\r\n                          <div\r\n                            class=\"cursor-pointer\"\r\n                            (click)=\"\r\n                              template['open'] = !template['open']; template['loading'] = false; reset();$event.stopPropagation(); getVariantList(template, i);\r\n                            \"\r\n                          >\r\n                            <span class=\"round-badge me-3\">\r\n                              @if(!template.open) {\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M6 12L10 8L6 4\"\r\n                                  stroke=\"#344054\"\r\n                                  stroke-width=\"1.33333\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                              }@else {\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M4 6L8 10L12 6\"\r\n                                  stroke=\"#344054\"\r\n                                  stroke-width=\"1.33333\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                              }\r\n                            </span>\r\n                          </div>\r\n                          <!-- <a\r\n                            [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                            [queryParams]=\"{ templateId: template.id, isEdit: false }\"\r\n                            class=\"text-decoration-underline ellipsis\"\r\n                            [ngbTooltip]=\"template.name\"\r\n                          > -->\r\n                            <span class=\"template-name-ellipsis\" [ngbTooltip]=\"template.name\">\r\n                              {{ template.name }}\r\n                            </span>\r\n                          <!-- </a> -->\r\n                        </div>\r\n                      </td>\r\n                      <td>{{ template.type }}</td>\r\n                      <td>{{ template.size }}</td>\r\n                      <td *ngIf=\"!hideBrand\">\r\n                        <span *ngIf=\"template.brands.length <= 0\"> - </span>\r\n      \r\n                        <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                          <div *ngFor=\"let b of template.brands; let i = index\" class=\"badge inactive me-2\">\r\n                            <span *ngIf=\"i <= 2\"> {{ b }} </span>\r\n                            <span *ngIf=\"i === 3\"> +{{ template.brands.length - 3 }} </span>\r\n                          </div>\r\n                        </div>\r\n      \r\n                        <ng-template #brandTooltip>\r\n                          <ng-container *ngFor=\"let c of template.brands; let last = last\">\r\n                            {{ c }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </ng-template>\r\n                      </td>\r\n                      <td *ngIf=\"!hideBrand\">\r\n                        <span *ngIf=\"template.categories.length <= 0\"> - </span>\r\n      \r\n                        <div [ngbTooltip]=\"categoryTooltip\" class=\"cursor-pointer\">\r\n                          <div *ngFor=\"let item of template.categories; let i = index\" class=\"badge inactive me-2\">\r\n                            <span *ngIf=\"i <= 2\"> {{ item }} </span>\r\n                            <span *ngIf=\"i === 3\"> +{{ template.categories.length - 3 }} </span>\r\n                          </div>\r\n                        </div>\r\n      \r\n                        <ng-template #categoryTooltip>\r\n                          <ng-container *ngFor=\"let c of template.categories; let last = last\">\r\n                            {{ c }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </ng-template>\r\n                      </td>\r\n                      <td class=\"text-center\" *ngIf=\"!hideBrand\">\r\n                        <span class=\"cursor-pointer\">\r\n                          {{ template.childCount }}\r\n                        </span>\r\n                      </td>\r\n                      <td (click)=\"$event.stopPropagation();\">\r\n                        <div class=\"d-flex\">\r\n                          <div class=\"cursor-pointer\">\r\n                              <a\r\n                              [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                              [queryParams]=\"{ templateId: template.id, isEdit: false }\"\r\n                              class=\"text-decoration-underline ellipsis\"\r\n                              [ngbTooltip]=\"template.name\"\r\n                            >\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_69_46439)\">\r\n                                <path d=\"M19.166 10.0003C19.166 10.0003 15.8327 16.667 9.99935 16.667C4.16602 16.667 0.832683 10.0003 0.832683 10.0003C0.832683 10.0003 4.16602 3.33366 9.99935 3.33366C15.8327 3.33366 19.166 10.0003 19.166 10.0003Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                <path d=\"M9.99935 7.50033C8.61864 7.50033 7.49935 8.61961 7.49935 10.0003C7.49935 11.381 8.61864 12.5003 9.99935 12.5003C11.3801 12.5003 12.4994 11.381 12.4994 10.0003C12.4994 8.61961 11.3801 7.50033 9.99935 7.50033Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_69_46439\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(20 20) rotate(-180)\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                              </svg>\r\n                            </a>\r\n                          </div>\r\n                          <div class=\"cursor-pointer ps-3\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" (click)=\"onDuplicate(template.id!, i, 'master')\">\r\n                              <path d=\"M15.834 10.0003L4.16732 10.0003M10.0007 4.16699V15.8337\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                          </div>\r\n      \r\n                        </div>\r\n                        <!-- <div class=\"dropdown\">\r\n                          <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                            <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                          </button>\r\n                          <ul class=\"dropdown-menu\">\r\n                            <li>\r\n                              <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(template.id!, i, 'master')\">\r\n                                Create Variant\r\n                              </a>\r\n                            </li>\r\n                          </ul>\r\n                        </div> -->\r\n                      </td>\r\n                    </tr>\r\n                    <tr *ngIf=\"template.open\">\r\n                      <td colspan=\"7\">\r\n                        <div *ngIf=\"template.loading; else childcontentPart\">\r\n                          <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                            <div class=\"shimmer\">\r\n                              <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                              </div>\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                        <ng-template #childcontentPart>\r\n                          <div class=\"card\">\r\n                            <div *ngIf=\"!fixtureTemplateChildList.length\">\r\n                              <div class=\"row\">\r\n                                <div class=\"col-lg-12\">\r\n                                  <table class=\"w-100 table bottom-border text-nowrap\">\r\n                                    <tr>\r\n                                      <th>Variant</th>\r\n                                      <th>Assigned stores</th>\r\n                                      <th *ngIf=\"!hideBrand\">Brand</th>\r\n                                      <th *ngIf=\"!hideBrand\">Product category</th>\r\n                                      <th>Status</th>\r\n                                      <th>Action</th>\r\n                                    </tr>\r\n                                    <tr>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                    </tr>\r\n                                  </table>\r\n                                  <!-- <div class=\"card-body d-flex justify-content-center align-items-center flex-column\"> \r\n                                    <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n                                    <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                                    <div class=\"nodatasubtext\">There is no result for variants</div>\r\n                                  </div> -->\r\n                                </div>\r\n                              </div>\r\n                            </div>\r\n                            <table class=\"w-100 table bottom-border text-nowrap\" *ngIf=\"fixtureTemplateChildList.length\">\r\n                              <thead>\r\n                                <tr>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('fixtureName', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Variant\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'fixtureName' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'fixtureName' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('storeCount', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Assigned Stores\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'storeCount' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'storeCount' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th *ngIf=\"!hideBrand\">\r\n                                    <span (click)=\"onChildSortTable('productBrandName', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Brand\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'productBrandName' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'productBrandName'\r\n                                            ? 'fa-arrow-up'\r\n                                            : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th *ngIf=\"!hideBrand\">\r\n                                    <span (click)=\"onChildSortTable('productCategory', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Product category\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'productCategory' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'productCategory'\r\n                                            ? 'fa-arrow-up'\r\n                                            : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('status', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Status\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'status' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'status' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>Action</th>\r\n                                </tr>\r\n                              </thead>\r\n                              <tbody>\r\n                                <tr *ngFor=\"let childTemplate of fixtureTemplateChildList;let j=index\" (click)=\"enableRow(i,j,'child')\" [ngStyle]=\"{'background-color': childTemplate.templateDetails ? '#f6fcff' :  ''}\" class=\"cursor-pointer\">\r\n                                  <td style=\"max-width: 300px\">\r\n                                    <div class=\"d-flex align-items-center w-100\">\r\n                                      <!-- <div class=\"thumbnail\"></div> -->\r\n                                      <!-- <a\r\n                                        [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                                        [queryParams]=\"{ templateId: childTemplate._id, isEdit: false }\"\r\n                                        class=\"text-decoration-underline ellipsis\"\r\n                                        [ngbTooltip]=\"childTemplate.fixtureName\"\r\n                                      > -->\r\n                                        <span class=\"template-name-ellipsis\" [ngbTooltip]=\"childTemplate.fixtureName\">\r\n                                          {{ childTemplate.fixtureName }}\r\n                                        </span>\r\n                                      <!-- </a> -->\r\n                                    </div>\r\n                                  </td>\r\n                                  <td>\r\n                                    <div>\r\n                                      <a\r\n                                        [routerLink]=\"['/manage/planogram/fixture-template/assign-stores']\"\r\n                                        [queryParams]=\"{ templateId: childTemplate._id, isEdit: false }\"\r\n                                        class=\"text-decoration-underline\"\r\n                                        [ngbTooltip]=\"storeTooltip\"\r\n                                      >\r\n                                        {{ childTemplate.storeCount }}\r\n                                      </a>\r\n                                    </div>\r\n                                    <ng-template #storeTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.storeList; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td *ngIf=\"!hideBrand\">\r\n                                    <span *ngIf=\"childTemplate.productBrandName.length <= 0\"> - </span>\r\n      \r\n                                    <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                                      <div *ngFor=\"let b of childTemplate.productBrandName; let i = index\" class=\"badge inactive me-2\">\r\n                                        <span *ngIf=\"i <= 2\"> {{ b }} </span>\r\n                                        <span *ngIf=\"i === 3\"> +{{ childTemplate.productBrandName.length - 3 }} </span>\r\n                                      </div>\r\n                                    </div>\r\n      \r\n                                    <ng-template #brandTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.productBrandName; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td *ngIf=\"!hideBrand\">\r\n                                    <span *ngIf=\"childTemplate.productCategory.length <= 0\"> - </span>\r\n      \r\n                                    <div [ngbTooltip]=\"categoryTooltip\" class=\"cursor-pointer\">\r\n                                      <div\r\n                                        *ngFor=\"let item of childTemplate.productCategory; let i = index\"\r\n                                        class=\"badge inactive me-2\"\r\n                                      >\r\n                                        <span *ngIf=\"i <= 2\"> {{ item }} </span>\r\n                                        <span *ngIf=\"i === 3\"> +{{ childTemplate.productCategory.length - 3 }} </span>\r\n                                      </div>\r\n                                    </div>\r\n      \r\n                                    <ng-template #categoryTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.productCategory; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td>\r\n                                    <div class=\"badge\" [ngClass]=\"childTemplate.status\">{{ childTemplate.status | titlecase }}</div>\r\n                                  </td>\r\n                                  <td (click)=\"$event.stopPropagation();\">\r\n                                    <div class=\"dropdown\">\r\n                                      <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                                        <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                                      </button>\r\n                                      <ul class=\"dropdown-menu\">\r\n                                        <li><a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(childTemplate)\">Edit</a></li>\r\n                                        <li>\r\n                                          <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(childTemplate._id!)\">\r\n                                            Duplicate\r\n                                          </a>\r\n                                        </li>\r\n                                        <li>\r\n                                          <a\r\n                                            class=\"dropdown-item cursor-pointer\"\r\n                                            [routerLink]=\"['/manage/planogram/findAndReplace']\"\r\n                                            [queryParams]=\"{ selectedFixture: childTemplate._id }\"\r\n                                          >\r\n                                            Find and replace\r\n                                          </a>\r\n                                        </li>\r\n                                        <li>\r\n                                          <a\r\n                                            class=\"dropdown-item cursor-pointer text-danger\"\r\n                                            (click)=\"onDelete(childTemplate._id!, childTemplate.storeCount, template.id, i)\"\r\n                                          >\r\n                                            Delete\r\n                                          </a>\r\n                                        </li>\r\n                                      </ul>\r\n                                    </div>\r\n                                  </td>\r\n                                </tr>\r\n                              </tbody>\r\n                            </table>\r\n                            <lib-pagination\r\n                              *ngIf=\"fixtureTemplateChildList.length\"\r\n                              [itemsPerPage]=\"childLimit\"\r\n                              [currentPage]=\"childOffset\"\r\n                              [totalItems]=\"childTotalItems\"\r\n                              [paginationSizes]=\"childPaginationSizes\"\r\n                              [pageSize]=\"childPaginationSize()\"\r\n                              (pageChange)=\"onChildPageChange($event, template.id, i)\"\r\n                              (pageSizeChange)=\"onChildPageSizeChange($event, template.id, i)\"\r\n                            >\r\n                            </lib-pagination>\r\n                          </div>\r\n                        </ng-template>\r\n                      </td>\r\n                    </tr>\r\n                  </tbody>\r\n                </table>\r\n              </div>\r\n            </section>\r\n      \r\n      \r\n            <!-- Fixture Template grid view -->\r\n            <section id=\"grid-view\" *ngIf=\"viewMode === 'grid'\" class=\"table-responsive\">\r\n              <div class=\"row gx-6 gy-4 m-0\">\r\n                <div class=\"col-md-4\" *ngFor=\"let template of fixtureTemplatesList\">\r\n                  <div class=\"card\" (click)=\"onClickCard($event, template)\">\r\n                    <div class=\"card-img\">\r\n                      <div class=\"card-action dropdown\" (click)=\"$event.stopPropagation()\">\r\n                        <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                          <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                        </button>\r\n                        <ul class=\"dropdown-menu\">\r\n                          <!-- <li>\r\n                            <a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(template.id!); $event.stopPropagation()\">\r\n                              Create Variant\r\n                            </a>\r\n                          </li> -->\r\n                          <!-- <li>\r\n                              <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(template.id!); $event.stopPropagation()\">\r\n                                Duplicate\r\n                              </a>\r\n                            </li> -->\r\n                          <!-- <li>\r\n                              <a\r\n                                class=\"dropdown-item cursor-pointer text-danger\"\r\n                                (click)=\"onDelete(template.id!, template.storeCount); $event.stopPropagation()\"\r\n                              >\r\n                                Delete\r\n                              </a>\r\n                            </li> -->\r\n                        </ul>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                      <h3>\r\n                        {{ template.name }}\r\n                      </h3>\r\n                      <div class=\"badge\" [ngClass]=\"template.status\">{{ template.status | titlecase }}</div>\r\n                    </div>\r\n                    <div class=\"d-flex flex-wrap mt-1\">\r\n                      <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                        @for (b of template.brands; track $index;let last = $last) {\r\n                        <div class=\"badge inactive me-2 mb-2\">\r\n                          <span *ngIf=\"$index <= 2\"> {{ b }} </span>\r\n                          <span *ngIf=\"$index === 3\"> + {{ template.brands.length - 3 }} </span>\r\n                        </div>\r\n                        <span *ngIf=\"$index < 2 && !last\" class=\"me-2 card-tagline\">&#8226;</span>\r\n                        }\r\n                      </div>\r\n      \r\n                      <ng-template #brandTooltip>\r\n                        <p>\r\n                          <b>Brands: </b>\r\n                          <ng-container *ngFor=\"let b of template.brands; let last = last\">\r\n                            {{ b }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </p>\r\n                      </ng-template>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n      \r\n            <!-- Fixture Template tree view -->\r\n            <section id=\"tree-view\" *ngIf=\"viewMode === 'tree'\">\r\n              <fixture-template-tree [clientId]=\"clientId\" [viewMode]=\"'group'\"></fixture-template-tree>\r\n            </section>\r\n      \r\n            <!-- Pagination -->\r\n            <lib-pagination\r\n              *ngIf=\"viewMode !== 'tree'\"\r\n              [itemsPerPage]=\"limit\"\r\n              [currentPage]=\"offset\"\r\n              [totalItems]=\"totalItems\"\r\n              [paginationSizes]=\"paginationSizes\"\r\n              [pageSize]=\"paginationSize()\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\"\r\n            >\r\n            </lib-pagination>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div [ngClass]=\"{'d-none':!fixtureTemplateInfo}\" class=\"col bg-white rounded p-3 fixture-overview card col-height\" style=\"overflow-y:auto\">\r\n          <lib-template-details [fixtureTemplateDetails]=\"fixtureTemplateInfo\" [vmList]=\"vmList\" (onClose)=\"onClickClose()\" [vmList]=\"vmList\"></lib-template-details>\r\n      </div>\r\n   </div>\r\n</section>\r\n\r\n<!-- Find and Replace Content (email-gated; tab hidden unless frAllowed, panel on deep-link) -->\r\n<div *ngIf=\"activeTab === 'find-replace'\">\r\n  <lib-find-replace-table *ngIf=\"frAllowed\"></lib-find-replace-table>\r\n  <lib-access-denied\r\n    *ngIf=\"frAccessChecked && !frAllowed\"\r\n    [feature]=\"'Find and Replace'\"\r\n  ></lib-access-denied>\r\n</div>\r\n\r\n<ng-template #verticalDots>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n    <path\r\n      d=\"M1 8.99998C1 9.52925 1.44771 9.95831 2 9.95831C2.55228 9.95831 3 9.52925 3 8.99998C3 8.47071 2.55228 8.04165 2 8.04165C1.44771 8.04165 1 8.47071 1 8.99998Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M0.999999 15.7083C0.999999 16.2376 1.44771 16.6666 2 16.6666C2.55228 16.6666 3 16.2376 3 15.7083C3 15.179 2.55228 14.75 2 14.75C1.44771 14.75 0.999999 15.179 0.999999 15.7083Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M1 2.29165C1 2.82092 1.44772 3.24998 2 3.24998C2.55228 3.24998 3 2.82092 3 2.29165C3 1.76237 2.55228 1.33331 2 1.33331C1.44772 1.33331 1 1.76237 1 2.29165Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</ng-template>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.round-badge{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;border-radius:12px;background:var(--Gray-100, #F2F4F7)}.fixture-overview{max-width:530px;overflow-y:auto}.template-name-ellipsis{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-height{flex:1;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: TemplateTreeComponent, selector: "fixture-template-tree", inputs: ["viewMode", "clientId", "masterFixtureData", "allFixture"] }, { kind: "component", type: FindReplaceTableComponent, selector: "lib-find-replace-table" }, { kind: "component", type: TemplateDetailsComponent, selector: "lib-template-details", inputs: ["fixtureTemplateDetails", "vmList"], outputs: ["onClose"] }, { kind: "component", type: AccessDeniedComponent, selector: "lib-access-denied", inputs: ["feature"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixtureTemplateTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-fixture-template-table", template: "<!-- Tabs Navigation -->\r\n<div class=\"d-flex justify-content-start mb-4\">\r\n  <ul class=\"nav nav-line-tabs nav-line-tabs-2x\">\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [routerLink]=\"[]\"\r\n        [queryParams]=\"{ tab: 'all-templates' }\"\r\n        [queryParamsHandling]=\"'merge'\"\r\n        [class.active]=\"activeTab === 'all-templates'\"\r\n        (click)=\"onTabChange('all-templates')\"\r\n      >\r\n        All Templates\r\n      </a>\r\n    </li>\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [routerLink]=\"[]\"\r\n        [queryParams]=\"{ tab: 'find-replace' }\"\r\n        [queryParamsHandling]=\"'merge'\"\r\n        [class.active]=\"activeTab === 'find-replace'\"\r\n        (click)=\"onTabChange('find-replace')\"\r\n      >\r\n        Find and Replace\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</div>\r\n\r\n<!-- All Templates Content -->\r\n<section id=\"fixtureTemplate\" class=\"template-wrapper\" [ngStyle]=\"{'height': fixtureTemplateInfo ? '75vh' : ''}\" *ngIf=\"activeTab === 'all-templates'\">\r\n  <!-- Template view header -->\r\n   <div class=\"row h-100 mx-0 my-5 gap-2\">\r\n      <div class=\"col-height card p-5\" [ngClass]=\"fixtureTemplateInfo ? 'col-md-8' : 'col-md-12'\" [ngStyle]=\"{'overflow-y':fixtureTemplateInfo ? 'auto' : ''}\">\r\n        <div\r\n          *ngIf=\"fixtureTemplatesList.length !== 0 || searchTerm || isFilterApplied\"\r\n          class=\"d-flex justify-content-between align-items-center mb-5\"\r\n        >\r\n          <div>\r\n            <h4>All Fixture Templates</h4>\r\n            <span>{{ totalItems }} - Total Templates</span>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n            <div style=\"position: relative\" [ngClass]=\"{ 'd-none': viewMode === 'tree' }\">\r\n              <input\r\n                type=\"text\"\r\n                [(ngModel)]=\"searchTerm\"\r\n                (change)=\"onSearch()\"\r\n                style=\"padding-left: 3rem; padding-right: 3rem\"\r\n                class=\"form-control\"\r\n                name=\"search\"\r\n                autocomplete=\"off\"\r\n                placeholder=\"Search\"\r\n              />\r\n      \r\n              <span class=\"search-icon\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                  <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n                  <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n                </svg>\r\n              </span>\r\n      \r\n              <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n                <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n                  <g id=\"SVGRepo_iconCarrier\">\r\n                    <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                    <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                    <circle\r\n                      cx=\"12\"\r\n                      cy=\"12\"\r\n                      r=\"9\"\r\n                      stroke=\"#667085\"\r\n                      stroke-width=\"2\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    ></circle>\r\n                  </g>\r\n                </svg>\r\n              </button>\r\n            </div>\r\n      \r\n            <!-- <button\r\n              type=\"button\"\r\n              [disabled]=\"fixtureTemplatesList.length <= 0\"\r\n              (click)=\"redirectToreplace()\"\r\n              class=\"btn btn-outline text-nowrap\"\r\n            >\r\n              <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M17.6094 17.5L13.9844 13.875M15.9427 9.16667C15.9427 12.8486 12.9579 15.8333 9.27604 15.8333C5.59414 15.8333 2.60938 12.8486 2.60938 9.16667C2.60938 5.48477 5.59414 2.5 9.27604 2.5C12.9579 2.5 15.9427 5.48477 15.9427 9.16667Z\"\r\n                  stroke=\"#344054\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Find & Replace\r\n            </button> -->\r\n      \r\n            <lib-filters\r\n              [ngClass]=\"{ 'd-none': viewMode === 'tree' }\"\r\n              [dataObject]=\"filterObject\"\r\n              (appliedFilters)=\"applyFilters($event)\"\r\n            ></lib-filters>\r\n      \r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <div class=\"toggle-button me-1\" [ngClass]=\"{ selected: viewMode === 'list' }\" (click)=\"toggleViewMode('list')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M6.24078 4.54639H15.8906M6.24078 9.00017H15.8906M6.24078 13.4539H15.8906M2.5293 4.54639H2.53672M2.5293 9.00017H2.53672M2.5293 13.4539H2.53672\"\r\n                    [attr.stroke]=\"viewMode === 'list' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n      \r\n              <!-- <div class=\"toggle-button me-1\" [ngClass]=\"{ selected: viewMode === 'grid' }\" (click)=\"toggleViewMode('grid')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M7.91886 2.31934H2.72278V7.51541H7.91886V2.31934Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M16.0841 2.31934H10.888V7.51541H16.0841V2.31934Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M16.0841 10.4846H10.888V15.6807H16.0841V10.4846Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M7.91886 10.4846H2.72278V15.6807H7.91886V10.4846Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div> -->\r\n      \r\n              <div class=\"toggle-button\" [ngClass]=\"{ selected: viewMode === 'tree' }\" (click)=\"toggleViewMode('tree')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M9.92678 10.4845C7.43266 10.4845 6.61613 11.4866 6.3489 12.1472C7.14316 12.4887 7.69988 13.2755 7.69988 14.196C7.69988 14.7866 7.46527 15.353 7.04764 15.7706C6.63002 16.1882 6.0636 16.4228 5.47299 16.4228C4.88239 16.4228 4.31597 16.1882 3.89834 15.7706C3.48072 15.353 3.2461 14.7866 3.2461 14.196C3.2461 13.2235 3.86221 12.3996 4.7307 12.0953V5.9045C4.29573 5.75187 3.91908 5.4676 3.65304 5.09115C3.387 4.7147 3.24477 4.26476 3.2461 3.8038C3.2461 3.21319 3.48072 2.64677 3.89834 2.22915C4.31597 1.81152 4.88239 1.5769 5.47299 1.5769C6.0636 1.5769 6.63002 1.81152 7.04764 2.22915C7.46527 2.64677 7.69988 3.21319 7.69988 3.8038C7.69988 4.7762 7.08378 5.60015 6.21529 5.9045V9.83125C6.86851 9.34875 7.81865 8.99987 9.18448 8.99987C11.1664 8.99987 11.8271 8.0052 12.0423 7.34455C11.6362 7.17537 11.2892 6.88992 11.0449 6.52407C10.8005 6.15823 10.6698 5.72832 10.6691 5.28839C10.6691 4.69778 10.9037 4.13136 11.3213 3.71374C11.7389 3.29612 12.3054 3.0615 12.896 3.0615C13.4866 3.0615 14.053 3.29612 14.4706 3.71374C14.8882 4.13136 15.1229 4.69778 15.1229 5.28839C15.1229 6.28307 14.4696 7.14413 13.5715 7.41136C13.3785 8.47284 12.6584 10.4845 9.92678 10.4845ZM5.47299 13.4537C5.27612 13.4537 5.08732 13.5319 4.94811 13.6711C4.8089 13.8103 4.7307 13.9991 4.7307 14.196C4.7307 14.3928 4.8089 14.5816 4.94811 14.7208C5.08732 14.86 5.27612 14.9383 5.47299 14.9383C5.66986 14.9383 5.85867 14.86 5.99788 14.7208C6.13708 14.5816 6.21529 14.3928 6.21529 14.196C6.21529 13.9991 6.13708 13.8103 5.99788 13.6711C5.85867 13.5319 5.66986 13.4537 5.47299 13.4537ZM5.47299 3.0615C5.27612 3.0615 5.08732 3.1397 4.94811 3.27891C4.8089 3.41812 4.7307 3.60693 4.7307 3.8038C4.7307 4.00066 4.8089 4.18947 4.94811 4.32868C5.08732 4.46789 5.27612 4.54609 5.47299 4.54609C5.66986 4.54609 5.85867 4.46789 5.99788 4.32868C6.13708 4.18947 6.21529 4.00066 6.21529 3.8038C6.21529 3.60693 6.13708 3.41812 5.99788 3.27891C5.85867 3.1397 5.66986 3.0615 5.47299 3.0615ZM12.896 4.54609C12.6991 4.54609 12.5103 4.6243 12.3711 4.76351C12.2319 4.90271 12.1537 5.09152 12.1537 5.28839C12.1537 5.48526 12.2319 5.67406 12.3711 5.81327C12.5103 5.95248 12.6991 6.03069 12.896 6.03069C13.0928 6.03069 13.2816 5.95248 13.4208 5.81327C13.5601 5.67406 13.6383 5.48526 13.6383 5.28839C13.6383 5.09152 13.5601 4.90271 13.4208 4.76351C13.2816 4.6243 13.0928 4.54609 12.896 4.54609Z\"\r\n                    fill=\"#344054\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      \r\n        <div *ngIf=\"isPageLoading; else contentPart\">\r\n          <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      \r\n        <ng-template #contentPart>\r\n          <div *ngIf=\"!fixtureTemplatesList.length\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-12 my-6\">\r\n                <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                  <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n                  <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                  <div class=\"nodatasubtext\">There is no result for template</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n      \r\n          <div *ngIf=\"fixtureTemplatesList.length !== 0\">\r\n            <!-- Fixture Template list view -->\r\n            <section id=\"list-view\" *ngIf=\"viewMode === 'list'\">\r\n              <div class=\"table-responsive\">\r\n                <table class=\"w-100 table bottom-border text-nowrap\">\r\n                  <thead>\r\n                    <tr>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureName')\" class=\"cursor-pointer\">\r\n                          Master Template\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureName' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureCategory')\" class=\"cursor-pointer\">\r\n                          Fixture type\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureCategory' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureWidth')\" class=\"cursor-pointer\">\r\n                          Size width (ft)\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureWidth' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureWidth' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('productBrandName')\" class=\"cursor-pointer\">\r\n                          Brand\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'productBrandName' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'productBrandName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('productCategory')\" class=\"cursor-pointer\">\r\n                          Product category\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'productCategory' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'productCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('childCount')\" class=\"cursor-pointer\">\r\n                          Variant\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'childCount' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'childCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>Action</th>\r\n                    </tr>\r\n                  </thead>\r\n                  <tbody *ngFor=\"let template of fixtureTemplatesList; let i = index\">\r\n                    <tr [ngStyle]=\"{'background-color': template.templateDetails ? '#f6fcff' :  ''}\" (click)=\"enableRow(i)\" class=\"cursor-pointer\">\r\n                      <td style=\"max-width: 300px\">\r\n                        <div class=\"d-flex align-items-center w-100\">\r\n                          <!-- <div class=\"thumbnail\"></div> -->\r\n                          <div\r\n                            class=\"cursor-pointer\"\r\n                            (click)=\"\r\n                              template['open'] = !template['open']; template['loading'] = false; reset();$event.stopPropagation(); getVariantList(template, i);\r\n                            \"\r\n                          >\r\n                            <span class=\"round-badge me-3\">\r\n                              @if(!template.open) {\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M6 12L10 8L6 4\"\r\n                                  stroke=\"#344054\"\r\n                                  stroke-width=\"1.33333\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                              }@else {\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M4 6L8 10L12 6\"\r\n                                  stroke=\"#344054\"\r\n                                  stroke-width=\"1.33333\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                              }\r\n                            </span>\r\n                          </div>\r\n                          <!-- <a\r\n                            [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                            [queryParams]=\"{ templateId: template.id, isEdit: false }\"\r\n                            class=\"text-decoration-underline ellipsis\"\r\n                            [ngbTooltip]=\"template.name\"\r\n                          > -->\r\n                            <span class=\"template-name-ellipsis\" [ngbTooltip]=\"template.name\">\r\n                              {{ template.name }}\r\n                            </span>\r\n                          <!-- </a> -->\r\n                        </div>\r\n                      </td>\r\n                      <td>{{ template.type }}</td>\r\n                      <td>{{ template.size }}</td>\r\n                      <td *ngIf=\"!hideBrand\">\r\n                        <span *ngIf=\"template.brands.length <= 0\"> - </span>\r\n      \r\n                        <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                          <div *ngFor=\"let b of template.brands; let i = index\" class=\"badge inactive me-2\">\r\n                            <span *ngIf=\"i <= 2\"> {{ b }} </span>\r\n                            <span *ngIf=\"i === 3\"> +{{ template.brands.length - 3 }} </span>\r\n                          </div>\r\n                        </div>\r\n      \r\n                        <ng-template #brandTooltip>\r\n                          <ng-container *ngFor=\"let c of template.brands; let last = last\">\r\n                            {{ c }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </ng-template>\r\n                      </td>\r\n                      <td *ngIf=\"!hideBrand\">\r\n                        <span *ngIf=\"template.categories.length <= 0\"> - </span>\r\n      \r\n                        <div [ngbTooltip]=\"categoryTooltip\" class=\"cursor-pointer\">\r\n                          <div *ngFor=\"let item of template.categories; let i = index\" class=\"badge inactive me-2\">\r\n                            <span *ngIf=\"i <= 2\"> {{ item }} </span>\r\n                            <span *ngIf=\"i === 3\"> +{{ template.categories.length - 3 }} </span>\r\n                          </div>\r\n                        </div>\r\n      \r\n                        <ng-template #categoryTooltip>\r\n                          <ng-container *ngFor=\"let c of template.categories; let last = last\">\r\n                            {{ c }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </ng-template>\r\n                      </td>\r\n                      <td class=\"text-center\" *ngIf=\"!hideBrand\">\r\n                        <span class=\"cursor-pointer\">\r\n                          {{ template.childCount }}\r\n                        </span>\r\n                      </td>\r\n                      <td (click)=\"$event.stopPropagation();\">\r\n                        <div class=\"d-flex\">\r\n                          <div class=\"cursor-pointer\">\r\n                              <a\r\n                              [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                              [queryParams]=\"{ templateId: template.id, isEdit: false }\"\r\n                              class=\"text-decoration-underline ellipsis\"\r\n                              [ngbTooltip]=\"template.name\"\r\n                            >\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_69_46439)\">\r\n                                <path d=\"M19.166 10.0003C19.166 10.0003 15.8327 16.667 9.99935 16.667C4.16602 16.667 0.832683 10.0003 0.832683 10.0003C0.832683 10.0003 4.16602 3.33366 9.99935 3.33366C15.8327 3.33366 19.166 10.0003 19.166 10.0003Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                <path d=\"M9.99935 7.50033C8.61864 7.50033 7.49935 8.61961 7.49935 10.0003C7.49935 11.381 8.61864 12.5003 9.99935 12.5003C11.3801 12.5003 12.4994 11.381 12.4994 10.0003C12.4994 8.61961 11.3801 7.50033 9.99935 7.50033Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_69_46439\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(20 20) rotate(-180)\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                              </svg>\r\n                            </a>\r\n                          </div>\r\n                          <div class=\"cursor-pointer ps-3\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" (click)=\"onDuplicate(template.id!, i, 'master')\">\r\n                              <path d=\"M15.834 10.0003L4.16732 10.0003M10.0007 4.16699V15.8337\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                          </div>\r\n      \r\n                        </div>\r\n                        <!-- <div class=\"dropdown\">\r\n                          <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                            <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                          </button>\r\n                          <ul class=\"dropdown-menu\">\r\n                            <li>\r\n                              <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(template.id!, i, 'master')\">\r\n                                Create Variant\r\n                              </a>\r\n                            </li>\r\n                          </ul>\r\n                        </div> -->\r\n                      </td>\r\n                    </tr>\r\n                    <tr *ngIf=\"template.open\">\r\n                      <td colspan=\"7\">\r\n                        <div *ngIf=\"template.loading; else childcontentPart\">\r\n                          <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                            <div class=\"shimmer\">\r\n                              <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                              </div>\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                        <ng-template #childcontentPart>\r\n                          <div class=\"card\">\r\n                            <div *ngIf=\"!fixtureTemplateChildList.length\">\r\n                              <div class=\"row\">\r\n                                <div class=\"col-lg-12\">\r\n                                  <table class=\"w-100 table bottom-border text-nowrap\">\r\n                                    <tr>\r\n                                      <th>Variant</th>\r\n                                      <th>Assigned stores</th>\r\n                                      <th *ngIf=\"!hideBrand\">Brand</th>\r\n                                      <th *ngIf=\"!hideBrand\">Product category</th>\r\n                                      <th>Status</th>\r\n                                      <th>Action</th>\r\n                                    </tr>\r\n                                    <tr>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                    </tr>\r\n                                  </table>\r\n                                  <!-- <div class=\"card-body d-flex justify-content-center align-items-center flex-column\"> \r\n                                    <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n                                    <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                                    <div class=\"nodatasubtext\">There is no result for variants</div>\r\n                                  </div> -->\r\n                                </div>\r\n                              </div>\r\n                            </div>\r\n                            <table class=\"w-100 table bottom-border text-nowrap\" *ngIf=\"fixtureTemplateChildList.length\">\r\n                              <thead>\r\n                                <tr>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('fixtureName', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Variant\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'fixtureName' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'fixtureName' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('storeCount', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Assigned Stores\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'storeCount' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'storeCount' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th *ngIf=\"!hideBrand\">\r\n                                    <span (click)=\"onChildSortTable('productBrandName', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Brand\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'productBrandName' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'productBrandName'\r\n                                            ? 'fa-arrow-up'\r\n                                            : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th *ngIf=\"!hideBrand\">\r\n                                    <span (click)=\"onChildSortTable('productCategory', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Product category\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'productCategory' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'productCategory'\r\n                                            ? 'fa-arrow-up'\r\n                                            : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('status', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Status\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'status' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'status' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>Action</th>\r\n                                </tr>\r\n                              </thead>\r\n                              <tbody>\r\n                                <tr *ngFor=\"let childTemplate of fixtureTemplateChildList;let j=index\" (click)=\"enableRow(i,j,'child')\" [ngStyle]=\"{'background-color': childTemplate.templateDetails ? '#f6fcff' :  ''}\" class=\"cursor-pointer\">\r\n                                  <td style=\"max-width: 300px\">\r\n                                    <div class=\"d-flex align-items-center w-100\">\r\n                                      <!-- <div class=\"thumbnail\"></div> -->\r\n                                      <!-- <a\r\n                                        [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                                        [queryParams]=\"{ templateId: childTemplate._id, isEdit: false }\"\r\n                                        class=\"text-decoration-underline ellipsis\"\r\n                                        [ngbTooltip]=\"childTemplate.fixtureName\"\r\n                                      > -->\r\n                                        <span class=\"template-name-ellipsis\" [ngbTooltip]=\"childTemplate.fixtureName\">\r\n                                          {{ childTemplate.fixtureName }}\r\n                                        </span>\r\n                                      <!-- </a> -->\r\n                                    </div>\r\n                                  </td>\r\n                                  <td>\r\n                                    <div>\r\n                                      <a\r\n                                        [routerLink]=\"['/manage/planogram/fixture-template/assign-stores']\"\r\n                                        [queryParams]=\"{ templateId: childTemplate._id, isEdit: false }\"\r\n                                        class=\"text-decoration-underline\"\r\n                                        [ngbTooltip]=\"storeTooltip\"\r\n                                      >\r\n                                        {{ childTemplate.storeCount }}\r\n                                      </a>\r\n                                    </div>\r\n                                    <ng-template #storeTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.storeList; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td *ngIf=\"!hideBrand\">\r\n                                    <span *ngIf=\"childTemplate.productBrandName.length <= 0\"> - </span>\r\n      \r\n                                    <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                                      <div *ngFor=\"let b of childTemplate.productBrandName; let i = index\" class=\"badge inactive me-2\">\r\n                                        <span *ngIf=\"i <= 2\"> {{ b }} </span>\r\n                                        <span *ngIf=\"i === 3\"> +{{ childTemplate.productBrandName.length - 3 }} </span>\r\n                                      </div>\r\n                                    </div>\r\n      \r\n                                    <ng-template #brandTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.productBrandName; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td *ngIf=\"!hideBrand\">\r\n                                    <span *ngIf=\"childTemplate.productCategory.length <= 0\"> - </span>\r\n      \r\n                                    <div [ngbTooltip]=\"categoryTooltip\" class=\"cursor-pointer\">\r\n                                      <div\r\n                                        *ngFor=\"let item of childTemplate.productCategory; let i = index\"\r\n                                        class=\"badge inactive me-2\"\r\n                                      >\r\n                                        <span *ngIf=\"i <= 2\"> {{ item }} </span>\r\n                                        <span *ngIf=\"i === 3\"> +{{ childTemplate.productCategory.length - 3 }} </span>\r\n                                      </div>\r\n                                    </div>\r\n      \r\n                                    <ng-template #categoryTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.productCategory; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td>\r\n                                    <div class=\"badge\" [ngClass]=\"childTemplate.status\">{{ childTemplate.status | titlecase }}</div>\r\n                                  </td>\r\n                                  <td (click)=\"$event.stopPropagation();\">\r\n                                    <div class=\"dropdown\">\r\n                                      <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                                        <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                                      </button>\r\n                                      <ul class=\"dropdown-menu\">\r\n                                        <li><a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(childTemplate)\">Edit</a></li>\r\n                                        <li>\r\n                                          <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(childTemplate._id!)\">\r\n                                            Duplicate\r\n                                          </a>\r\n                                        </li>\r\n                                        <li>\r\n                                          <a\r\n                                            class=\"dropdown-item cursor-pointer\"\r\n                                            [routerLink]=\"['/manage/planogram/findAndReplace']\"\r\n                                            [queryParams]=\"{ selectedFixture: childTemplate._id }\"\r\n                                          >\r\n                                            Find and replace\r\n                                          </a>\r\n                                        </li>\r\n                                        <li>\r\n                                          <a\r\n                                            class=\"dropdown-item cursor-pointer text-danger\"\r\n                                            (click)=\"onDelete(childTemplate._id!, childTemplate.storeCount, template.id, i)\"\r\n                                          >\r\n                                            Delete\r\n                                          </a>\r\n                                        </li>\r\n                                      </ul>\r\n                                    </div>\r\n                                  </td>\r\n                                </tr>\r\n                              </tbody>\r\n                            </table>\r\n                            <lib-pagination\r\n                              *ngIf=\"fixtureTemplateChildList.length\"\r\n                              [itemsPerPage]=\"childLimit\"\r\n                              [currentPage]=\"childOffset\"\r\n                              [totalItems]=\"childTotalItems\"\r\n                              [paginationSizes]=\"childPaginationSizes\"\r\n                              [pageSize]=\"childPaginationSize()\"\r\n                              (pageChange)=\"onChildPageChange($event, template.id, i)\"\r\n                              (pageSizeChange)=\"onChildPageSizeChange($event, template.id, i)\"\r\n                            >\r\n                            </lib-pagination>\r\n                          </div>\r\n                        </ng-template>\r\n                      </td>\r\n                    </tr>\r\n                  </tbody>\r\n                </table>\r\n              </div>\r\n            </section>\r\n      \r\n      \r\n            <!-- Fixture Template grid view -->\r\n            <section id=\"grid-view\" *ngIf=\"viewMode === 'grid'\" class=\"table-responsive\">\r\n              <div class=\"row gx-6 gy-4 m-0\">\r\n                <div class=\"col-md-4\" *ngFor=\"let template of fixtureTemplatesList\">\r\n                  <div class=\"card\" (click)=\"onClickCard($event, template)\">\r\n                    <div class=\"card-img\">\r\n                      <div class=\"card-action dropdown\" (click)=\"$event.stopPropagation()\">\r\n                        <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                          <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                        </button>\r\n                        <ul class=\"dropdown-menu\">\r\n                          <!-- <li>\r\n                            <a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(template.id!); $event.stopPropagation()\">\r\n                              Create Variant\r\n                            </a>\r\n                          </li> -->\r\n                          <!-- <li>\r\n                              <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(template.id!); $event.stopPropagation()\">\r\n                                Duplicate\r\n                              </a>\r\n                            </li> -->\r\n                          <!-- <li>\r\n                              <a\r\n                                class=\"dropdown-item cursor-pointer text-danger\"\r\n                                (click)=\"onDelete(template.id!, template.storeCount); $event.stopPropagation()\"\r\n                              >\r\n                                Delete\r\n                              </a>\r\n                            </li> -->\r\n                        </ul>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                      <h3>\r\n                        {{ template.name }}\r\n                      </h3>\r\n                      <div class=\"badge\" [ngClass]=\"template.status\">{{ template.status | titlecase }}</div>\r\n                    </div>\r\n                    <div class=\"d-flex flex-wrap mt-1\">\r\n                      <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                        @for (b of template.brands; track $index;let last = $last) {\r\n                        <div class=\"badge inactive me-2 mb-2\">\r\n                          <span *ngIf=\"$index <= 2\"> {{ b }} </span>\r\n                          <span *ngIf=\"$index === 3\"> + {{ template.brands.length - 3 }} </span>\r\n                        </div>\r\n                        <span *ngIf=\"$index < 2 && !last\" class=\"me-2 card-tagline\">&#8226;</span>\r\n                        }\r\n                      </div>\r\n      \r\n                      <ng-template #brandTooltip>\r\n                        <p>\r\n                          <b>Brands: </b>\r\n                          <ng-container *ngFor=\"let b of template.brands; let last = last\">\r\n                            {{ b }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </p>\r\n                      </ng-template>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n      \r\n            <!-- Fixture Template tree view -->\r\n            <section id=\"tree-view\" *ngIf=\"viewMode === 'tree'\">\r\n              <fixture-template-tree [clientId]=\"clientId\" [viewMode]=\"'group'\"></fixture-template-tree>\r\n            </section>\r\n      \r\n            <!-- Pagination -->\r\n            <lib-pagination\r\n              *ngIf=\"viewMode !== 'tree'\"\r\n              [itemsPerPage]=\"limit\"\r\n              [currentPage]=\"offset\"\r\n              [totalItems]=\"totalItems\"\r\n              [paginationSizes]=\"paginationSizes\"\r\n              [pageSize]=\"paginationSize()\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\"\r\n            >\r\n            </lib-pagination>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div [ngClass]=\"{'d-none':!fixtureTemplateInfo}\" class=\"col bg-white rounded p-3 fixture-overview card col-height\" style=\"overflow-y:auto\">\r\n          <lib-template-details [fixtureTemplateDetails]=\"fixtureTemplateInfo\" [vmList]=\"vmList\" (onClose)=\"onClickClose()\" [vmList]=\"vmList\"></lib-template-details>\r\n      </div>\r\n   </div>\r\n</section>\r\n\r\n<!-- Find and Replace Content -->\r\n<div *ngIf=\"activeTab === 'find-replace'\">\r\n  <lib-find-replace-table></lib-find-replace-table>\r\n</div>\r\n\r\n<ng-template #verticalDots>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n    <path\r\n      d=\"M1 8.99998C1 9.52925 1.44771 9.95831 2 9.95831C2.55228 9.95831 3 9.52925 3 8.99998C3 8.47071 2.55228 8.04165 2 8.04165C1.44771 8.04165 1 8.47071 1 8.99998Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M0.999999 15.7083C0.999999 16.2376 1.44771 16.6666 2 16.6666C2.55228 16.6666 3 16.2376 3 15.7083C3 15.179 2.55228 14.75 2 14.75C1.44771 14.75 0.999999 15.179 0.999999 15.7083Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M1 2.29165C1 2.82092 1.44772 3.24998 2 3.24998C2.55228 3.24998 3 2.82092 3 2.29165C3 1.76237 2.55228 1.33331 2 1.33331C1.44772 1.33331 1 1.76237 1 2.29165Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</ng-template>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.round-badge{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;border-radius:12px;background:var(--Gray-100, #F2F4F7)}.fixture-overview{max-width:530px;overflow-y:auto}.template-name-ellipsis{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-height{flex:1;height:100%}\n"] }]
+            args: [{ selector: "lib-fixture-template-table", template: "<!-- Tabs Navigation -->\r\n<div class=\"d-flex justify-content-start mb-4\">\r\n  <ul class=\"nav nav-line-tabs nav-line-tabs-2x\">\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [routerLink]=\"[]\"\r\n        [queryParams]=\"{ tab: 'all-templates' }\"\r\n        [queryParamsHandling]=\"'merge'\"\r\n        [class.active]=\"activeTab === 'all-templates'\"\r\n        (click)=\"onTabChange('all-templates')\"\r\n      >\r\n        All Templates\r\n      </a>\r\n    </li>\r\n    <li class=\"nav-item\">\r\n      <a\r\n        class=\"nav-link\"\r\n        [routerLink]=\"[]\"\r\n        [queryParams]=\"{ tab: 'find-replace' }\"\r\n        [queryParamsHandling]=\"'merge'\"\r\n        [class.active]=\"activeTab === 'find-replace'\"\r\n        (click)=\"onTabChange('find-replace')\"\r\n      >\r\n        Find and Replace\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</div>\r\n\r\n<!-- All Templates Content -->\r\n<section id=\"fixtureTemplate\" class=\"template-wrapper\" [ngStyle]=\"{'height': fixtureTemplateInfo ? '75vh' : ''}\" *ngIf=\"activeTab === 'all-templates'\">\r\n  <!-- Template view header -->\r\n   <div class=\"row h-100 mx-0 my-5 gap-2\">\r\n      <div class=\"col-height card p-5\" [ngClass]=\"fixtureTemplateInfo ? 'col-md-8' : 'col-md-12'\" [ngStyle]=\"{'overflow-y':fixtureTemplateInfo ? 'auto' : ''}\">\r\n        <div\r\n          *ngIf=\"fixtureTemplatesList.length !== 0 || searchTerm || isFilterApplied\"\r\n          class=\"d-flex justify-content-between align-items-center mb-5\"\r\n        >\r\n          <div>\r\n            <h4>All Fixture Templates</h4>\r\n            <span>{{ totalItems }} - Total Templates</span>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n            <div style=\"position: relative\" [ngClass]=\"{ 'd-none': viewMode === 'tree' }\">\r\n              <input\r\n                type=\"text\"\r\n                [(ngModel)]=\"searchTerm\"\r\n                (change)=\"onSearch()\"\r\n                style=\"padding-left: 3rem; padding-right: 3rem\"\r\n                class=\"form-control\"\r\n                name=\"search\"\r\n                autocomplete=\"off\"\r\n                placeholder=\"Search\"\r\n              />\r\n      \r\n              <span class=\"search-icon\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                  <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n                  <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n                </svg>\r\n              </span>\r\n      \r\n              <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n                <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n                  <g id=\"SVGRepo_iconCarrier\">\r\n                    <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                    <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n                    <circle\r\n                      cx=\"12\"\r\n                      cy=\"12\"\r\n                      r=\"9\"\r\n                      stroke=\"#667085\"\r\n                      stroke-width=\"2\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    ></circle>\r\n                  </g>\r\n                </svg>\r\n              </button>\r\n            </div>\r\n      \r\n            <!-- <button\r\n              type=\"button\"\r\n              [disabled]=\"fixtureTemplatesList.length <= 0\"\r\n              (click)=\"redirectToreplace()\"\r\n              class=\"btn btn-outline text-nowrap\"\r\n            >\r\n              <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M17.6094 17.5L13.9844 13.875M15.9427 9.16667C15.9427 12.8486 12.9579 15.8333 9.27604 15.8333C5.59414 15.8333 2.60938 12.8486 2.60938 9.16667C2.60938 5.48477 5.59414 2.5 9.27604 2.5C12.9579 2.5 15.9427 5.48477 15.9427 9.16667Z\"\r\n                  stroke=\"#344054\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Find & Replace\r\n            </button> -->\r\n      \r\n            <lib-filters\r\n              [ngClass]=\"{ 'd-none': viewMode === 'tree' }\"\r\n              [dataObject]=\"filterObject\"\r\n              (appliedFilters)=\"applyFilters($event)\"\r\n            ></lib-filters>\r\n      \r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <div class=\"toggle-button me-1\" [ngClass]=\"{ selected: viewMode === 'list' }\" (click)=\"toggleViewMode('list')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M6.24078 4.54639H15.8906M6.24078 9.00017H15.8906M6.24078 13.4539H15.8906M2.5293 4.54639H2.53672M2.5293 9.00017H2.53672M2.5293 13.4539H2.53672\"\r\n                    [attr.stroke]=\"viewMode === 'list' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n      \r\n              <!-- <div class=\"toggle-button me-1\" [ngClass]=\"{ selected: viewMode === 'grid' }\" (click)=\"toggleViewMode('grid')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M7.91886 2.31934H2.72278V7.51541H7.91886V2.31934Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M16.0841 2.31934H10.888V7.51541H16.0841V2.31934Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M16.0841 10.4846H10.888V15.6807H16.0841V10.4846Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M7.91886 10.4846H2.72278V15.6807H7.91886V10.4846Z\"\r\n                    [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n                    stroke-width=\"1.48756\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div> -->\r\n      \r\n              <div class=\"toggle-button\" [ngClass]=\"{ selected: viewMode === 'tree' }\" (click)=\"toggleViewMode('tree')\">\r\n                <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M9.92678 10.4845C7.43266 10.4845 6.61613 11.4866 6.3489 12.1472C7.14316 12.4887 7.69988 13.2755 7.69988 14.196C7.69988 14.7866 7.46527 15.353 7.04764 15.7706C6.63002 16.1882 6.0636 16.4228 5.47299 16.4228C4.88239 16.4228 4.31597 16.1882 3.89834 15.7706C3.48072 15.353 3.2461 14.7866 3.2461 14.196C3.2461 13.2235 3.86221 12.3996 4.7307 12.0953V5.9045C4.29573 5.75187 3.91908 5.4676 3.65304 5.09115C3.387 4.7147 3.24477 4.26476 3.2461 3.8038C3.2461 3.21319 3.48072 2.64677 3.89834 2.22915C4.31597 1.81152 4.88239 1.5769 5.47299 1.5769C6.0636 1.5769 6.63002 1.81152 7.04764 2.22915C7.46527 2.64677 7.69988 3.21319 7.69988 3.8038C7.69988 4.7762 7.08378 5.60015 6.21529 5.9045V9.83125C6.86851 9.34875 7.81865 8.99987 9.18448 8.99987C11.1664 8.99987 11.8271 8.0052 12.0423 7.34455C11.6362 7.17537 11.2892 6.88992 11.0449 6.52407C10.8005 6.15823 10.6698 5.72832 10.6691 5.28839C10.6691 4.69778 10.9037 4.13136 11.3213 3.71374C11.7389 3.29612 12.3054 3.0615 12.896 3.0615C13.4866 3.0615 14.053 3.29612 14.4706 3.71374C14.8882 4.13136 15.1229 4.69778 15.1229 5.28839C15.1229 6.28307 14.4696 7.14413 13.5715 7.41136C13.3785 8.47284 12.6584 10.4845 9.92678 10.4845ZM5.47299 13.4537C5.27612 13.4537 5.08732 13.5319 4.94811 13.6711C4.8089 13.8103 4.7307 13.9991 4.7307 14.196C4.7307 14.3928 4.8089 14.5816 4.94811 14.7208C5.08732 14.86 5.27612 14.9383 5.47299 14.9383C5.66986 14.9383 5.85867 14.86 5.99788 14.7208C6.13708 14.5816 6.21529 14.3928 6.21529 14.196C6.21529 13.9991 6.13708 13.8103 5.99788 13.6711C5.85867 13.5319 5.66986 13.4537 5.47299 13.4537ZM5.47299 3.0615C5.27612 3.0615 5.08732 3.1397 4.94811 3.27891C4.8089 3.41812 4.7307 3.60693 4.7307 3.8038C4.7307 4.00066 4.8089 4.18947 4.94811 4.32868C5.08732 4.46789 5.27612 4.54609 5.47299 4.54609C5.66986 4.54609 5.85867 4.46789 5.99788 4.32868C6.13708 4.18947 6.21529 4.00066 6.21529 3.8038C6.21529 3.60693 6.13708 3.41812 5.99788 3.27891C5.85867 3.1397 5.66986 3.0615 5.47299 3.0615ZM12.896 4.54609C12.6991 4.54609 12.5103 4.6243 12.3711 4.76351C12.2319 4.90271 12.1537 5.09152 12.1537 5.28839C12.1537 5.48526 12.2319 5.67406 12.3711 5.81327C12.5103 5.95248 12.6991 6.03069 12.896 6.03069C13.0928 6.03069 13.2816 5.95248 13.4208 5.81327C13.5601 5.67406 13.6383 5.48526 13.6383 5.28839C13.6383 5.09152 13.5601 4.90271 13.4208 4.76351C13.2816 4.6243 13.0928 4.54609 12.896 4.54609Z\"\r\n                    fill=\"#344054\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      \r\n        <div *ngIf=\"isPageLoading; else contentPart\">\r\n          <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      \r\n        <ng-template #contentPart>\r\n          <div *ngIf=\"!fixtureTemplatesList.length\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-12 my-6\">\r\n                <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                  <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n                  <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                  <div class=\"nodatasubtext\">There is no result for template</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n      \r\n          <div *ngIf=\"fixtureTemplatesList.length !== 0\">\r\n            <!-- Fixture Template list view -->\r\n            <section id=\"list-view\" *ngIf=\"viewMode === 'list'\">\r\n              <div class=\"table-responsive\">\r\n                <table class=\"w-100 table bottom-border text-nowrap\">\r\n                  <thead>\r\n                    <tr>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureName')\" class=\"cursor-pointer\">\r\n                          Master Template\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureName' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureCategory')\" class=\"cursor-pointer\">\r\n                          Fixture type\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureCategory' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>\r\n                        <span (click)=\"onSortTable('fixtureWidth')\" class=\"cursor-pointer\">\r\n                          Size width (ft)\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'fixtureWidth' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureWidth' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('productBrandName')\" class=\"cursor-pointer\">\r\n                          Brand\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'productBrandName' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'productBrandName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('productCategory')\" class=\"cursor-pointer\">\r\n                          Product category\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'productCategory' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'productCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th *ngIf=\"!hideBrand\">\r\n                        <span (click)=\"onSortTable('childCount')\" class=\"cursor-pointer\">\r\n                          Variant\r\n                          <i\r\n                            class=\"fa ms-1 mt-1\"\r\n                            [ngStyle]=\"{ color: sortedColumn === 'childCount' ? '#009BF3' : '' }\"\r\n                            [ngClass]=\"sortOrder === 1 && sortedColumn === 'childCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                            aria-hidden=\"true\"\r\n                          ></i>\r\n                        </span>\r\n                      </th>\r\n                      <th>Action</th>\r\n                    </tr>\r\n                  </thead>\r\n                  <tbody *ngFor=\"let template of fixtureTemplatesList; let i = index\">\r\n                    <tr [ngStyle]=\"{'background-color': template.templateDetails ? '#f6fcff' :  ''}\" (click)=\"enableRow(i)\" class=\"cursor-pointer\">\r\n                      <td style=\"max-width: 300px\">\r\n                        <div class=\"d-flex align-items-center w-100\">\r\n                          <!-- <div class=\"thumbnail\"></div> -->\r\n                          <div\r\n                            class=\"cursor-pointer\"\r\n                            (click)=\"\r\n                              template['open'] = !template['open']; template['loading'] = false; reset();$event.stopPropagation(); getVariantList(template, i);\r\n                            \"\r\n                          >\r\n                            <span class=\"round-badge me-3\">\r\n                              @if(!template.open) {\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M6 12L10 8L6 4\"\r\n                                  stroke=\"#344054\"\r\n                                  stroke-width=\"1.33333\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                              }@else {\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M4 6L8 10L12 6\"\r\n                                  stroke=\"#344054\"\r\n                                  stroke-width=\"1.33333\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                              }\r\n                            </span>\r\n                          </div>\r\n                          <!-- <a\r\n                            [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                            [queryParams]=\"{ templateId: template.id, isEdit: false }\"\r\n                            class=\"text-decoration-underline ellipsis\"\r\n                            [ngbTooltip]=\"template.name\"\r\n                          > -->\r\n                            <span class=\"template-name-ellipsis\" [ngbTooltip]=\"template.name\">\r\n                              {{ template.name }}\r\n                            </span>\r\n                          <!-- </a> -->\r\n                        </div>\r\n                      </td>\r\n                      <td>{{ template.type }}</td>\r\n                      <td>{{ template.size }}</td>\r\n                      <td *ngIf=\"!hideBrand\">\r\n                        <span *ngIf=\"template.brands.length <= 0\"> - </span>\r\n      \r\n                        <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                          <div *ngFor=\"let b of template.brands; let i = index\" class=\"badge inactive me-2\">\r\n                            <span *ngIf=\"i <= 2\"> {{ b }} </span>\r\n                            <span *ngIf=\"i === 3\"> +{{ template.brands.length - 3 }} </span>\r\n                          </div>\r\n                        </div>\r\n      \r\n                        <ng-template #brandTooltip>\r\n                          <ng-container *ngFor=\"let c of template.brands; let last = last\">\r\n                            {{ c }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </ng-template>\r\n                      </td>\r\n                      <td *ngIf=\"!hideBrand\">\r\n                        <span *ngIf=\"template.categories.length <= 0\"> - </span>\r\n      \r\n                        <div [ngbTooltip]=\"categoryTooltip\" class=\"cursor-pointer\">\r\n                          <div *ngFor=\"let item of template.categories; let i = index\" class=\"badge inactive me-2\">\r\n                            <span *ngIf=\"i <= 2\"> {{ item }} </span>\r\n                            <span *ngIf=\"i === 3\"> +{{ template.categories.length - 3 }} </span>\r\n                          </div>\r\n                        </div>\r\n      \r\n                        <ng-template #categoryTooltip>\r\n                          <ng-container *ngFor=\"let c of template.categories; let last = last\">\r\n                            {{ c }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </ng-template>\r\n                      </td>\r\n                      <td class=\"text-center\" *ngIf=\"!hideBrand\">\r\n                        <span class=\"cursor-pointer\">\r\n                          {{ template.childCount }}\r\n                        </span>\r\n                      </td>\r\n                      <td (click)=\"$event.stopPropagation();\">\r\n                        <div class=\"d-flex\">\r\n                          <div class=\"cursor-pointer\">\r\n                              <a\r\n                              [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                              [queryParams]=\"{ templateId: template.id, isEdit: false }\"\r\n                              class=\"text-decoration-underline ellipsis\"\r\n                              [ngbTooltip]=\"template.name\"\r\n                            >\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_69_46439)\">\r\n                                <path d=\"M19.166 10.0003C19.166 10.0003 15.8327 16.667 9.99935 16.667C4.16602 16.667 0.832683 10.0003 0.832683 10.0003C0.832683 10.0003 4.16602 3.33366 9.99935 3.33366C15.8327 3.33366 19.166 10.0003 19.166 10.0003Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                <path d=\"M9.99935 7.50033C8.61864 7.50033 7.49935 8.61961 7.49935 10.0003C7.49935 11.381 8.61864 12.5003 9.99935 12.5003C11.3801 12.5003 12.4994 11.381 12.4994 10.0003C12.4994 8.61961 11.3801 7.50033 9.99935 7.50033Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </g>\r\n                                <defs>\r\n                                <clipPath id=\"clip0_69_46439\">\r\n                                <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(20 20) rotate(-180)\"/>\r\n                                </clipPath>\r\n                                </defs>\r\n                              </svg>\r\n                            </a>\r\n                          </div>\r\n                          <div class=\"cursor-pointer ps-3\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" (click)=\"onDuplicate(template.id!, i, 'master')\">\r\n                              <path d=\"M15.834 10.0003L4.16732 10.0003M10.0007 4.16699V15.8337\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                          </div>\r\n      \r\n                        </div>\r\n                        <!-- <div class=\"dropdown\">\r\n                          <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                            <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                          </button>\r\n                          <ul class=\"dropdown-menu\">\r\n                            <li>\r\n                              <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(template.id!, i, 'master')\">\r\n                                Create Variant\r\n                              </a>\r\n                            </li>\r\n                          </ul>\r\n                        </div> -->\r\n                      </td>\r\n                    </tr>\r\n                    <tr *ngIf=\"template.open\">\r\n                      <td colspan=\"7\">\r\n                        <div *ngIf=\"template.loading; else childcontentPart\">\r\n                          <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                            <div class=\"shimmer\">\r\n                              <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                              </div>\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                        <ng-template #childcontentPart>\r\n                          <div class=\"card\">\r\n                            <div *ngIf=\"!fixtureTemplateChildList.length\">\r\n                              <div class=\"row\">\r\n                                <div class=\"col-lg-12\">\r\n                                  <table class=\"w-100 table bottom-border text-nowrap\">\r\n                                    <tr>\r\n                                      <th>Variant</th>\r\n                                      <th>Assigned stores</th>\r\n                                      <th *ngIf=\"!hideBrand\">Brand</th>\r\n                                      <th *ngIf=\"!hideBrand\">Product category</th>\r\n                                      <th>Status</th>\r\n                                      <th>Action</th>\r\n                                    </tr>\r\n                                    <tr>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                      <td>-</td>\r\n                                    </tr>\r\n                                  </table>\r\n                                  <!-- <div class=\"card-body d-flex justify-content-center align-items-center flex-column\"> \r\n                                    <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n                                    <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                                    <div class=\"nodatasubtext\">There is no result for variants</div>\r\n                                  </div> -->\r\n                                </div>\r\n                              </div>\r\n                            </div>\r\n                            <table class=\"w-100 table bottom-border text-nowrap\" *ngIf=\"fixtureTemplateChildList.length\">\r\n                              <thead>\r\n                                <tr>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('fixtureName', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Variant\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'fixtureName' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'fixtureName' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('storeCount', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Assigned Stores\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'storeCount' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'storeCount' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th *ngIf=\"!hideBrand\">\r\n                                    <span (click)=\"onChildSortTable('productBrandName', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Brand\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'productBrandName' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'productBrandName'\r\n                                            ? 'fa-arrow-up'\r\n                                            : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th *ngIf=\"!hideBrand\">\r\n                                    <span (click)=\"onChildSortTable('productCategory', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Product category\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'productCategory' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'productCategory'\r\n                                            ? 'fa-arrow-up'\r\n                                            : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>\r\n                                    <span (click)=\"onChildSortTable('status', template.id, i)\" class=\"cursor-pointer\">\r\n                                      Status\r\n                                      <i\r\n                                        class=\"fa ms-1 mt-1\"\r\n                                        [ngStyle]=\"{ color: childSortedColumn === 'status' ? '#009BF3' : '' }\"\r\n                                        [ngClass]=\"\r\n                                          childSortOrder === 1 && childSortedColumn === 'status' ? 'fa-arrow-up' : 'fa-arrow-down'\r\n                                        \"\r\n                                        aria-hidden=\"true\"\r\n                                      ></i>\r\n                                    </span>\r\n                                  </th>\r\n                                  <th>Action</th>\r\n                                </tr>\r\n                              </thead>\r\n                              <tbody>\r\n                                <tr *ngFor=\"let childTemplate of fixtureTemplateChildList;let j=index\" (click)=\"enableRow(i,j,'child')\" [ngStyle]=\"{'background-color': childTemplate.templateDetails ? '#f6fcff' :  ''}\" class=\"cursor-pointer\">\r\n                                  <td style=\"max-width: 300px\">\r\n                                    <div class=\"d-flex align-items-center w-100\">\r\n                                      <!-- <div class=\"thumbnail\"></div> -->\r\n                                      <!-- <a\r\n                                        [routerLink]=\"['/manage/planogram/fixture-template/basic-details']\"\r\n                                        [queryParams]=\"{ templateId: childTemplate._id, isEdit: false }\"\r\n                                        class=\"text-decoration-underline ellipsis\"\r\n                                        [ngbTooltip]=\"childTemplate.fixtureName\"\r\n                                      > -->\r\n                                        <span class=\"template-name-ellipsis\" [ngbTooltip]=\"childTemplate.fixtureName\">\r\n                                          {{ childTemplate.fixtureName }}\r\n                                        </span>\r\n                                      <!-- </a> -->\r\n                                    </div>\r\n                                  </td>\r\n                                  <td>\r\n                                    <div>\r\n                                      <a\r\n                                        [routerLink]=\"['/manage/planogram/fixture-template/assign-stores']\"\r\n                                        [queryParams]=\"{ templateId: childTemplate._id, isEdit: false }\"\r\n                                        class=\"text-decoration-underline\"\r\n                                        [ngbTooltip]=\"storeTooltip\"\r\n                                      >\r\n                                        {{ childTemplate.storeCount }}\r\n                                      </a>\r\n                                    </div>\r\n                                    <ng-template #storeTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.storeList; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td *ngIf=\"!hideBrand\">\r\n                                    <span *ngIf=\"childTemplate.productBrandName.length <= 0\"> - </span>\r\n      \r\n                                    <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                                      <div *ngFor=\"let b of childTemplate.productBrandName; let i = index\" class=\"badge inactive me-2\">\r\n                                        <span *ngIf=\"i <= 2\"> {{ b }} </span>\r\n                                        <span *ngIf=\"i === 3\"> +{{ childTemplate.productBrandName.length - 3 }} </span>\r\n                                      </div>\r\n                                    </div>\r\n      \r\n                                    <ng-template #brandTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.productBrandName; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td *ngIf=\"!hideBrand\">\r\n                                    <span *ngIf=\"childTemplate.productCategory.length <= 0\"> - </span>\r\n      \r\n                                    <div [ngbTooltip]=\"categoryTooltip\" class=\"cursor-pointer\">\r\n                                      <div\r\n                                        *ngFor=\"let item of childTemplate.productCategory; let i = index\"\r\n                                        class=\"badge inactive me-2\"\r\n                                      >\r\n                                        <span *ngIf=\"i <= 2\"> {{ item }} </span>\r\n                                        <span *ngIf=\"i === 3\"> +{{ childTemplate.productCategory.length - 3 }} </span>\r\n                                      </div>\r\n                                    </div>\r\n      \r\n                                    <ng-template #categoryTooltip>\r\n                                      <ng-container *ngFor=\"let c of childTemplate.productCategory; let last = last\">\r\n                                        {{ c }}\r\n                                        <ng-container *ngIf=\"!last\">, </ng-container>\r\n                                      </ng-container>\r\n                                    </ng-template>\r\n                                  </td>\r\n                                  <td>\r\n                                    <div class=\"badge\" [ngClass]=\"childTemplate.status\">{{ childTemplate.status | titlecase }}</div>\r\n                                  </td>\r\n                                  <td (click)=\"$event.stopPropagation();\">\r\n                                    <div class=\"dropdown\">\r\n                                      <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                                        <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                                      </button>\r\n                                      <ul class=\"dropdown-menu\">\r\n                                        <li><a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(childTemplate)\">Edit</a></li>\r\n                                        <li>\r\n                                          <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(childTemplate._id!)\">\r\n                                            Duplicate\r\n                                          </a>\r\n                                        </li>\r\n                                        <li>\r\n                                          <a\r\n                                            class=\"dropdown-item cursor-pointer\"\r\n                                            [routerLink]=\"['/manage/planogram/findAndReplace']\"\r\n                                            [queryParams]=\"{ selectedFixture: childTemplate._id }\"\r\n                                          >\r\n                                            Find and replace\r\n                                          </a>\r\n                                        </li>\r\n                                        <li>\r\n                                          <a\r\n                                            class=\"dropdown-item cursor-pointer text-danger\"\r\n                                            (click)=\"onDelete(childTemplate._id!, childTemplate.storeCount, template.id, i)\"\r\n                                          >\r\n                                            Delete\r\n                                          </a>\r\n                                        </li>\r\n                                      </ul>\r\n                                    </div>\r\n                                  </td>\r\n                                </tr>\r\n                              </tbody>\r\n                            </table>\r\n                            <lib-pagination\r\n                              *ngIf=\"fixtureTemplateChildList.length\"\r\n                              [itemsPerPage]=\"childLimit\"\r\n                              [currentPage]=\"childOffset\"\r\n                              [totalItems]=\"childTotalItems\"\r\n                              [paginationSizes]=\"childPaginationSizes\"\r\n                              [pageSize]=\"childPaginationSize()\"\r\n                              (pageChange)=\"onChildPageChange($event, template.id, i)\"\r\n                              (pageSizeChange)=\"onChildPageSizeChange($event, template.id, i)\"\r\n                            >\r\n                            </lib-pagination>\r\n                          </div>\r\n                        </ng-template>\r\n                      </td>\r\n                    </tr>\r\n                  </tbody>\r\n                </table>\r\n              </div>\r\n            </section>\r\n      \r\n      \r\n            <!-- Fixture Template grid view -->\r\n            <section id=\"grid-view\" *ngIf=\"viewMode === 'grid'\" class=\"table-responsive\">\r\n              <div class=\"row gx-6 gy-4 m-0\">\r\n                <div class=\"col-md-4\" *ngFor=\"let template of fixtureTemplatesList\">\r\n                  <div class=\"card\" (click)=\"onClickCard($event, template)\">\r\n                    <div class=\"card-img\">\r\n                      <div class=\"card-action dropdown\" (click)=\"$event.stopPropagation()\">\r\n                        <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                          <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                        </button>\r\n                        <ul class=\"dropdown-menu\">\r\n                          <!-- <li>\r\n                            <a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(template.id!); $event.stopPropagation()\">\r\n                              Create Variant\r\n                            </a>\r\n                          </li> -->\r\n                          <!-- <li>\r\n                              <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(template.id!); $event.stopPropagation()\">\r\n                                Duplicate\r\n                              </a>\r\n                            </li> -->\r\n                          <!-- <li>\r\n                              <a\r\n                                class=\"dropdown-item cursor-pointer text-danger\"\r\n                                (click)=\"onDelete(template.id!, template.storeCount); $event.stopPropagation()\"\r\n                              >\r\n                                Delete\r\n                              </a>\r\n                            </li> -->\r\n                        </ul>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex justify-content-between align-items-center\">\r\n                      <h3>\r\n                        {{ template.name }}\r\n                      </h3>\r\n                      <div class=\"badge\" [ngClass]=\"template.status\">{{ template.status | titlecase }}</div>\r\n                    </div>\r\n                    <div class=\"d-flex flex-wrap mt-1\">\r\n                      <div [ngbTooltip]=\"brandTooltip\" class=\"cursor-pointer\">\r\n                        @for (b of template.brands; track $index;let last = $last) {\r\n                        <div class=\"badge inactive me-2 mb-2\">\r\n                          <span *ngIf=\"$index <= 2\"> {{ b }} </span>\r\n                          <span *ngIf=\"$index === 3\"> + {{ template.brands.length - 3 }} </span>\r\n                        </div>\r\n                        <span *ngIf=\"$index < 2 && !last\" class=\"me-2 card-tagline\">&#8226;</span>\r\n                        }\r\n                      </div>\r\n      \r\n                      <ng-template #brandTooltip>\r\n                        <p>\r\n                          <b>Brands: </b>\r\n                          <ng-container *ngFor=\"let b of template.brands; let last = last\">\r\n                            {{ b }}\r\n                            <ng-container *ngIf=\"!last\">, </ng-container>\r\n                          </ng-container>\r\n                        </p>\r\n                      </ng-template>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n      \r\n            <!-- Fixture Template tree view -->\r\n            <section id=\"tree-view\" *ngIf=\"viewMode === 'tree'\">\r\n              <fixture-template-tree [clientId]=\"clientId\" [viewMode]=\"'group'\"></fixture-template-tree>\r\n            </section>\r\n      \r\n            <!-- Pagination -->\r\n            <lib-pagination\r\n              *ngIf=\"viewMode !== 'tree'\"\r\n              [itemsPerPage]=\"limit\"\r\n              [currentPage]=\"offset\"\r\n              [totalItems]=\"totalItems\"\r\n              [paginationSizes]=\"paginationSizes\"\r\n              [pageSize]=\"paginationSize()\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\"\r\n            >\r\n            </lib-pagination>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div [ngClass]=\"{'d-none':!fixtureTemplateInfo}\" class=\"col bg-white rounded p-3 fixture-overview card col-height\" style=\"overflow-y:auto\">\r\n          <lib-template-details [fixtureTemplateDetails]=\"fixtureTemplateInfo\" [vmList]=\"vmList\" (onClose)=\"onClickClose()\" [vmList]=\"vmList\"></lib-template-details>\r\n      </div>\r\n   </div>\r\n</section>\r\n\r\n<!-- Find and Replace Content (email-gated; tab hidden unless frAllowed, panel on deep-link) -->\r\n<div *ngIf=\"activeTab === 'find-replace'\">\r\n  <lib-find-replace-table *ngIf=\"frAllowed\"></lib-find-replace-table>\r\n  <lib-access-denied\r\n    *ngIf=\"frAccessChecked && !frAllowed\"\r\n    [feature]=\"'Find and Replace'\"\r\n  ></lib-access-denied>\r\n</div>\r\n\r\n<ng-template #verticalDots>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n    <path\r\n      d=\"M1 8.99998C1 9.52925 1.44771 9.95831 2 9.95831C2.55228 9.95831 3 9.52925 3 8.99998C3 8.47071 2.55228 8.04165 2 8.04165C1.44771 8.04165 1 8.47071 1 8.99998Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M0.999999 15.7083C0.999999 16.2376 1.44771 16.6666 2 16.6666C2.55228 16.6666 3 16.2376 3 15.7083C3 15.179 2.55228 14.75 2 14.75C1.44771 14.75 0.999999 15.179 0.999999 15.7083Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M1 2.29165C1 2.82092 1.44772 3.24998 2 3.24998C2.55228 3.24998 3 2.82092 3 2.29165C3 1.76237 2.55228 1.33331 2 1.33331C1.44772 1.33331 1 1.76237 1 2.29165Z\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</ng-template>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.round-badge{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;border-radius:12px;background:var(--Gray-100, #F2F4F7)}.fixture-overview{max-width:530px;overflow-y:auto}.template-name-ellipsis{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-height{flex:1;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: StoreBuilderService }, { type: PlanoDataService }, { type: i2$1.GlobalStateService }, { type: i4.ToastService }, { type: i2$1.PageInfoService }, { type: i0.ChangeDetectorRef }] });
 
 class CompleteConfirmationComponent {
@@ -25813,6 +25905,10 @@ class FixtureLibraryComponent {
     isFilterApplied = false;
     isPageLoading = true;
     isError = false;
+    // Email-gated (planostaticdatas `allowedFixtureLibraryUsers`). accessChecked
+    // gates the initial render so the list never flashes before the check resolves.
+    accessChecked = false;
+    allowed = false;
     destroy$ = new Subject();
     libSub;
     constructor(ngbModal, router, route, storeBuilderService, gs, toast, pageInfo) {
@@ -25824,8 +25920,12 @@ class FixtureLibraryComponent {
         this.toast = toast;
         this.pageInfo = pageInfo;
     }
-    ngOnInit() {
+    async ngOnInit() {
         this.setPageData();
+        // Gate the whole page on the allowlist before wiring any data loads.
+        await this.checkAccess();
+        if (!this.allowed)
+            return;
         this.gs.dataRangeValue.pipe(takeUntil(this.destroy$), // Subscription will be cancelled on component destroy.
         debounceTime(200), // To avoid immediate frequent calls.
         distinctUntilChanged$1() // Emitting only different values. (Ignores same clientId).
@@ -25876,6 +25976,20 @@ class FixtureLibraryComponent {
             { title: "", path: "", isActive: false, isSeparator: true },
         ]);
     }
+    /** Resolve whether the session user may access the Fixture Library. Never throws. */
+    async checkAccess() {
+        try {
+            const res = await lastValueFrom(this.storeBuilderService.getFixtureLibraryAccess());
+            this.allowed = !!res?.data?.allowed;
+        }
+        catch (err) {
+            console.log('@@ ~ checkAccess [ERR]:', err);
+            this.allowed = false;
+        }
+        finally {
+            this.accessChecked = true;
+        }
+    }
     getFixturesList() {
         this.libSub?.unsubscribe(); // Cancel previous request
         this.isPageLoading = true;
@@ -26133,11 +26247,11 @@ class FixtureLibraryComponent {
         this.libSub?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixtureLibraryComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i4.ToastService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FixtureLibraryComponent, selector: "lib-fixture-library", ngImport: i0, template: "<section id=\"fixture-library\" class=\"content-wrapper\">\r\n  <!-- Fixture view header -->\r\n  <div\r\n    *ngIf=\"fixturesList.length !== 0 || searchTerm || isFilterApplied\"\r\n    class=\"d-flex justify-content-between align-items-center mb-5\"\r\n  >\r\n    <div>\r\n      <h4>Fixtures List</h4>\r\n      <span>{{ totalItems }} - Total Fixtures</span>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div style=\"position: relative\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"searchTerm\"\r\n          (change)=\"onSearch()\"\r\n          style=\"padding-left: 3rem; padding-right: 3rem\"\r\n          class=\"form-control\"\r\n          name=\"search\"\r\n          autocomplete=\"off\"\r\n          placeholder=\"Search\"\r\n        />\r\n\r\n        <span class=\"search-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n            <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n          </svg>\r\n        </span>\r\n\r\n        <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n          <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n            <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n            <g id=\"SVGRepo_iconCarrier\">\r\n              <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n              <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n              <circle\r\n                cx=\"12\"\r\n                cy=\"12\"\r\n                r=\"9\"\r\n                stroke=\"#667085\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              ></circle>\r\n            </g>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <button type=\"button\" (click)=\"onClickCreateFixtureLibrary()\" class=\"btn btn-primary d-inline-flex align-items-center me-2\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n          <path\r\n            d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n            stroke=\"white\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        <span class=\"ms-2 text-white\">Create </span>\r\n      </button>\r\n\r\n      <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n        <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        Bulk Upload\r\n      </button> -->\r\n\r\n      <button\r\n        type=\"button\"\r\n        [disabled]=\"fixturesList.length <= 0\"\r\n        (click)=\"exportFixtureList()\"\r\n        class=\"btn btn-outline text-nowrap\"\r\n      >\r\n        <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        Export\r\n      </button>\r\n\r\n      <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <div class=\"toggle-button me-2\" [ngClass]=\"{ selected: viewMode === 'list' }\" (click)=\"toggleViewMode('list')\">\r\n          <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M6.24078 4.54639H15.8906M6.24078 9.00017H15.8906M6.24078 13.4539H15.8906M2.5293 4.54639H2.53672M2.5293 9.00017H2.53672M2.5293 13.4539H2.53672\"\r\n              [attr.stroke]=\"viewMode === 'list' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"toggle-button\" [ngClass]=\"{ selected: viewMode === 'grid' }\" (click)=\"toggleViewMode('grid')\">\r\n          <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M7.91886 2.31934H2.72278V7.51541H7.91886V2.31934Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M16.0841 2.31934H10.888V7.51541H16.0841V2.31934Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M16.0841 10.4846H10.888V15.6807H16.0841V10.4846Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M7.91886 10.4846H2.72278V15.6807H7.91886V10.4846Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"isPageLoading; else contentPart\">\r\n    <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #contentPart>\r\n    <div *ngIf=\"fixturesList.length === 0\">\r\n      @if(searchTerm || isFilterApplied){\r\n      <div class=\"row\">\r\n        <div class=\"col-lg-12 my-6\">\r\n          <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n            <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n            <div class=\"nodatamaintext mt-3\">No data found</div>\r\n            <div class=\"nodatasubtext\">There is no result for matching filter and search</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }@else{\r\n      <div class=\"row g-0 py-12\">\r\n        <!-- Single Fixture Creation -->\r\n        <div class=\"col-md-12 pe-md-3\">\r\n          <div class=\"d-flex flex-column align-items-center p-10\">\r\n            <div class=\"text-center mb-8\">\r\n              <div class=\"mb-5\">\r\n                <svg\r\n                  style=\"width: 80px; height: 80px\"\r\n                  width=\"56\"\r\n                  height=\"56\"\r\n                  viewBox=\"0 0 56 56\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                  <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                  <path\r\n                    d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\"\r\n                    stroke=\"#00A3FF\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n              <h3 class=\"card-title mb-3\">Create fixture</h3>\r\n              <p class=\"card-tagline mb-0\">Start creating fixture manually through step by step</p>\r\n            </div>\r\n            <button\r\n              (click)=\"onClickCreateFixtureLibrary()\"\r\n              type=\"button\"\r\n              class=\"btn btn-outline d-inline-flex align-items-center\"\r\n            >\r\n              <svg class=\"me-2\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M12 5V19M5 12H19\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Create\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Bulk Fixture Creation -->\r\n        <!-- <div class=\"col-md-6 ps-md-3 border-start\">\r\n          <div class=\"d-flex flex-column align-items-center p-10\">\r\n            <div class=\"text-center mb-8\">\r\n              <div class=\"mb-5\">\r\n                <svg\r\n                  style=\"width: 80px; height: 80px\"\r\n                  width=\"56\"\r\n                  height=\"56\"\r\n                  viewBox=\"0 0 95 94\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect x=\"7.5\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                  <rect x=\"7.5\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                  <path\r\n                    d=\"M62.5 52V58.6667C62.5 59.5507 62.1488 60.3986 61.5237 61.0237C60.8986 61.6488 60.0507 62 59.1667 62H35.8333C34.9493 62 34.1014 61.6488 33.4763 61.0237C32.8512 60.3986 32.5 59.5507 32.5 58.6667V52M55.8333 40.3333L47.5 32M47.5 32L39.1667 40.3333M47.5 32V52\"\r\n                    stroke=\"#00A3FF\"\r\n                    stroke-width=\"3.33333\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n              <h3 class=\"card-title mb-3\">Create fixture using excel template</h3>\r\n              <p class=\"card-tagline mb-0\">You can create a single or a multiple fixtures using the template below</p>\r\n            </div>\r\n            <div class=\"d-flex flex-column gap-2 mb-6\" style=\"width: fit-content\">\r\n              <p class=\"card-description mb-0\">\r\n                Step1 - <a class=\"download-link fw-medium\" (click)=\"downloadEmptyTemplate()\">Download the template here</a>\r\n              </p>\r\n              <p class=\"card-description mb-0\">Step2 - Add your data to the Template File</p>\r\n              <p class=\"card-description mb-0\">Step3 - Upload it below for processing</p>\r\n            </div>\r\n            <button class=\"btn btn-primary d-inline-flex align-items-center\" (click)=\"openBulkUploadModal()\">\r\n              <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"1.67\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Upload\r\n            </button>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div *ngIf=\"fixturesList.length != 0\">\r\n      <!-- Fixture list view -->\r\n      <section id=\"list-view\" *ngIf=\"viewMode === 'list'; else gridView\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"w-100 table bottom-border text-nowrap\">\r\n            <thead>\r\n              <tr>\r\n                <th>\r\n                  <span (click)=\"onSortTable('fixtureCategory')\" class=\"cursor-pointer\">\r\n                    Fixture name\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureCategory' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th>\r\n                  <span (click)=\"onSortTable('fixtureType')\" class=\"cursor-pointer\">\r\n                    Type\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureType' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureType' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th>Country</th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('fixtureWidth')\" class=\"cursor-pointer\">\r\n                    Width\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureWidth' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureWidth' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('fixtureLength')\" class=\"cursor-pointer\">\r\n                    Height\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureLength' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureLength' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('shelfConfig')\" class=\"cursor-pointer\">\r\n                    Partitions\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'shelfConfig' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'shelfConfig' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n\r\n                  <svg\r\n                    placement=\"start\"\r\n                    ngbTooltip=\"Partitions are shelves/sections/panel\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"18\"\r\n                    height=\"18\"\r\n                    viewBox=\"0 0 18 18\"\r\n                    fill=\"none\"\r\n                    class=\"ms-2\"\r\n                  >\r\n                    <g clip-path=\"url(#clip0_1_25644)\">\r\n                      <path\r\n                        d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                        stroke=\"#667085\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_1_25644\">\r\n                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('templateCount')\" class=\"cursor-pointer\">\r\n                    Templates tagged\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'templateCount' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'templateCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">Status</th>\r\n                <th></th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let fixture of fixturesList\">\r\n                <td style=\"max-width: 300px\">\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <!-- <div class=\"thumbnail\"></div> -->\r\n                    <a\r\n                      [routerLink]=\"['/manage/planogram/create-library-fixture']\"\r\n                      [queryParams]=\"{ fixtureId: fixture.id }\"\r\n                      class=\"text-decoration-underline ellipsis\"\r\n                      [ngbTooltip]=\"fixture.name + ' - ' + fixture.width + 'ft'\"\r\n                    >\r\n                      {{ fixture.name }} - {{ fixture.width }}ft\r\n                    </a>\r\n                  </div>\r\n                </td>\r\n                <td>{{ fixture.type | titlecase }}</td>\r\n                <td>\r\n                  <div *ngIf=\"fixture.country?.length; else noCountry\" class=\"country-chip-list\">\r\n                    <span class=\"country-chip\" *ngFor=\"let c of fixture.country\">{{ c }}</span>\r\n                  </div>\r\n                  <ng-template #noCountry>-</ng-template>\r\n                </td>\r\n                <td class=\"text-center\">{{ fixture.width }}ft</td>\r\n                <td class=\"text-center\">{{ fixture.height }}ft</td>\r\n                <td class=\"text-center\">{{ fixture.partitions }}</td>\r\n                <td class=\"text-center\">{{ fixture.templatesTagged }}</td>\r\n                <td class=\"text-center\">\r\n                  <div class=\"badge\" [ngClass]=\"fixture.status\" placement=\"start\" [ngbTooltip]=\"getTooltipText(fixture.status)\">\r\n                    {{ fixture.status | titlecase }}\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"dropdown\">\r\n                    <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                      <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                    </button>\r\n                    <ul class=\"dropdown-menu\">\r\n                      <li>\r\n                        <a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(fixture.id, fixture.templatesTagged)\"> Edit </a>\r\n                      </li>\r\n                      <li><a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(fixture.id)\">Duplicate</a></li>\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer text-danger\"\r\n                          (click)=\"onDelete(fixture.id, fixture.templatesTagged)\"\r\n                        >\r\n                          Delete\r\n                        </a>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </section>\r\n\r\n      <!-- Fixture grid view -->\r\n      <ng-template #gridView>\r\n        <section id=\"grid-view\" class=\"table-responsive\">\r\n          <div class=\"row gx-6 gy-4 m-0\">\r\n            <div class=\"col-md-4\" *ngFor=\"let fixture of fixturesList\">\r\n              <div class=\"card\" (click)=\"onClickCard($event, fixture)\">\r\n                <div class=\"card-img\">\r\n                  <div class=\"card-action dropdown\" (click)=\"$event.stopPropagation()\">\r\n                    <button class=\"btn btn-light\" style=\"padding: 12px 21px !important\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n                        <path\r\n                          d=\"M1 9C1 9.55228 1.44771 10 2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44771 8 1 8.44772 1 9Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                        <path\r\n                          d=\"M0.999999 16C0.999999 16.5523 1.44771 17 2 17C2.55228 17 3 16.5523 3 16C3 15.4477 2.55228 15 2 15C1.44771 15 0.999999 15.4477 0.999999 16Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                        <path\r\n                          d=\"M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    </button>\r\n                    <ul class=\"dropdown-menu\">\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer\"\r\n                          (click)=\"onEdit(fixture.id, fixture.templatesTagged); $event.stopPropagation()\"\r\n                        >\r\n                          Edit\r\n                        </a>\r\n                      </li>\r\n                      <li>\r\n                        <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(fixture.id); $event.stopPropagation()\">\r\n                          Duplicate\r\n                        </a>\r\n                      </li>\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer text-danger\"\r\n                          (click)=\"onDelete(fixture.id, fixture.templatesTagged); $event.stopPropagation()\"\r\n                        >\r\n                          Delete\r\n                        </a>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h3 class=\"ellipsis\" [ngbTooltip]=\"fixture.name + ' - ' + fixture.width + 'ft'\">\r\n                    {{ fixture.name }}\r\n                  </h3>\r\n                  <div class=\"badge\" [ngClass]=\"fixture.status\" placement=\"start\" [ngbTooltip]=\"getTooltipText(fixture.status)\">\r\n                    {{ fixture.status | titlecase }}\r\n                  </div>\r\n                </div>\r\n                <div class=\"card-tagline\">\r\n                  {{ fixture.width }}ft x {{ fixture.height }}ft <span>&#8226;</span> {{ fixture.partitions }}\r\n                  <span>&#8226;</span>\r\n                  {{ fixture.type }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </ng-template>\r\n\r\n      <!-- Pagination -->\r\n      <lib-pagination\r\n        class=\"text-start\"\r\n        [itemsPerPage]=\"limit\"\r\n        [currentPage]=\"offset\"\r\n        [totalItems]=\"totalItems\"\r\n        [paginationSizes]=\"paginationSizes\"\r\n        [pageSize]=\"paginationSize()\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      ></lib-pagination>\r\n    </div>\r\n  </ng-template>\r\n</section>\r\n\r\n<ng-template #verticalDots>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n    <path\r\n      d=\"M1 9C1 9.55228 1.44771 10 2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44771 8 1 8.44772 1 9Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M0.999999 16C0.999999 16.5523 1.44771 17 2 17C2.55228 17 3 16.5523 3 16C3 15.4477 2.55228 15 2 15C1.44771 15 0.999999 15.4477 0.999999 16Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</ng-template>\r\n", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.badge.draft{color:#009bf3;background:#eaf8ff}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.country-chip-list{display:flex;flex-wrap:wrap;gap:4px}.country-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:16px;background:var(--Gray-100, #f2f4f7);color:var(--Gray-700, #344054);font-size:12px;font-weight:500;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FixtureLibraryComponent, selector: "lib-fixture-library", ngImport: i0, template: "<!-- Checking access -->\r\n<div *ngIf=\"!accessChecked\" class=\"card p-5 m-5 text-center text-muted py-10\">Checking access\u2026</div>\r\n\r\n<!-- Access denied -->\r\n<lib-access-denied\r\n  *ngIf=\"accessChecked && !allowed\"\r\n  [feature]=\"'Fixture Library'\"\r\n></lib-access-denied>\r\n\r\n<section id=\"fixture-library\" class=\"content-wrapper\" *ngIf=\"accessChecked && allowed\">\r\n  <!-- Fixture view header -->\r\n  <div\r\n    *ngIf=\"fixturesList.length !== 0 || searchTerm || isFilterApplied\"\r\n    class=\"d-flex justify-content-between align-items-center mb-5\"\r\n  >\r\n    <div>\r\n      <h4>Fixtures List</h4>\r\n      <span>{{ totalItems }} - Total Fixtures</span>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div style=\"position: relative\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"searchTerm\"\r\n          (change)=\"onSearch()\"\r\n          style=\"padding-left: 3rem; padding-right: 3rem\"\r\n          class=\"form-control\"\r\n          name=\"search\"\r\n          autocomplete=\"off\"\r\n          placeholder=\"Search\"\r\n        />\r\n\r\n        <span class=\"search-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n            <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n          </svg>\r\n        </span>\r\n\r\n        <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n          <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n            <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n            <g id=\"SVGRepo_iconCarrier\">\r\n              <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n              <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n              <circle\r\n                cx=\"12\"\r\n                cy=\"12\"\r\n                r=\"9\"\r\n                stroke=\"#667085\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              ></circle>\r\n            </g>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <button type=\"button\" (click)=\"onClickCreateFixtureLibrary()\" class=\"btn btn-primary d-inline-flex align-items-center me-2\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n          <path\r\n            d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n            stroke=\"white\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        <span class=\"ms-2 text-white\">Create </span>\r\n      </button>\r\n\r\n      <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n        <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        Bulk Upload\r\n      </button> -->\r\n\r\n      <button\r\n        type=\"button\"\r\n        [disabled]=\"fixturesList.length <= 0\"\r\n        (click)=\"exportFixtureList()\"\r\n        class=\"btn btn-outline text-nowrap\"\r\n      >\r\n        <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        Export\r\n      </button>\r\n\r\n      <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <div class=\"toggle-button me-2\" [ngClass]=\"{ selected: viewMode === 'list' }\" (click)=\"toggleViewMode('list')\">\r\n          <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M6.24078 4.54639H15.8906M6.24078 9.00017H15.8906M6.24078 13.4539H15.8906M2.5293 4.54639H2.53672M2.5293 9.00017H2.53672M2.5293 13.4539H2.53672\"\r\n              [attr.stroke]=\"viewMode === 'list' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"toggle-button\" [ngClass]=\"{ selected: viewMode === 'grid' }\" (click)=\"toggleViewMode('grid')\">\r\n          <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M7.91886 2.31934H2.72278V7.51541H7.91886V2.31934Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M16.0841 2.31934H10.888V7.51541H16.0841V2.31934Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M16.0841 10.4846H10.888V15.6807H16.0841V10.4846Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M7.91886 10.4846H2.72278V15.6807H7.91886V10.4846Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"isPageLoading; else contentPart\">\r\n    <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #contentPart>\r\n    <div *ngIf=\"fixturesList.length === 0\">\r\n      @if(searchTerm || isFilterApplied){\r\n      <div class=\"row\">\r\n        <div class=\"col-lg-12 my-6\">\r\n          <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n            <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n            <div class=\"nodatamaintext mt-3\">No data found</div>\r\n            <div class=\"nodatasubtext\">There is no result for matching filter and search</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }@else{\r\n      <div class=\"row g-0 py-12\">\r\n        <!-- Single Fixture Creation -->\r\n        <div class=\"col-md-12 pe-md-3\">\r\n          <div class=\"d-flex flex-column align-items-center p-10\">\r\n            <div class=\"text-center mb-8\">\r\n              <div class=\"mb-5\">\r\n                <svg\r\n                  style=\"width: 80px; height: 80px\"\r\n                  width=\"56\"\r\n                  height=\"56\"\r\n                  viewBox=\"0 0 56 56\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                  <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                  <path\r\n                    d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\"\r\n                    stroke=\"#00A3FF\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n              <h3 class=\"card-title mb-3\">Create fixture</h3>\r\n              <p class=\"card-tagline mb-0\">Start creating fixture manually through step by step</p>\r\n            </div>\r\n            <button\r\n              (click)=\"onClickCreateFixtureLibrary()\"\r\n              type=\"button\"\r\n              class=\"btn btn-outline d-inline-flex align-items-center\"\r\n            >\r\n              <svg class=\"me-2\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M12 5V19M5 12H19\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Create\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Bulk Fixture Creation -->\r\n        <!-- <div class=\"col-md-6 ps-md-3 border-start\">\r\n          <div class=\"d-flex flex-column align-items-center p-10\">\r\n            <div class=\"text-center mb-8\">\r\n              <div class=\"mb-5\">\r\n                <svg\r\n                  style=\"width: 80px; height: 80px\"\r\n                  width=\"56\"\r\n                  height=\"56\"\r\n                  viewBox=\"0 0 95 94\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect x=\"7.5\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                  <rect x=\"7.5\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                  <path\r\n                    d=\"M62.5 52V58.6667C62.5 59.5507 62.1488 60.3986 61.5237 61.0237C60.8986 61.6488 60.0507 62 59.1667 62H35.8333C34.9493 62 34.1014 61.6488 33.4763 61.0237C32.8512 60.3986 32.5 59.5507 32.5 58.6667V52M55.8333 40.3333L47.5 32M47.5 32L39.1667 40.3333M47.5 32V52\"\r\n                    stroke=\"#00A3FF\"\r\n                    stroke-width=\"3.33333\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n              <h3 class=\"card-title mb-3\">Create fixture using excel template</h3>\r\n              <p class=\"card-tagline mb-0\">You can create a single or a multiple fixtures using the template below</p>\r\n            </div>\r\n            <div class=\"d-flex flex-column gap-2 mb-6\" style=\"width: fit-content\">\r\n              <p class=\"card-description mb-0\">\r\n                Step1 - <a class=\"download-link fw-medium\" (click)=\"downloadEmptyTemplate()\">Download the template here</a>\r\n              </p>\r\n              <p class=\"card-description mb-0\">Step2 - Add your data to the Template File</p>\r\n              <p class=\"card-description mb-0\">Step3 - Upload it below for processing</p>\r\n            </div>\r\n            <button class=\"btn btn-primary d-inline-flex align-items-center\" (click)=\"openBulkUploadModal()\">\r\n              <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"1.67\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Upload\r\n            </button>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div *ngIf=\"fixturesList.length != 0\">\r\n      <!-- Fixture list view -->\r\n      <section id=\"list-view\" *ngIf=\"viewMode === 'list'; else gridView\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"w-100 table bottom-border text-nowrap\">\r\n            <thead>\r\n              <tr>\r\n                <th>\r\n                  <span (click)=\"onSortTable('fixtureCategory')\" class=\"cursor-pointer\">\r\n                    Fixture name\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureCategory' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th>\r\n                  <span (click)=\"onSortTable('fixtureType')\" class=\"cursor-pointer\">\r\n                    Type\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureType' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureType' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th>Country</th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('fixtureWidth')\" class=\"cursor-pointer\">\r\n                    Width\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureWidth' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureWidth' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('fixtureLength')\" class=\"cursor-pointer\">\r\n                    Height\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureLength' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureLength' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('shelfConfig')\" class=\"cursor-pointer\">\r\n                    Partitions\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'shelfConfig' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'shelfConfig' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n\r\n                  <svg\r\n                    placement=\"start\"\r\n                    ngbTooltip=\"Partitions are shelves/sections/panel\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"18\"\r\n                    height=\"18\"\r\n                    viewBox=\"0 0 18 18\"\r\n                    fill=\"none\"\r\n                    class=\"ms-2\"\r\n                  >\r\n                    <g clip-path=\"url(#clip0_1_25644)\">\r\n                      <path\r\n                        d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                        stroke=\"#667085\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_1_25644\">\r\n                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('templateCount')\" class=\"cursor-pointer\">\r\n                    Templates tagged\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'templateCount' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'templateCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">Status</th>\r\n                <th></th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let fixture of fixturesList\">\r\n                <td style=\"max-width: 300px\">\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <!-- <div class=\"thumbnail\"></div> -->\r\n                    <a\r\n                      [routerLink]=\"['/manage/planogram/create-library-fixture']\"\r\n                      [queryParams]=\"{ fixtureId: fixture.id }\"\r\n                      class=\"text-decoration-underline ellipsis\"\r\n                      [ngbTooltip]=\"fixture.name + ' - ' + fixture.width + 'ft'\"\r\n                    >\r\n                      {{ fixture.name }} - {{ fixture.width }}ft\r\n                    </a>\r\n                  </div>\r\n                </td>\r\n                <td>{{ fixture.type | titlecase }}</td>\r\n                <td>\r\n                  <div *ngIf=\"fixture.country?.length; else noCountry\" class=\"country-chip-list\">\r\n                    <span class=\"country-chip\" *ngFor=\"let c of fixture.country\">{{ c }}</span>\r\n                  </div>\r\n                  <ng-template #noCountry>-</ng-template>\r\n                </td>\r\n                <td class=\"text-center\">{{ fixture.width }}ft</td>\r\n                <td class=\"text-center\">{{ fixture.height }}ft</td>\r\n                <td class=\"text-center\">{{ fixture.partitions }}</td>\r\n                <td class=\"text-center\">{{ fixture.templatesTagged }}</td>\r\n                <td class=\"text-center\">\r\n                  <div class=\"badge\" [ngClass]=\"fixture.status\" placement=\"start\" [ngbTooltip]=\"getTooltipText(fixture.status)\">\r\n                    {{ fixture.status | titlecase }}\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"dropdown\">\r\n                    <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                      <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                    </button>\r\n                    <ul class=\"dropdown-menu\">\r\n                      <li>\r\n                        <a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(fixture.id, fixture.templatesTagged)\"> Edit </a>\r\n                      </li>\r\n                      <li><a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(fixture.id)\">Duplicate</a></li>\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer text-danger\"\r\n                          (click)=\"onDelete(fixture.id, fixture.templatesTagged)\"\r\n                        >\r\n                          Delete\r\n                        </a>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </section>\r\n\r\n      <!-- Fixture grid view -->\r\n      <ng-template #gridView>\r\n        <section id=\"grid-view\" class=\"table-responsive\">\r\n          <div class=\"row gx-6 gy-4 m-0\">\r\n            <div class=\"col-md-4\" *ngFor=\"let fixture of fixturesList\">\r\n              <div class=\"card\" (click)=\"onClickCard($event, fixture)\">\r\n                <div class=\"card-img\">\r\n                  <div class=\"card-action dropdown\" (click)=\"$event.stopPropagation()\">\r\n                    <button class=\"btn btn-light\" style=\"padding: 12px 21px !important\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n                        <path\r\n                          d=\"M1 9C1 9.55228 1.44771 10 2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44771 8 1 8.44772 1 9Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                        <path\r\n                          d=\"M0.999999 16C0.999999 16.5523 1.44771 17 2 17C2.55228 17 3 16.5523 3 16C3 15.4477 2.55228 15 2 15C1.44771 15 0.999999 15.4477 0.999999 16Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                        <path\r\n                          d=\"M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    </button>\r\n                    <ul class=\"dropdown-menu\">\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer\"\r\n                          (click)=\"onEdit(fixture.id, fixture.templatesTagged); $event.stopPropagation()\"\r\n                        >\r\n                          Edit\r\n                        </a>\r\n                      </li>\r\n                      <li>\r\n                        <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(fixture.id); $event.stopPropagation()\">\r\n                          Duplicate\r\n                        </a>\r\n                      </li>\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer text-danger\"\r\n                          (click)=\"onDelete(fixture.id, fixture.templatesTagged); $event.stopPropagation()\"\r\n                        >\r\n                          Delete\r\n                        </a>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h3 class=\"ellipsis\" [ngbTooltip]=\"fixture.name + ' - ' + fixture.width + 'ft'\">\r\n                    {{ fixture.name }}\r\n                  </h3>\r\n                  <div class=\"badge\" [ngClass]=\"fixture.status\" placement=\"start\" [ngbTooltip]=\"getTooltipText(fixture.status)\">\r\n                    {{ fixture.status | titlecase }}\r\n                  </div>\r\n                </div>\r\n                <div class=\"card-tagline\">\r\n                  {{ fixture.width }}ft x {{ fixture.height }}ft <span>&#8226;</span> {{ fixture.partitions }}\r\n                  <span>&#8226;</span>\r\n                  {{ fixture.type }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </ng-template>\r\n\r\n      <!-- Pagination -->\r\n      <lib-pagination\r\n        class=\"text-start\"\r\n        [itemsPerPage]=\"limit\"\r\n        [currentPage]=\"offset\"\r\n        [totalItems]=\"totalItems\"\r\n        [paginationSizes]=\"paginationSizes\"\r\n        [pageSize]=\"paginationSize()\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      ></lib-pagination>\r\n    </div>\r\n  </ng-template>\r\n</section>\r\n\r\n<ng-template #verticalDots>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n    <path\r\n      d=\"M1 9C1 9.55228 1.44771 10 2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44771 8 1 8.44772 1 9Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M0.999999 16C0.999999 16.5523 1.44771 17 2 17C2.55228 17 3 16.5523 3 16C3 15.4477 2.55228 15 2 15C1.44771 15 0.999999 15.4477 0.999999 16Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</ng-template>\r\n", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.badge.draft{color:#009bf3;background:#eaf8ff}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.country-chip-list{display:flex;flex-wrap:wrap;gap:4px}.country-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:16px;background:var(--Gray-100, #f2f4f7);color:var(--Gray-700, #344054);font-size:12px;font-weight:500;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: AccessDeniedComponent, selector: "lib-access-denied", inputs: ["feature"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixtureLibraryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-fixture-library', template: "<section id=\"fixture-library\" class=\"content-wrapper\">\r\n  <!-- Fixture view header -->\r\n  <div\r\n    *ngIf=\"fixturesList.length !== 0 || searchTerm || isFilterApplied\"\r\n    class=\"d-flex justify-content-between align-items-center mb-5\"\r\n  >\r\n    <div>\r\n      <h4>Fixtures List</h4>\r\n      <span>{{ totalItems }} - Total Fixtures</span>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div style=\"position: relative\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"searchTerm\"\r\n          (change)=\"onSearch()\"\r\n          style=\"padding-left: 3rem; padding-right: 3rem\"\r\n          class=\"form-control\"\r\n          name=\"search\"\r\n          autocomplete=\"off\"\r\n          placeholder=\"Search\"\r\n        />\r\n\r\n        <span class=\"search-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n            <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n          </svg>\r\n        </span>\r\n\r\n        <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n          <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n            <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n            <g id=\"SVGRepo_iconCarrier\">\r\n              <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n              <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n              <circle\r\n                cx=\"12\"\r\n                cy=\"12\"\r\n                r=\"9\"\r\n                stroke=\"#667085\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              ></circle>\r\n            </g>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <button type=\"button\" (click)=\"onClickCreateFixtureLibrary()\" class=\"btn btn-primary d-inline-flex align-items-center me-2\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n          <path\r\n            d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n            stroke=\"white\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        <span class=\"ms-2 text-white\">Create </span>\r\n      </button>\r\n\r\n      <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n        <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        Bulk Upload\r\n      </button> -->\r\n\r\n      <button\r\n        type=\"button\"\r\n        [disabled]=\"fixturesList.length <= 0\"\r\n        (click)=\"exportFixtureList()\"\r\n        class=\"btn btn-outline text-nowrap\"\r\n      >\r\n        <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        Export\r\n      </button>\r\n\r\n      <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <div class=\"toggle-button me-2\" [ngClass]=\"{ selected: viewMode === 'list' }\" (click)=\"toggleViewMode('list')\">\r\n          <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M6.24078 4.54639H15.8906M6.24078 9.00017H15.8906M6.24078 13.4539H15.8906M2.5293 4.54639H2.53672M2.5293 9.00017H2.53672M2.5293 13.4539H2.53672\"\r\n              [attr.stroke]=\"viewMode === 'list' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"toggle-button\" [ngClass]=\"{ selected: viewMode === 'grid' }\" (click)=\"toggleViewMode('grid')\">\r\n          <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M7.91886 2.31934H2.72278V7.51541H7.91886V2.31934Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M16.0841 2.31934H10.888V7.51541H16.0841V2.31934Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M16.0841 10.4846H10.888V15.6807H16.0841V10.4846Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M7.91886 10.4846H2.72278V15.6807H7.91886V10.4846Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"isPageLoading; else contentPart\">\r\n    <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #contentPart>\r\n    <div *ngIf=\"fixturesList.length === 0\">\r\n      @if(searchTerm || isFilterApplied){\r\n      <div class=\"row\">\r\n        <div class=\"col-lg-12 my-6\">\r\n          <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n            <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n            <div class=\"nodatamaintext mt-3\">No data found</div>\r\n            <div class=\"nodatasubtext\">There is no result for matching filter and search</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }@else{\r\n      <div class=\"row g-0 py-12\">\r\n        <!-- Single Fixture Creation -->\r\n        <div class=\"col-md-12 pe-md-3\">\r\n          <div class=\"d-flex flex-column align-items-center p-10\">\r\n            <div class=\"text-center mb-8\">\r\n              <div class=\"mb-5\">\r\n                <svg\r\n                  style=\"width: 80px; height: 80px\"\r\n                  width=\"56\"\r\n                  height=\"56\"\r\n                  viewBox=\"0 0 56 56\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                  <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                  <path\r\n                    d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\"\r\n                    stroke=\"#00A3FF\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n              <h3 class=\"card-title mb-3\">Create fixture</h3>\r\n              <p class=\"card-tagline mb-0\">Start creating fixture manually through step by step</p>\r\n            </div>\r\n            <button\r\n              (click)=\"onClickCreateFixtureLibrary()\"\r\n              type=\"button\"\r\n              class=\"btn btn-outline d-inline-flex align-items-center\"\r\n            >\r\n              <svg class=\"me-2\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M12 5V19M5 12H19\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Create\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Bulk Fixture Creation -->\r\n        <!-- <div class=\"col-md-6 ps-md-3 border-start\">\r\n          <div class=\"d-flex flex-column align-items-center p-10\">\r\n            <div class=\"text-center mb-8\">\r\n              <div class=\"mb-5\">\r\n                <svg\r\n                  style=\"width: 80px; height: 80px\"\r\n                  width=\"56\"\r\n                  height=\"56\"\r\n                  viewBox=\"0 0 95 94\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect x=\"7.5\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                  <rect x=\"7.5\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                  <path\r\n                    d=\"M62.5 52V58.6667C62.5 59.5507 62.1488 60.3986 61.5237 61.0237C60.8986 61.6488 60.0507 62 59.1667 62H35.8333C34.9493 62 34.1014 61.6488 33.4763 61.0237C32.8512 60.3986 32.5 59.5507 32.5 58.6667V52M55.8333 40.3333L47.5 32M47.5 32L39.1667 40.3333M47.5 32V52\"\r\n                    stroke=\"#00A3FF\"\r\n                    stroke-width=\"3.33333\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n              <h3 class=\"card-title mb-3\">Create fixture using excel template</h3>\r\n              <p class=\"card-tagline mb-0\">You can create a single or a multiple fixtures using the template below</p>\r\n            </div>\r\n            <div class=\"d-flex flex-column gap-2 mb-6\" style=\"width: fit-content\">\r\n              <p class=\"card-description mb-0\">\r\n                Step1 - <a class=\"download-link fw-medium\" (click)=\"downloadEmptyTemplate()\">Download the template here</a>\r\n              </p>\r\n              <p class=\"card-description mb-0\">Step2 - Add your data to the Template File</p>\r\n              <p class=\"card-description mb-0\">Step3 - Upload it below for processing</p>\r\n            </div>\r\n            <button class=\"btn btn-primary d-inline-flex align-items-center\" (click)=\"openBulkUploadModal()\">\r\n              <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"1.67\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Upload\r\n            </button>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div *ngIf=\"fixturesList.length != 0\">\r\n      <!-- Fixture list view -->\r\n      <section id=\"list-view\" *ngIf=\"viewMode === 'list'; else gridView\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"w-100 table bottom-border text-nowrap\">\r\n            <thead>\r\n              <tr>\r\n                <th>\r\n                  <span (click)=\"onSortTable('fixtureCategory')\" class=\"cursor-pointer\">\r\n                    Fixture name\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureCategory' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th>\r\n                  <span (click)=\"onSortTable('fixtureType')\" class=\"cursor-pointer\">\r\n                    Type\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureType' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureType' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th>Country</th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('fixtureWidth')\" class=\"cursor-pointer\">\r\n                    Width\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureWidth' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureWidth' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('fixtureLength')\" class=\"cursor-pointer\">\r\n                    Height\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureLength' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureLength' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('shelfConfig')\" class=\"cursor-pointer\">\r\n                    Partitions\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'shelfConfig' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'shelfConfig' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n\r\n                  <svg\r\n                    placement=\"start\"\r\n                    ngbTooltip=\"Partitions are shelves/sections/panel\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"18\"\r\n                    height=\"18\"\r\n                    viewBox=\"0 0 18 18\"\r\n                    fill=\"none\"\r\n                    class=\"ms-2\"\r\n                  >\r\n                    <g clip-path=\"url(#clip0_1_25644)\">\r\n                      <path\r\n                        d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                        stroke=\"#667085\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_1_25644\">\r\n                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('templateCount')\" class=\"cursor-pointer\">\r\n                    Templates tagged\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'templateCount' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'templateCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">Status</th>\r\n                <th></th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let fixture of fixturesList\">\r\n                <td style=\"max-width: 300px\">\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <!-- <div class=\"thumbnail\"></div> -->\r\n                    <a\r\n                      [routerLink]=\"['/manage/planogram/create-library-fixture']\"\r\n                      [queryParams]=\"{ fixtureId: fixture.id }\"\r\n                      class=\"text-decoration-underline ellipsis\"\r\n                      [ngbTooltip]=\"fixture.name + ' - ' + fixture.width + 'ft'\"\r\n                    >\r\n                      {{ fixture.name }} - {{ fixture.width }}ft\r\n                    </a>\r\n                  </div>\r\n                </td>\r\n                <td>{{ fixture.type | titlecase }}</td>\r\n                <td>\r\n                  <div *ngIf=\"fixture.country?.length; else noCountry\" class=\"country-chip-list\">\r\n                    <span class=\"country-chip\" *ngFor=\"let c of fixture.country\">{{ c }}</span>\r\n                  </div>\r\n                  <ng-template #noCountry>-</ng-template>\r\n                </td>\r\n                <td class=\"text-center\">{{ fixture.width }}ft</td>\r\n                <td class=\"text-center\">{{ fixture.height }}ft</td>\r\n                <td class=\"text-center\">{{ fixture.partitions }}</td>\r\n                <td class=\"text-center\">{{ fixture.templatesTagged }}</td>\r\n                <td class=\"text-center\">\r\n                  <div class=\"badge\" [ngClass]=\"fixture.status\" placement=\"start\" [ngbTooltip]=\"getTooltipText(fixture.status)\">\r\n                    {{ fixture.status | titlecase }}\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"dropdown\">\r\n                    <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                      <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                    </button>\r\n                    <ul class=\"dropdown-menu\">\r\n                      <li>\r\n                        <a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(fixture.id, fixture.templatesTagged)\"> Edit </a>\r\n                      </li>\r\n                      <li><a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(fixture.id)\">Duplicate</a></li>\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer text-danger\"\r\n                          (click)=\"onDelete(fixture.id, fixture.templatesTagged)\"\r\n                        >\r\n                          Delete\r\n                        </a>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </section>\r\n\r\n      <!-- Fixture grid view -->\r\n      <ng-template #gridView>\r\n        <section id=\"grid-view\" class=\"table-responsive\">\r\n          <div class=\"row gx-6 gy-4 m-0\">\r\n            <div class=\"col-md-4\" *ngFor=\"let fixture of fixturesList\">\r\n              <div class=\"card\" (click)=\"onClickCard($event, fixture)\">\r\n                <div class=\"card-img\">\r\n                  <div class=\"card-action dropdown\" (click)=\"$event.stopPropagation()\">\r\n                    <button class=\"btn btn-light\" style=\"padding: 12px 21px !important\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n                        <path\r\n                          d=\"M1 9C1 9.55228 1.44771 10 2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44771 8 1 8.44772 1 9Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                        <path\r\n                          d=\"M0.999999 16C0.999999 16.5523 1.44771 17 2 17C2.55228 17 3 16.5523 3 16C3 15.4477 2.55228 15 2 15C1.44771 15 0.999999 15.4477 0.999999 16Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                        <path\r\n                          d=\"M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    </button>\r\n                    <ul class=\"dropdown-menu\">\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer\"\r\n                          (click)=\"onEdit(fixture.id, fixture.templatesTagged); $event.stopPropagation()\"\r\n                        >\r\n                          Edit\r\n                        </a>\r\n                      </li>\r\n                      <li>\r\n                        <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(fixture.id); $event.stopPropagation()\">\r\n                          Duplicate\r\n                        </a>\r\n                      </li>\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer text-danger\"\r\n                          (click)=\"onDelete(fixture.id, fixture.templatesTagged); $event.stopPropagation()\"\r\n                        >\r\n                          Delete\r\n                        </a>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h3 class=\"ellipsis\" [ngbTooltip]=\"fixture.name + ' - ' + fixture.width + 'ft'\">\r\n                    {{ fixture.name }}\r\n                  </h3>\r\n                  <div class=\"badge\" [ngClass]=\"fixture.status\" placement=\"start\" [ngbTooltip]=\"getTooltipText(fixture.status)\">\r\n                    {{ fixture.status | titlecase }}\r\n                  </div>\r\n                </div>\r\n                <div class=\"card-tagline\">\r\n                  {{ fixture.width }}ft x {{ fixture.height }}ft <span>&#8226;</span> {{ fixture.partitions }}\r\n                  <span>&#8226;</span>\r\n                  {{ fixture.type }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </ng-template>\r\n\r\n      <!-- Pagination -->\r\n      <lib-pagination\r\n        class=\"text-start\"\r\n        [itemsPerPage]=\"limit\"\r\n        [currentPage]=\"offset\"\r\n        [totalItems]=\"totalItems\"\r\n        [paginationSizes]=\"paginationSizes\"\r\n        [pageSize]=\"paginationSize()\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      ></lib-pagination>\r\n    </div>\r\n  </ng-template>\r\n</section>\r\n\r\n<ng-template #verticalDots>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n    <path\r\n      d=\"M1 9C1 9.55228 1.44771 10 2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44771 8 1 8.44772 1 9Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M0.999999 16C0.999999 16.5523 1.44771 17 2 17C2.55228 17 3 16.5523 3 16C3 15.4477 2.55228 15 2 15C1.44771 15 0.999999 15.4477 0.999999 16Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</ng-template>\r\n", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.badge.draft{color:#009bf3;background:#eaf8ff}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.country-chip-list{display:flex;flex-wrap:wrap;gap:4px}.country-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:16px;background:var(--Gray-100, #f2f4f7);color:var(--Gray-700, #344054);font-size:12px;font-weight:500;line-height:18px}\n"] }]
+            args: [{ selector: 'lib-fixture-library', template: "<!-- Checking access -->\r\n<div *ngIf=\"!accessChecked\" class=\"card p-5 m-5 text-center text-muted py-10\">Checking access\u2026</div>\r\n\r\n<!-- Access denied -->\r\n<lib-access-denied\r\n  *ngIf=\"accessChecked && !allowed\"\r\n  [feature]=\"'Fixture Library'\"\r\n></lib-access-denied>\r\n\r\n<section id=\"fixture-library\" class=\"content-wrapper\" *ngIf=\"accessChecked && allowed\">\r\n  <!-- Fixture view header -->\r\n  <div\r\n    *ngIf=\"fixturesList.length !== 0 || searchTerm || isFilterApplied\"\r\n    class=\"d-flex justify-content-between align-items-center mb-5\"\r\n  >\r\n    <div>\r\n      <h4>Fixtures List</h4>\r\n      <span>{{ totalItems }} - Total Fixtures</span>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div style=\"position: relative\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"searchTerm\"\r\n          (change)=\"onSearch()\"\r\n          style=\"padding-left: 3rem; padding-right: 3rem\"\r\n          class=\"form-control\"\r\n          name=\"search\"\r\n          autocomplete=\"off\"\r\n          placeholder=\"Search\"\r\n        />\r\n\r\n        <span class=\"search-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n            <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n          </svg>\r\n        </span>\r\n\r\n        <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n          <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n            <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n            <g id=\"SVGRepo_iconCarrier\">\r\n              <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n              <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n              <circle\r\n                cx=\"12\"\r\n                cy=\"12\"\r\n                r=\"9\"\r\n                stroke=\"#667085\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              ></circle>\r\n            </g>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <button type=\"button\" (click)=\"onClickCreateFixtureLibrary()\" class=\"btn btn-primary d-inline-flex align-items-center me-2\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n          <path\r\n            d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n            stroke=\"white\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        <span class=\"ms-2 text-white\">Create </span>\r\n      </button>\r\n\r\n      <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n        <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        Bulk Upload\r\n      </button> -->\r\n\r\n      <button\r\n        type=\"button\"\r\n        [disabled]=\"fixturesList.length <= 0\"\r\n        (click)=\"exportFixtureList()\"\r\n        class=\"btn btn-outline text-nowrap\"\r\n      >\r\n        <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"1.67\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n        Export\r\n      </button>\r\n\r\n      <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <div class=\"toggle-button me-2\" [ngClass]=\"{ selected: viewMode === 'list' }\" (click)=\"toggleViewMode('list')\">\r\n          <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M6.24078 4.54639H15.8906M6.24078 9.00017H15.8906M6.24078 13.4539H15.8906M2.5293 4.54639H2.53672M2.5293 9.00017H2.53672M2.5293 13.4539H2.53672\"\r\n              [attr.stroke]=\"viewMode === 'list' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"toggle-button\" [ngClass]=\"{ selected: viewMode === 'grid' }\" (click)=\"toggleViewMode('grid')\">\r\n          <svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M7.91886 2.31934H2.72278V7.51541H7.91886V2.31934Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M16.0841 2.31934H10.888V7.51541H16.0841V2.31934Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M16.0841 10.4846H10.888V15.6807H16.0841V10.4846Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M7.91886 10.4846H2.72278V15.6807H7.91886V10.4846Z\"\r\n              [attr.stroke]=\"viewMode === 'grid' ? '#009BF3' : '#344054'\"\r\n              stroke-width=\"1.48756\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"isPageLoading; else contentPart\">\r\n    <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #contentPart>\r\n    <div *ngIf=\"fixturesList.length === 0\">\r\n      @if(searchTerm || isFilterApplied){\r\n      <div class=\"row\">\r\n        <div class=\"col-lg-12 my-6\">\r\n          <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n            <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n            <div class=\"nodatamaintext mt-3\">No data found</div>\r\n            <div class=\"nodatasubtext\">There is no result for matching filter and search</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }@else{\r\n      <div class=\"row g-0 py-12\">\r\n        <!-- Single Fixture Creation -->\r\n        <div class=\"col-md-12 pe-md-3\">\r\n          <div class=\"d-flex flex-column align-items-center p-10\">\r\n            <div class=\"text-center mb-8\">\r\n              <div class=\"mb-5\">\r\n                <svg\r\n                  style=\"width: 80px; height: 80px\"\r\n                  width=\"56\"\r\n                  height=\"56\"\r\n                  viewBox=\"0 0 56 56\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                  <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                  <path\r\n                    d=\"M28 24V32M24 28H32M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\"\r\n                    stroke=\"#00A3FF\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n              <h3 class=\"card-title mb-3\">Create fixture</h3>\r\n              <p class=\"card-tagline mb-0\">Start creating fixture manually through step by step</p>\r\n            </div>\r\n            <button\r\n              (click)=\"onClickCreateFixtureLibrary()\"\r\n              type=\"button\"\r\n              class=\"btn btn-outline d-inline-flex align-items-center\"\r\n            >\r\n              <svg class=\"me-2\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M12 5V19M5 12H19\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Create\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Bulk Fixture Creation -->\r\n        <!-- <div class=\"col-md-6 ps-md-3 border-start\">\r\n          <div class=\"d-flex flex-column align-items-center p-10\">\r\n            <div class=\"text-center mb-8\">\r\n              <div class=\"mb-5\">\r\n                <svg\r\n                  style=\"width: 80px; height: 80px\"\r\n                  width=\"56\"\r\n                  height=\"56\"\r\n                  viewBox=\"0 0 95 94\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect x=\"7.5\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                  <rect x=\"7.5\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n                  <path\r\n                    d=\"M62.5 52V58.6667C62.5 59.5507 62.1488 60.3986 61.5237 61.0237C60.8986 61.6488 60.0507 62 59.1667 62H35.8333C34.9493 62 34.1014 61.6488 33.4763 61.0237C32.8512 60.3986 32.5 59.5507 32.5 58.6667V52M55.8333 40.3333L47.5 32M47.5 32L39.1667 40.3333M47.5 32V52\"\r\n                    stroke=\"#00A3FF\"\r\n                    stroke-width=\"3.33333\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n              <h3 class=\"card-title mb-3\">Create fixture using excel template</h3>\r\n              <p class=\"card-tagline mb-0\">You can create a single or a multiple fixtures using the template below</p>\r\n            </div>\r\n            <div class=\"d-flex flex-column gap-2 mb-6\" style=\"width: fit-content\">\r\n              <p class=\"card-description mb-0\">\r\n                Step1 - <a class=\"download-link fw-medium\" (click)=\"downloadEmptyTemplate()\">Download the template here</a>\r\n              </p>\r\n              <p class=\"card-description mb-0\">Step2 - Add your data to the Template File</p>\r\n              <p class=\"card-description mb-0\">Step3 - Upload it below for processing</p>\r\n            </div>\r\n            <button class=\"btn btn-primary d-inline-flex align-items-center\" (click)=\"openBulkUploadModal()\">\r\n              <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"1.67\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n              Upload\r\n            </button>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div *ngIf=\"fixturesList.length != 0\">\r\n      <!-- Fixture list view -->\r\n      <section id=\"list-view\" *ngIf=\"viewMode === 'list'; else gridView\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"w-100 table bottom-border text-nowrap\">\r\n            <thead>\r\n              <tr>\r\n                <th>\r\n                  <span (click)=\"onSortTable('fixtureCategory')\" class=\"cursor-pointer\">\r\n                    Fixture name\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureCategory' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCategory' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th>\r\n                  <span (click)=\"onSortTable('fixtureType')\" class=\"cursor-pointer\">\r\n                    Type\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureType' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureType' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th>Country</th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('fixtureWidth')\" class=\"cursor-pointer\">\r\n                    Width\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureWidth' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureWidth' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('fixtureLength')\" class=\"cursor-pointer\">\r\n                    Height\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'fixtureLength' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureLength' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('shelfConfig')\" class=\"cursor-pointer\">\r\n                    Partitions\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'shelfConfig' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'shelfConfig' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n\r\n                  <svg\r\n                    placement=\"start\"\r\n                    ngbTooltip=\"Partitions are shelves/sections/panel\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"18\"\r\n                    height=\"18\"\r\n                    viewBox=\"0 0 18 18\"\r\n                    fill=\"none\"\r\n                    class=\"ms-2\"\r\n                  >\r\n                    <g clip-path=\"url(#clip0_1_25644)\">\r\n                      <path\r\n                        d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                        stroke=\"#667085\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_1_25644\">\r\n                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </th>\r\n                <th class=\"text-center\">\r\n                  <span (click)=\"onSortTable('templateCount')\" class=\"cursor-pointer\">\r\n                    Templates tagged\r\n                    <i\r\n                      [ngStyle]=\"{ color: sortedColumn === 'templateCount' ? '#009BF3' : '' }\"\r\n                      class=\"fa ms-1 mt-1\"\r\n                      [ngClass]=\"sortOrder === 1 && sortedColumn === 'templateCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n                      aria-hidden=\"true\"\r\n                    ></i>\r\n                  </span>\r\n                </th>\r\n                <th class=\"text-center\">Status</th>\r\n                <th></th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let fixture of fixturesList\">\r\n                <td style=\"max-width: 300px\">\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <!-- <div class=\"thumbnail\"></div> -->\r\n                    <a\r\n                      [routerLink]=\"['/manage/planogram/create-library-fixture']\"\r\n                      [queryParams]=\"{ fixtureId: fixture.id }\"\r\n                      class=\"text-decoration-underline ellipsis\"\r\n                      [ngbTooltip]=\"fixture.name + ' - ' + fixture.width + 'ft'\"\r\n                    >\r\n                      {{ fixture.name }} - {{ fixture.width }}ft\r\n                    </a>\r\n                  </div>\r\n                </td>\r\n                <td>{{ fixture.type | titlecase }}</td>\r\n                <td>\r\n                  <div *ngIf=\"fixture.country?.length; else noCountry\" class=\"country-chip-list\">\r\n                    <span class=\"country-chip\" *ngFor=\"let c of fixture.country\">{{ c }}</span>\r\n                  </div>\r\n                  <ng-template #noCountry>-</ng-template>\r\n                </td>\r\n                <td class=\"text-center\">{{ fixture.width }}ft</td>\r\n                <td class=\"text-center\">{{ fixture.height }}ft</td>\r\n                <td class=\"text-center\">{{ fixture.partitions }}</td>\r\n                <td class=\"text-center\">{{ fixture.templatesTagged }}</td>\r\n                <td class=\"text-center\">\r\n                  <div class=\"badge\" [ngClass]=\"fixture.status\" placement=\"start\" [ngbTooltip]=\"getTooltipText(fixture.status)\">\r\n                    {{ fixture.status | titlecase }}\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"dropdown\">\r\n                    <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                      <ng-container *ngTemplateOutlet=\"verticalDots\"></ng-container>\r\n                    </button>\r\n                    <ul class=\"dropdown-menu\">\r\n                      <li>\r\n                        <a class=\"dropdown-item cursor-pointer\" (click)=\"onEdit(fixture.id, fixture.templatesTagged)\"> Edit </a>\r\n                      </li>\r\n                      <li><a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(fixture.id)\">Duplicate</a></li>\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer text-danger\"\r\n                          (click)=\"onDelete(fixture.id, fixture.templatesTagged)\"\r\n                        >\r\n                          Delete\r\n                        </a>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </section>\r\n\r\n      <!-- Fixture grid view -->\r\n      <ng-template #gridView>\r\n        <section id=\"grid-view\" class=\"table-responsive\">\r\n          <div class=\"row gx-6 gy-4 m-0\">\r\n            <div class=\"col-md-4\" *ngFor=\"let fixture of fixturesList\">\r\n              <div class=\"card\" (click)=\"onClickCard($event, fixture)\">\r\n                <div class=\"card-img\">\r\n                  <div class=\"card-action dropdown\" (click)=\"$event.stopPropagation()\">\r\n                    <button class=\"btn btn-light\" style=\"padding: 12px 21px !important\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n                        <path\r\n                          d=\"M1 9C1 9.55228 1.44771 10 2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44771 8 1 8.44772 1 9Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                        <path\r\n                          d=\"M0.999999 16C0.999999 16.5523 1.44771 17 2 17C2.55228 17 3 16.5523 3 16C3 15.4477 2.55228 15 2 15C1.44771 15 0.999999 15.4477 0.999999 16Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                        <path\r\n                          d=\"M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z\"\r\n                          stroke=\"#101828\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    </button>\r\n                    <ul class=\"dropdown-menu\">\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer\"\r\n                          (click)=\"onEdit(fixture.id, fixture.templatesTagged); $event.stopPropagation()\"\r\n                        >\r\n                          Edit\r\n                        </a>\r\n                      </li>\r\n                      <li>\r\n                        <a class=\"dropdown-item cursor-pointer\" (click)=\"onDuplicate(fixture.id); $event.stopPropagation()\">\r\n                          Duplicate\r\n                        </a>\r\n                      </li>\r\n                      <li>\r\n                        <a\r\n                          class=\"dropdown-item cursor-pointer text-danger\"\r\n                          (click)=\"onDelete(fixture.id, fixture.templatesTagged); $event.stopPropagation()\"\r\n                        >\r\n                          Delete\r\n                        </a>\r\n                      </li>\r\n                    </ul>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <h3 class=\"ellipsis\" [ngbTooltip]=\"fixture.name + ' - ' + fixture.width + 'ft'\">\r\n                    {{ fixture.name }}\r\n                  </h3>\r\n                  <div class=\"badge\" [ngClass]=\"fixture.status\" placement=\"start\" [ngbTooltip]=\"getTooltipText(fixture.status)\">\r\n                    {{ fixture.status | titlecase }}\r\n                  </div>\r\n                </div>\r\n                <div class=\"card-tagline\">\r\n                  {{ fixture.width }}ft x {{ fixture.height }}ft <span>&#8226;</span> {{ fixture.partitions }}\r\n                  <span>&#8226;</span>\r\n                  {{ fixture.type }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </ng-template>\r\n\r\n      <!-- Pagination -->\r\n      <lib-pagination\r\n        class=\"text-start\"\r\n        [itemsPerPage]=\"limit\"\r\n        [currentPage]=\"offset\"\r\n        [totalItems]=\"totalItems\"\r\n        [paginationSizes]=\"paginationSizes\"\r\n        [pageSize]=\"paginationSize()\"\r\n        (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      ></lib-pagination>\r\n    </div>\r\n  </ng-template>\r\n</section>\r\n\r\n<ng-template #verticalDots>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"18\" viewBox=\"0 0 4 18\" fill=\"none\">\r\n    <path\r\n      d=\"M1 9C1 9.55228 1.44771 10 2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44771 8 1 8.44772 1 9Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M0.999999 16C0.999999 16.5523 1.44771 17 2 17C2.55228 17 3 16.5523 3 16C3 15.4477 2.55228 15 2 15C1.44771 15 0.999999 15.4477 0.999999 16Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n    <path\r\n      d=\"M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z\"\r\n      stroke=\"#101828\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    />\r\n  </svg>\r\n</ng-template>\r\n", styles: [".nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.badge.draft{color:#009bf3;background:#eaf8ff}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.country-chip-list{display:flex;flex-wrap:wrap;gap:4px}.country-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:16px;background:var(--Gray-100, #f2f4f7);color:var(--Gray-700, #344054);font-size:12px;font-weight:500;line-height:18px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i4.ToastService }, { type: i2$1.PageInfoService }] });
 
 class VMBulkUploadComponent {
@@ -27380,8 +27494,13 @@ class PlanoConfigurationsComponent {
         const rows = this.brandMetaData.value;
         const seen = new Set();
         const dupes = [];
+        const norm = (v) => (v || "").trim().toLowerCase();
         rows.forEach((r, i) => {
-            const key = `${(r.pidCat || "").trim().toLowerCase()}|${(r.tempGroup || "").trim().toLowerCase()}`;
+            // A row counts as a duplicate only when every field matches another row.
+            // The same Pid Cat + Temp Group with a different Category/Brand/Band is allowed.
+            const key = [r.pidCat, r.tempGroup, r.category, r.brand, r.band]
+                .map(norm)
+                .join("|");
             if (seen.has(key)) {
                 dupes.push({ row: i, combo: `${r.pidCat} / ${r.tempGroup}` });
             }
@@ -27391,7 +27510,7 @@ class PlanoConfigurationsComponent {
         });
         if (dupes.length) {
             const first = dupes[0];
-            this.toast.getErrorToast(`Row ${first.row + 1}: duplicate Pid Cat + Temp Group "${first.combo}"`);
+            this.toast.getErrorToast(`Row ${first.row + 1}: duplicate entry — all fields identical to another row ("${first.combo}")`);
             this.scrollAndFlashBrandMetaField(first.row, "pidCat");
             return;
         }
@@ -32912,7 +33031,7 @@ class PlanoRolloutComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${fixtureData.fixtureCapacity} . VM - ${fixtureData.vmConfig.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -34532,7 +34651,7 @@ class PreviewModalComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  0 . VM - ${fixtureData.vmConfig.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -35876,7 +35995,7 @@ class TemplateAssignStoresComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  0 . VM - ${fixtureData.vmConfig.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -37631,7 +37750,7 @@ class FindAndReplaceComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${fixtureData.fixtureCapacity} . VM - ${fixtureData.vmConfig?.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig?.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -38053,11 +38172,11 @@ class ToolPageHeaderComponent {
     description = "";
     backLink = "/manage/planogram/plano-tools";
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: { title: "title", description: "description", backLink: "backLink" }, ngImport: i0, template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\n  <a\n    class=\"back-btn\"\n    [routerLink]=\"backLink\"\n    aria-label=\"Back to Plano Tools\"\n    title=\"Back to Plano Tools\"\n  >\n    <i class=\"bi bi-arrow-left\"></i>\n  </a>\n  <div class=\"flex-grow-1\">\n    <h4 class=\"title mb-1\">{{ title }}</h4>\n    <p *ngIf=\"description\" class=\"text-muted small mb-0\">{{ description }}</p>\n  </div>\n</div>\n", styles: [".tool-page-header{padding-bottom:.75rem;border-bottom:1px solid #e5e7eb}.tool-page-header .back-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;color:#475569;background:#f1f5f9;text-decoration:none;flex-shrink:0;transition:background .15s,color .15s}.tool-page-header .back-btn:hover{background:#e2e8f0;color:#0f172a}.tool-page-header .back-btn i{font-size:1rem}.tool-page-header .title{font-weight:600;margin:0;color:#0f172a}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: { title: "title", description: "description", backLink: "backLink" }, ngImport: i0, template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\r\n  <a\r\n    class=\"back-btn\"\r\n    [routerLink]=\"backLink\"\r\n    aria-label=\"Back to Plano Tools\"\r\n    title=\"Back to Plano Tools\"\r\n  >\r\n    <i class=\"bi bi-arrow-left\"></i>\r\n  </a>\r\n  <div class=\"flex-grow-1\">\r\n    <h4 class=\"title mb-1\">{{ title }}</h4>\r\n    <p *ngIf=\"description\" class=\"text-muted small mb-0\">{{ description }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".tool-page-header{padding-bottom:.75rem;border-bottom:1px solid #e5e7eb}.tool-page-header .back-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;color:#475569;background:#f1f5f9;text-decoration:none;flex-shrink:0;transition:background .15s,color .15s}.tool-page-header .back-btn:hover{background:#e2e8f0;color:#0f172a}.tool-page-header .back-btn i{font-size:1rem}.tool-page-header .title{font-weight:600;margin:0;color:#0f172a}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-tool-page-header", template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\n  <a\n    class=\"back-btn\"\n    [routerLink]=\"backLink\"\n    aria-label=\"Back to Plano Tools\"\n    title=\"Back to Plano Tools\"\n  >\n    <i class=\"bi bi-arrow-left\"></i>\n  </a>\n  <div class=\"flex-grow-1\">\n    <h4 class=\"title mb-1\">{{ title }}</h4>\n    <p *ngIf=\"description\" class=\"text-muted small mb-0\">{{ description }}</p>\n  </div>\n</div>\n", styles: [".tool-page-header{padding-bottom:.75rem;border-bottom:1px solid #e5e7eb}.tool-page-header .back-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;color:#475569;background:#f1f5f9;text-decoration:none;flex-shrink:0;transition:background .15s,color .15s}.tool-page-header .back-btn:hover{background:#e2e8f0;color:#0f172a}.tool-page-header .back-btn i{font-size:1rem}.tool-page-header .title{font-weight:600;margin:0;color:#0f172a}\n"] }]
+            args: [{ selector: "lib-tool-page-header", template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\r\n  <a\r\n    class=\"back-btn\"\r\n    [routerLink]=\"backLink\"\r\n    aria-label=\"Back to Plano Tools\"\r\n    title=\"Back to Plano Tools\"\r\n  >\r\n    <i class=\"bi bi-arrow-left\"></i>\r\n  </a>\r\n  <div class=\"flex-grow-1\">\r\n    <h4 class=\"title mb-1\">{{ title }}</h4>\r\n    <p *ngIf=\"description\" class=\"text-muted small mb-0\">{{ description }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".tool-page-header{padding-bottom:.75rem;border-bottom:1px solid #e5e7eb}.tool-page-header .back-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;color:#475569;background:#f1f5f9;text-decoration:none;flex-shrink:0;transition:background .15s,color .15s}.tool-page-header .back-btn:hover{background:#e2e8f0;color:#0f172a}.tool-page-header .back-btn i{font-size:1rem}.tool-page-header .title{font-weight:600;margin:0;color:#0f172a}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], description: [{
@@ -39201,7 +39320,7 @@ class PlanoMigrateComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${fixtureData?.fixtureCapacity ?? 0} . VM - ${fixtureData?.vmConfig?.length ?? 0}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData?.shelfConfig)} . VM - ${fixtureData?.vmConfig?.length ?? 0}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -39977,11 +40096,11 @@ class ToolsParentComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolsParentComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: i2$1.GlobalStateService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolsParentComponent, selector: "lib-tools-parent", ngImport: i0, template: "<div class=\"plano-tools-hub\">\n  <div class=\"hub-header mb-4\">\n    <h4 class=\"mb-1\">Plano Tools</h4>\n    <p class=\"text-muted small mb-0\">\n      Utilities for managing planograms, layouts, exports and templates.\n    </p>\n  </div>\n\n  <div class=\"tool-section mb-4\">\n    <h6 class=\"section-title\">Export &amp; Inspect</h6>\n    <div class=\"card-grid\">\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/migrate\">\n        <div class=\"icon\"><i class=\"bi bi-images\"></i></div>\n        <div class=\"title\">Download Layout Images</div>\n        <div class=\"desc\">Export layout images store by store.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\n        <div class=\"icon\"><i class=\"bi bi-bounding-box\"></i></div>\n        <div class=\"title\">Check CAD Output</div>\n        <div class=\"desc\">Paste CAD data and preview the parsed layout.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-files\">\n        <div class=\"icon\"><i class=\"bi bi-folder2-open\"></i></div>\n        <div class=\"title\">CAD Files</div>\n        <div class=\"desc\">List uploaded CAD &amp; Kissflow files for a store.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/data-export\">\n        <div class=\"icon\"><i class=\"bi bi-database-down\"></i></div>\n        <div class=\"title\">Data Export</div>\n        <div class=\"desc\">Query planogram fixtures and export as Excel.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\n        <div class=\"icon\"><i class=\"bi bi-file-earmark-spreadsheet\"></i></div>\n        <div class=\"title\">MBQ &amp; Order</div>\n        <div class=\"desc\">Generate per-store fixture export bundles.</div>\n      </a>\n    </div>\n  </div>\n\n  <div class=\"tool-section mb-4\">\n    <h6 class=\"section-title\">Edit &amp; Modify</h6>\n    <div class=\"card-grid\">\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\n        <div class=\"icon\"><i class=\"bi bi-pencil-square\"></i></div>\n        <div class=\"title\">Allow Edit</div>\n        <div class=\"desc\">Re-enable editing on a published task without losing responses.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\n        <div class=\"icon\"><i class=\"bi bi-input-cursor-text\"></i></div>\n        <div class=\"title\">Modify Fixture Numbers</div>\n        <div class=\"desc\">Renumber fixtures in a planogram.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/layout-touchup\">\n        <div class=\"icon\"><i class=\"bi bi-arrows-move\"></i></div>\n        <div class=\"title\">Layout Touchup</div>\n        <div class=\"desc\">Reposition or resize layout elements without invalidating responses.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/swap-template\">\n        <div class=\"icon\"><i class=\"bi bi-arrow-left-right\"></i></div>\n        <div class=\"title\">Template Swap</div>\n        <div class=\"desc\">Replace one fixture template with another.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/move-bucket\">\n        <div class=\"icon\"><i class=\"bi bi-arrow-down-up\"></i></div>\n        <div class=\"title\">Move Store Bucket</div>\n        <div class=\"desc\">Move a floor between Onboarding and ManagePlano.</div>\n      </a>\n    </div>\n  </div>\n\n  <div class=\"tool-section mb-4\">\n    <h6 class=\"section-title text-danger\">Destructive</h6>\n    <div class=\"card-grid\">\n      <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\n        <div class=\"icon\"><i class=\"bi bi-trash\"></i></div>\n        <div class=\"title\">Delete Task</div>\n        <div class=\"desc\">Remove a task and its responses.</div>\n      </a>\n      <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-floor\">\n        <div class=\"icon\"><i class=\"bi bi-trash3\"></i></div>\n        <div class=\"title\">Delete Floor</div>\n        <div class=\"desc\">Remove a floor and all rows referencing it.</div>\n      </a>\n    </div>\n  </div>\n\n  <div class=\"tool-section\">\n    <h6 class=\"section-title\">Create</h6>\n    <div class=\"card-grid\">\n      <button type=\"button\" class=\"tool-card tool-card-primary\" (click)=\"onClickCreateFixtureTemplate()\">\n        <div class=\"icon\"><i class=\"bi bi-plus-lg text-white\" ></i></div>\n        <div class=\"title\">Create Template</div>\n        <div class=\"desc\">Start a new fixture template from scratch.</div>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".plano-tools-hub{padding:.25rem}.hub-header h4{font-weight:600;color:#0f172a}.section-title{font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;margin-bottom:.75rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.tool-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem 1.1rem;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}.tool-card:hover{border-color:#94a3b8;box-shadow:0 4px 12px #0f172a0f;transform:translateY(-1px)}.tool-card .icon{width:36px;height:36px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.6rem}.tool-card .title{font-weight:600;color:#0f172a;margin-bottom:.25rem}.tool-card .desc{font-size:.825rem;color:#64748b;line-height:1.35}.tool-card.tool-card-danger .icon{background:#fef2f2;color:#dc2626}.tool-card.tool-card-danger:hover{border-color:#fca5a5}.tool-card.tool-card-primary{border-color:#16a34a;background:#f0fdf4}.tool-card.tool-card-primary .icon{background:#16a34a;color:#fff;font-size:1.5rem;line-height:1;font-weight:700}.tool-card.tool-card-primary .title{color:#14532d}.tool-card.tool-card-primary:hover{border-color:#15803d;box-shadow:0 4px 14px #16a34a2e}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolsParentComponent, selector: "lib-tools-parent", ngImport: i0, template: "<div class=\"plano-tools-hub\">\r\n  <div class=\"hub-header mb-4\">\r\n    <h4 class=\"mb-1\">Plano Tools</h4>\r\n    <p class=\"text-muted small mb-0\">\r\n      Utilities for managing planograms, layouts, exports and templates.\r\n    </p>\r\n  </div>\r\n\r\n  <div class=\"tool-section mb-4\">\r\n    <h6 class=\"section-title\">Export &amp; Inspect</h6>\r\n    <div class=\"card-grid\">\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/migrate\">\r\n        <div class=\"icon\"><i class=\"bi bi-images\"></i></div>\r\n        <div class=\"title\">Download Layout Images</div>\r\n        <div class=\"desc\">Export layout images store by store.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\r\n        <div class=\"icon\"><i class=\"bi bi-bounding-box\"></i></div>\r\n        <div class=\"title\">Check CAD Output</div>\r\n        <div class=\"desc\">Paste CAD data and preview the parsed layout.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-files\">\r\n        <div class=\"icon\"><i class=\"bi bi-folder2-open\"></i></div>\r\n        <div class=\"title\">CAD Files</div>\r\n        <div class=\"desc\">List uploaded CAD &amp; Kissflow files for a store.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/data-export\">\r\n        <div class=\"icon\"><i class=\"bi bi-database-down\"></i></div>\r\n        <div class=\"title\">Data Export</div>\r\n        <div class=\"desc\">Query planogram fixtures and export as Excel.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\r\n        <div class=\"icon\"><i class=\"bi bi-file-earmark-spreadsheet\"></i></div>\r\n        <div class=\"title\">MBQ &amp; Order</div>\r\n        <div class=\"desc\">Generate per-store fixture export bundles.</div>\r\n      </a>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tool-section mb-4\">\r\n    <h6 class=\"section-title\">Edit &amp; Modify</h6>\r\n    <div class=\"card-grid\">\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\r\n        <div class=\"icon\"><i class=\"bi bi-pencil-square\"></i></div>\r\n        <div class=\"title\">Allow Edit</div>\r\n        <div class=\"desc\">Re-enable editing on a published task without losing responses.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\r\n        <div class=\"icon\"><i class=\"bi bi-input-cursor-text\"></i></div>\r\n        <div class=\"title\">Modify Fixture Numbers</div>\r\n        <div class=\"desc\">Renumber fixtures in a planogram.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/layout-touchup\">\r\n        <div class=\"icon\"><i class=\"bi bi-arrows-move\"></i></div>\r\n        <div class=\"title\">Layout Touchup</div>\r\n        <div class=\"desc\">Reposition or resize layout elements without invalidating responses.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/swap-template\">\r\n        <div class=\"icon\"><i class=\"bi bi-arrow-left-right\"></i></div>\r\n        <div class=\"title\">Template Swap</div>\r\n        <div class=\"desc\">Replace one fixture template with another.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/move-bucket\">\r\n        <div class=\"icon\"><i class=\"bi bi-arrow-down-up\"></i></div>\r\n        <div class=\"title\">Move Store Bucket</div>\r\n        <div class=\"desc\">Move a floor between Onboarding and ManagePlano.</div>\r\n      </a>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tool-section mb-4\">\r\n    <h6 class=\"section-title text-danger\">Destructive</h6>\r\n    <div class=\"card-grid\">\r\n      <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\r\n        <div class=\"icon\"><i class=\"bi bi-trash\"></i></div>\r\n        <div class=\"title\">Delete Task</div>\r\n        <div class=\"desc\">Remove a task and its responses.</div>\r\n      </a>\r\n      <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-floor\">\r\n        <div class=\"icon\"><i class=\"bi bi-trash3\"></i></div>\r\n        <div class=\"title\">Delete Floor</div>\r\n        <div class=\"desc\">Remove a floor and all rows referencing it.</div>\r\n      </a>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tool-section\">\r\n    <h6 class=\"section-title\">Create</h6>\r\n    <div class=\"card-grid\">\r\n      <button type=\"button\" class=\"tool-card tool-card-primary\" (click)=\"onClickCreateFixtureTemplate()\">\r\n        <div class=\"icon\"><i class=\"bi bi-plus-lg text-white\" ></i></div>\r\n        <div class=\"title\">Create Template</div>\r\n        <div class=\"desc\">Start a new fixture template from scratch.</div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".plano-tools-hub{padding:.25rem}.hub-header h4{font-weight:600;color:#0f172a}.section-title{font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;margin-bottom:.75rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.tool-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem 1.1rem;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}.tool-card:hover{border-color:#94a3b8;box-shadow:0 4px 12px #0f172a0f;transform:translateY(-1px)}.tool-card .icon{width:36px;height:36px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.6rem}.tool-card .title{font-weight:600;color:#0f172a;margin-bottom:.25rem}.tool-card .desc{font-size:.825rem;color:#64748b;line-height:1.35}.tool-card.tool-card-danger .icon{background:#fef2f2;color:#dc2626}.tool-card.tool-card-danger:hover{border-color:#fca5a5}.tool-card.tool-card-primary{border-color:#16a34a;background:#f0fdf4}.tool-card.tool-card-primary .icon{background:#16a34a;color:#fff;font-size:1.5rem;line-height:1;font-weight:700}.tool-card.tool-card-primary .title{color:#14532d}.tool-card.tool-card-primary:hover{border-color:#15803d;box-shadow:0 4px 14px #16a34a2e}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolsParentComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-tools-parent", template: "<div class=\"plano-tools-hub\">\n  <div class=\"hub-header mb-4\">\n    <h4 class=\"mb-1\">Plano Tools</h4>\n    <p class=\"text-muted small mb-0\">\n      Utilities for managing planograms, layouts, exports and templates.\n    </p>\n  </div>\n\n  <div class=\"tool-section mb-4\">\n    <h6 class=\"section-title\">Export &amp; Inspect</h6>\n    <div class=\"card-grid\">\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/migrate\">\n        <div class=\"icon\"><i class=\"bi bi-images\"></i></div>\n        <div class=\"title\">Download Layout Images</div>\n        <div class=\"desc\">Export layout images store by store.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\n        <div class=\"icon\"><i class=\"bi bi-bounding-box\"></i></div>\n        <div class=\"title\">Check CAD Output</div>\n        <div class=\"desc\">Paste CAD data and preview the parsed layout.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-files\">\n        <div class=\"icon\"><i class=\"bi bi-folder2-open\"></i></div>\n        <div class=\"title\">CAD Files</div>\n        <div class=\"desc\">List uploaded CAD &amp; Kissflow files for a store.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/data-export\">\n        <div class=\"icon\"><i class=\"bi bi-database-down\"></i></div>\n        <div class=\"title\">Data Export</div>\n        <div class=\"desc\">Query planogram fixtures and export as Excel.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\n        <div class=\"icon\"><i class=\"bi bi-file-earmark-spreadsheet\"></i></div>\n        <div class=\"title\">MBQ &amp; Order</div>\n        <div class=\"desc\">Generate per-store fixture export bundles.</div>\n      </a>\n    </div>\n  </div>\n\n  <div class=\"tool-section mb-4\">\n    <h6 class=\"section-title\">Edit &amp; Modify</h6>\n    <div class=\"card-grid\">\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\n        <div class=\"icon\"><i class=\"bi bi-pencil-square\"></i></div>\n        <div class=\"title\">Allow Edit</div>\n        <div class=\"desc\">Re-enable editing on a published task without losing responses.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\n        <div class=\"icon\"><i class=\"bi bi-input-cursor-text\"></i></div>\n        <div class=\"title\">Modify Fixture Numbers</div>\n        <div class=\"desc\">Renumber fixtures in a planogram.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/layout-touchup\">\n        <div class=\"icon\"><i class=\"bi bi-arrows-move\"></i></div>\n        <div class=\"title\">Layout Touchup</div>\n        <div class=\"desc\">Reposition or resize layout elements without invalidating responses.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/swap-template\">\n        <div class=\"icon\"><i class=\"bi bi-arrow-left-right\"></i></div>\n        <div class=\"title\">Template Swap</div>\n        <div class=\"desc\">Replace one fixture template with another.</div>\n      </a>\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/move-bucket\">\n        <div class=\"icon\"><i class=\"bi bi-arrow-down-up\"></i></div>\n        <div class=\"title\">Move Store Bucket</div>\n        <div class=\"desc\">Move a floor between Onboarding and ManagePlano.</div>\n      </a>\n    </div>\n  </div>\n\n  <div class=\"tool-section mb-4\">\n    <h6 class=\"section-title text-danger\">Destructive</h6>\n    <div class=\"card-grid\">\n      <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\n        <div class=\"icon\"><i class=\"bi bi-trash\"></i></div>\n        <div class=\"title\">Delete Task</div>\n        <div class=\"desc\">Remove a task and its responses.</div>\n      </a>\n      <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-floor\">\n        <div class=\"icon\"><i class=\"bi bi-trash3\"></i></div>\n        <div class=\"title\">Delete Floor</div>\n        <div class=\"desc\">Remove a floor and all rows referencing it.</div>\n      </a>\n    </div>\n  </div>\n\n  <div class=\"tool-section\">\n    <h6 class=\"section-title\">Create</h6>\n    <div class=\"card-grid\">\n      <button type=\"button\" class=\"tool-card tool-card-primary\" (click)=\"onClickCreateFixtureTemplate()\">\n        <div class=\"icon\"><i class=\"bi bi-plus-lg text-white\" ></i></div>\n        <div class=\"title\">Create Template</div>\n        <div class=\"desc\">Start a new fixture template from scratch.</div>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".plano-tools-hub{padding:.25rem}.hub-header h4{font-weight:600;color:#0f172a}.section-title{font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;margin-bottom:.75rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.tool-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem 1.1rem;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}.tool-card:hover{border-color:#94a3b8;box-shadow:0 4px 12px #0f172a0f;transform:translateY(-1px)}.tool-card .icon{width:36px;height:36px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.6rem}.tool-card .title{font-weight:600;color:#0f172a;margin-bottom:.25rem}.tool-card .desc{font-size:.825rem;color:#64748b;line-height:1.35}.tool-card.tool-card-danger .icon{background:#fef2f2;color:#dc2626}.tool-card.tool-card-danger:hover{border-color:#fca5a5}.tool-card.tool-card-primary{border-color:#16a34a;background:#f0fdf4}.tool-card.tool-card-primary .icon{background:#16a34a;color:#fff;font-size:1.5rem;line-height:1;font-weight:700}.tool-card.tool-card-primary .title{color:#14532d}.tool-card.tool-card-primary:hover{border-color:#15803d;box-shadow:0 4px 14px #16a34a2e}\n"] }]
+            args: [{ selector: "lib-tools-parent", template: "<div class=\"plano-tools-hub\">\r\n  <div class=\"hub-header mb-4\">\r\n    <h4 class=\"mb-1\">Plano Tools</h4>\r\n    <p class=\"text-muted small mb-0\">\r\n      Utilities for managing planograms, layouts, exports and templates.\r\n    </p>\r\n  </div>\r\n\r\n  <div class=\"tool-section mb-4\">\r\n    <h6 class=\"section-title\">Export &amp; Inspect</h6>\r\n    <div class=\"card-grid\">\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/migrate\">\r\n        <div class=\"icon\"><i class=\"bi bi-images\"></i></div>\r\n        <div class=\"title\">Download Layout Images</div>\r\n        <div class=\"desc\">Export layout images store by store.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\r\n        <div class=\"icon\"><i class=\"bi bi-bounding-box\"></i></div>\r\n        <div class=\"title\">Check CAD Output</div>\r\n        <div class=\"desc\">Paste CAD data and preview the parsed layout.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-files\">\r\n        <div class=\"icon\"><i class=\"bi bi-folder2-open\"></i></div>\r\n        <div class=\"title\">CAD Files</div>\r\n        <div class=\"desc\">List uploaded CAD &amp; Kissflow files for a store.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/data-export\">\r\n        <div class=\"icon\"><i class=\"bi bi-database-down\"></i></div>\r\n        <div class=\"title\">Data Export</div>\r\n        <div class=\"desc\">Query planogram fixtures and export as Excel.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\r\n        <div class=\"icon\"><i class=\"bi bi-file-earmark-spreadsheet\"></i></div>\r\n        <div class=\"title\">MBQ &amp; Order</div>\r\n        <div class=\"desc\">Generate per-store fixture export bundles.</div>\r\n      </a>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tool-section mb-4\">\r\n    <h6 class=\"section-title\">Edit &amp; Modify</h6>\r\n    <div class=\"card-grid\">\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\r\n        <div class=\"icon\"><i class=\"bi bi-pencil-square\"></i></div>\r\n        <div class=\"title\">Allow Edit</div>\r\n        <div class=\"desc\">Re-enable editing on a published task without losing responses.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\r\n        <div class=\"icon\"><i class=\"bi bi-input-cursor-text\"></i></div>\r\n        <div class=\"title\">Modify Fixture Numbers</div>\r\n        <div class=\"desc\">Renumber fixtures in a planogram.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/layout-touchup\">\r\n        <div class=\"icon\"><i class=\"bi bi-arrows-move\"></i></div>\r\n        <div class=\"title\">Layout Touchup</div>\r\n        <div class=\"desc\">Reposition or resize layout elements without invalidating responses.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/swap-template\">\r\n        <div class=\"icon\"><i class=\"bi bi-arrow-left-right\"></i></div>\r\n        <div class=\"title\">Template Swap</div>\r\n        <div class=\"desc\">Replace one fixture template with another.</div>\r\n      </a>\r\n      <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/move-bucket\">\r\n        <div class=\"icon\"><i class=\"bi bi-arrow-down-up\"></i></div>\r\n        <div class=\"title\">Move Store Bucket</div>\r\n        <div class=\"desc\">Move a floor between Onboarding and ManagePlano.</div>\r\n      </a>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tool-section mb-4\">\r\n    <h6 class=\"section-title text-danger\">Destructive</h6>\r\n    <div class=\"card-grid\">\r\n      <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\r\n        <div class=\"icon\"><i class=\"bi bi-trash\"></i></div>\r\n        <div class=\"title\">Delete Task</div>\r\n        <div class=\"desc\">Remove a task and its responses.</div>\r\n      </a>\r\n      <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-floor\">\r\n        <div class=\"icon\"><i class=\"bi bi-trash3\"></i></div>\r\n        <div class=\"title\">Delete Floor</div>\r\n        <div class=\"desc\">Remove a floor and all rows referencing it.</div>\r\n      </a>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tool-section\">\r\n    <h6 class=\"section-title\">Create</h6>\r\n    <div class=\"card-grid\">\r\n      <button type=\"button\" class=\"tool-card tool-card-primary\" (click)=\"onClickCreateFixtureTemplate()\">\r\n        <div class=\"icon\"><i class=\"bi bi-plus-lg text-white\" ></i></div>\r\n        <div class=\"title\">Create Template</div>\r\n        <div class=\"desc\">Start a new fixture template from scratch.</div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".plano-tools-hub{padding:.25rem}.hub-header h4{font-weight:600;color:#0f172a}.section-title{font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;margin-bottom:.75rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.tool-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem 1.1rem;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}.tool-card:hover{border-color:#94a3b8;box-shadow:0 4px 12px #0f172a0f;transform:translateY(-1px)}.tool-card .icon{width:36px;height:36px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.6rem}.tool-card .title{font-weight:600;color:#0f172a;margin-bottom:.25rem}.tool-card .desc{font-size:.825rem;color:#64748b;line-height:1.35}.tool-card.tool-card-danger .icon{background:#fef2f2;color:#dc2626}.tool-card.tool-card-danger:hover{border-color:#fca5a5}.tool-card.tool-card-primary{border-color:#16a34a;background:#f0fdf4}.tool-card.tool-card-primary .icon{background:#16a34a;color:#fff;font-size:1.5rem;line-height:1;font-weight:700}.tool-card.tool-card-primary .title{color:#14532d}.tool-card.tool-card-primary:hover{border-color:#15803d;box-shadow:0 4px 14px #16a34a2e}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }] });
 
 class MisplacedProductFixtureComponent {
@@ -41035,7 +41154,7 @@ class ProductLocatorComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${fixtureData.fixtureCapacity} . VM - ${fixtureData.vmConfig?.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig?.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -42814,7 +42933,7 @@ class MerchComplianceComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${fixtureData.fixtureCapacity} . VM - ${fixtureData.vmConfig?.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig?.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -44706,7 +44825,7 @@ class PlanoComparisonComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${fixtureData.fixtureCapacity} . VM - ${fixtureData.vmConfig?.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig?.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -46526,7 +46645,7 @@ class PlanoOverviewComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${fixtureData.fixtureCapacity} . VM - ${fixtureData.vmConfig?.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig?.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -51108,7 +51227,7 @@ class CollectionUpdateAiComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${fixtureData?.length} . Products -  ${fixtureData.fixtureCapacity} . VM - ${fixtureData.vmConfig?.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${fixtureData?.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig?.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -55684,7 +55803,7 @@ class PrepareTemplateComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${fixtureData.shelfConfig?.length} . Products -  ${fixtureData.fixtureCapacity} . VM - ${fixtureData.vmConfig?.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${fixtureData.shelfConfig?.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig?.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -57425,7 +57544,7 @@ class ReviewReplaceComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${fixtureData.shelfConfig?.length} . Products -  ${fixtureData.fixtureCapacity} . VM - ${fixtureData.vmConfig?.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${fixtureData.shelfConfig?.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig?.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -61865,6 +61984,80 @@ class OnboardStorePlanoComponent {
             }
         });
     }
+    // templateGroupNames that legitimately carry no brand/zone allocation, so they
+    // must never be flagged red for "missing allocation". "CL" is Contact Lens,
+    // which the IVM brand/zone logic does not allocate. Compared case-insensitively.
+    allocationExemptGroups = new Set(["cl"]);
+    isAllocationExempt(fixture) {
+        const group = `${fixture?.templateGroupName ?? ""}`.trim().toLowerCase();
+        return !!group && this.allocationExemptGroups.has(group);
+    }
+    // True if `brand` holds at least one non-empty value. Shelf/fixture brand
+    // names are arrays post-allocation but can also arrive as a bare string, so
+    // both shapes are handled.
+    hasBrandValue(brand) {
+        if (Array.isArray(brand)) {
+            return brand.some((b) => b != null && `${b}`.trim() !== "");
+        }
+        return brand != null && `${brand}`.trim() !== "";
+    }
+    // Post-allocation check: is this fixture missing an allocation it should have?
+    // Allocation writes a brand at the fixture level and/or onto each product shelf
+    // (grouped into zones Top/Mid/Bottom/All). Wall and floor (center) fixtures are
+    // treated identically. A fixture is flagged when:
+    //   - it has no allocation anywhere (empty fixture), or
+    //   - its shelves are allocated but a product zone was left without a brand.
+    // "space", pure VM-only fixtures, and exempt groups (e.g. CL) are never flagged.
+    hasZoneWithoutAllocation(fixture) {
+        if (!fixture || fixture.fixtureName === "space")
+            return false;
+        if (this.isAllocationExempt(fixture))
+            return false;
+        const shelves = Array.isArray(fixture.shelfConfig)
+            ? fixture.shelfConfig
+            : [];
+        // VM-only shelves never hold product, so they can't carry an allocation
+        // and are excluded from the zone check (mirrors `actualShelves`).
+        const productShelves = shelves.filter((s) => s?.shelfType !== "vmonly");
+        const level = `${fixture?.productResolutionLevel ?? ""}`.toUpperCase();
+        // L1 fixtures hold a single fixture-level allocation (no per-zone split), so
+        // they are complete as long as the fixture carries a brand.
+        if (level === "L1") {
+            return !this.hasBrandValue(fixture?.productBrandName);
+        }
+        // No product shelves to break into zones. A pure VM-only fixture (it has
+        // shelves, but all VM-only) holds no product and is never flagged; anything
+        // else (e.g. a floor fixture with no shelfConfig) is judged by its
+        // fixture-level brand.
+        if (!productShelves.length) {
+            if (shelves.length > 0)
+                return false;
+            return !this.hasBrandValue(fixture?.productBrandName);
+        }
+        // Per-zone (L2/L3): every product zone must carry at least one brand. The
+        // fixture-level aggregate brand is intentionally ignored here so a stale or
+        // aggregate value can't mask a zone the allocation actually left empty.
+        const zoneHasBrand = new Map();
+        for (const shelf of productShelves) {
+            const zone = `${shelf?.zone ?? ""}`.trim() || "All";
+            zoneHasBrand.set(zone, (zoneHasBrand.get(zone) ?? false) ||
+                this.hasBrandValue(shelf?.productBrandName));
+        }
+        return Array.from(zoneHasBrand.values()).some((allocated) => !allocated);
+    }
+    // Stamps `allocationInvalid` onto every fixture so the canvas can paint
+    // unallocated fixtures red and the Complete button can gate on them. Only
+    // meaningful once allocation has run; otherwise all flags are cleared.
+    validateZoneAllocations() {
+        const fixtures = this.allFixtureInstances;
+        if (!this.isAllocationRun) {
+            fixtures.forEach((f) => (f.allocationInvalid = false));
+            return;
+        }
+        fixtures.forEach((f) => {
+            f.allocationInvalid = this.hasZoneWithoutAllocation(f);
+        });
+    }
     get hasInvalidHeaderFixtures() {
         if (!this.ivmAliasKeys.size)
             return false;
@@ -61901,6 +62094,27 @@ class OnboardStorePlanoComponent {
         parts.push("Fix them to run allocation");
         return parts.join(" ");
     }
+    // After allocation, true if any fixture still has a zone without an
+    // allocation. Used to keep the Complete Allocation button disabled.
+    get hasUnallocatedZoneFixtures() {
+        if (!this.isAllocationRun)
+            return false;
+        return this.allFixtureInstances.some((f) => f.allocationInvalid);
+    }
+    get unallocatedZoneFixtureCount() {
+        if (!this.isAllocationRun)
+            return 0;
+        return this.allFixtureInstances.filter((f) => f.allocationInvalid)
+            .length;
+    }
+    get unallocatedZonesTooltip() {
+        const count = this.unallocatedZoneFixtureCount;
+        if (!count)
+            return "";
+        return (`${count} fixture${count === 1 ? "" : "s"} ` +
+            `${count === 1 ? "has" : "have"} a zone without any allocation. ` +
+            `Fix the highlighted fixtures to complete allocation.`);
+    }
     get isEditLayoutAllowed() {
         if (this.layoutForm.disabled && !this.isAllocationRun) {
             if (this.getStatus === "draft") {
@@ -62604,6 +62818,17 @@ class OnboardStorePlanoComponent {
         let fixtureColor;
         if (fixtureData.fixtureName === "space")
             return;
+        // Single guard driving the red treatment. Header/library mismatches flag a
+        // fixture before allocation; `allocationInvalid` flags a fixture with a zone
+        // left without an allocation after allocation has run. All paint red.
+        const fixtureInvalid = fixtureData.headerInvalid ||
+            fixtureData.libraryInvalid ||
+            fixtureData.allocationInvalid;
+        // When flagged, the whole fixture frame (not just the header/shelves) is
+        // painted red so empty fixtures — which have little or no shelf area to
+        // colour — are still unmistakably highlighted.
+        const frameStroke = fixtureInvalid ? "#D92D20" : "#51C1FF";
+        const frameFill = fixtureInvalid ? "#FEE4E2" : "white";
         // Resolve the angle the fixture group will render at. For first-render of a
         // CAD-uploaded layout, the wall angle is the source of truth (otherwise we
         // honor the fixture's own saved angle). When that angle lies in the
@@ -62646,9 +62871,9 @@ class OnboardStorePlanoComponent {
             height: height,
             rx: radius,
             ry: radius,
-            stroke: fixtureColor?.primary ?? "#51C1FF",
+            stroke: fixtureColor?.primary ?? frameStroke,
             strokeWidth: 0.27,
-            fill: "white",
+            fill: frameFill,
         });
         const topWidth = width / 1.05;
         const topHeight = (15 / 100) * height;
@@ -62661,7 +62886,7 @@ class OnboardStorePlanoComponent {
             height: topHeight,
             rx: radius,
             ry: radius,
-            stroke: fixtureColor?.primary ?? "#51C1FF",
+            stroke: fixtureColor?.primary ?? frameStroke,
             strokeWidth: 0.27,
             fill: "white",
         });
@@ -62673,7 +62898,7 @@ class OnboardStorePlanoComponent {
          L ${topX} ${topY + innerBoxHeight} 
          L ${topX} ${topY + radius} 
          Q ${topX} ${topY} ${topX + radius} ${topY} Z`, {
-            stroke: fixtureColor?.primary ?? "#51C1FF",
+            stroke: fixtureColor?.primary ?? frameStroke,
             strokeWidth: 0.27,
             fill: "transparent",
         });
@@ -62708,7 +62933,7 @@ class OnboardStorePlanoComponent {
      Q ${topX} ${secondBoxY + innerBoxHeight} ${topX} ${secondBoxY + innerBoxHeight - radius} 
      L ${topX} ${secondBoxY} Z`, {
             fill: "#344054",
-            stroke: fixtureColor?.primary ?? "#51C1FF",
+            stroke: fixtureColor?.primary ?? frameStroke,
             strokeWidth: 0.27,
         });
         let fontSize = 5;
@@ -62741,9 +62966,9 @@ class OnboardStorePlanoComponent {
             height: midHeight,
             rx: radius,
             ry: radius,
-            stroke: fixtureColor?.primary ?? "#51C1FF",
+            stroke: fixtureColor?.primary ?? frameStroke,
             strokeWidth: 0.27,
-            fill: "white",
+            fill: frameFill,
         });
         const shelfCount = fixtureData.shelfConfig?.length;
         const boxHeight = midHeight / (shelfCount + 2);
@@ -62757,12 +62982,12 @@ class OnboardStorePlanoComponent {
          Q ${midX} ${firstBoxY} ${midX + radius} ${firstBoxY} Z`, {
             fill: fixtureColor?.fill
                 ? fixtureColor?.fill
-                : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
+                : fixtureInvalid
                     ? "#D92D20"
                     : "#EAF8FF",
             stroke: fixtureColor?.primary
                 ? fixtureColor?.primary
-                : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
+                : fixtureInvalid
                     ? "#D92D20"
                     : "#6BCAFF",
             strokeWidth: 0.27,
@@ -62773,7 +62998,7 @@ class OnboardStorePlanoComponent {
             fontSize: 7,
             fontFamily: "Inter",
             fontWeight: "600",
-            fill: (fixtureData.headerInvalid || fixtureData.libraryInvalid) ? "#fff" : "#101828",
+            fill: fixtureInvalid ? "#fff" : "#101828",
             originX: "center",
             originY: "center",
             width: midWidth,
@@ -62792,7 +63017,7 @@ class OnboardStorePlanoComponent {
                 // stroke: '#51C1FF',
                 stroke: fixtureColor?.primary
                     ? fixtureColor?.primary
-                    : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
+                    : fixtureInvalid
                         ? "#D92D20"
                         : "#51C1FF",
                 strokeWidth: 0.27,
@@ -62848,7 +63073,7 @@ class OnboardStorePlanoComponent {
                     height: boxHeight,
                     stroke: fixtureColor?.primary
                         ? fixtureColor?.primary
-                        : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
+                        : fixtureInvalid
                             ? "#D92D20"
                             : "#51C1FF",
                     strokeWidth: 0.27,
@@ -62958,7 +63183,7 @@ class OnboardStorePlanoComponent {
                         height: boxHeight,
                         stroke: fixtureColor?.primary
                             ? fixtureColor?.primary
-                            : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
+                            : fixtureInvalid
                                 ? "#D92D20"
                                 : "#51C1FF",
                         strokeWidth: 0.27,
@@ -62996,7 +63221,7 @@ class OnboardStorePlanoComponent {
                 const groupBottomLine = new fabric.Line([midX, groupBottomY, midX + midWidth, groupBottomY], {
                     stroke: fixtureColor?.primary
                         ? fixtureColor?.primary
-                        : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
+                        : fixtureInvalid
                             ? "#D92D20"
                             : "#51C1FF",
                     strokeWidth: 1,
@@ -63193,12 +63418,12 @@ class OnboardStorePlanoComponent {
          L ${midX} ${lastBoxY} Z`, {
             fill: fixtureColor?.fill
                 ? fixtureColor?.fill
-                : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
+                : fixtureInvalid
                     ? "#FEE4E2"
                     : "#EAF8FF",
             stroke: fixtureColor?.primary
                 ? fixtureColor?.primary
-                : (fixtureData.headerInvalid || fixtureData.libraryInvalid)
+                : fixtureInvalid
                     ? "#D92D20"
                     : "#6BCAFF",
             strokeWidth: 0.27,
@@ -63230,7 +63455,7 @@ class OnboardStorePlanoComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${fixtureData?.fixtureCapacity ?? 0} . VM - ${fixtureData?.vmConfig?.length ?? 0}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData?.shelfConfig)} . VM - ${fixtureData?.vmConfig?.length ?? 0}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -64918,6 +65143,10 @@ class OnboardStorePlanoComponent {
             return;
         }
         if (this.isAllocationRun) {
+            if (this.hasUnallocatedZoneFixtures) {
+                this.toastService.getErrorToast("Some fixtures have a zone without any allocation. Please fix all red fixtures before completing allocation.");
+                return;
+            }
             try {
                 await this.modalService.open(this.completeAllocationModalRef, {
                     centered: true,
@@ -64957,6 +65186,7 @@ class OnboardStorePlanoComponent {
         this.isAllocationRun = false;
         this.floorDataBeforeAllocation = null;
         this.extractAllFixtures(this.floorData);
+        this.validateZoneAllocations();
         this.disableEdit = false;
         this.selectedFixture = null;
         this.selectedFixtureData = null;
@@ -65057,6 +65287,7 @@ class OnboardStorePlanoComponent {
                 this.isAllocationRun = true;
                 this.disableEdit = true;
                 this.extractAllFixtures(this.floorData);
+                this.validateZoneAllocations();
                 this.selectedFixtureData = null;
                 this.renderFloor(false);
                 this.togglePanel("left", true);
@@ -65375,11 +65606,11 @@ class OnboardStorePlanoComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardStorePlanoComponent, deps: [{ token: StoreBuilderService }, { token: i2.ActivatedRoute }, { token: i1$2.FormBuilder }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i4.ToastService }, { token: i1$1.NgbModal }, { token: i2$1.PageInfoService }, { token: i5.Location }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardStorePlanoComponent, selector: "lib-onboard-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }, { propertyName: "revertAllocationModalRef", first: true, predicate: ["revertAllocationModal"], descendants: true }, { propertyName: "completeAllocationModalRef", first: true, predicate: ["completeAllocationModal"], descendants: true }, { propertyName: "bodyAccordion", first: true, predicate: ["bodyAccordion"], descendants: true }], ngImport: i0, template: "<section id=\"onboard-plano\">\r\n    <!-- Loading State -->\r\n    <div *ngIf=\"isPageLoading\" class=\"row\">\r\n        <div class=\"col-12 m-0\">\r\n            <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-6\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Content -->\r\n    <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n        <!-- Header Accordion -->\r\n        <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n            <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n                <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n                    <div class=\"d-flex gap-4 align-items-center\">\r\n                        <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n                            <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n                        </div>\r\n                        <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n                            [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n                        </lib-reactive-select>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex align-items-center gap-4\">\r\n                        <div *ngIf=\"!editFixture\" class=\"updateClass\"\r\n                            [ngbTooltip]=\"floorData?.updatedByName ? 'Updated by ' + floorData.updatedByName : null\">\r\n                            Last Update: {{ floorData?.lastUpdateIso | date:'d MMM yyyy, hh:mm a' }}\r\n                        </div>\r\n\r\n                        <div class=\"d-flex gap-4 align-items-center\">\r\n                            <!-- Edit Fixture Mode -->\r\n                            <ng-container *ngIf=\"editFixture\">\r\n                                <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n                                    (click)=\"onFixturePageCancel()\">\r\n                                    Cancel\r\n                                </button>\r\n                                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                                    Save & Close\r\n                                </button>\r\n                            </ng-container>\r\n                            <button ngbAccordionButton></button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <div id=\"header\" class=\"row mx-0 gap-3\">\r\n                            <!-- Plano Completion -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3 class=\"d-flex align-items-center gap-2\">\r\n                                    Plano Completion %\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n                                        <g clip-path=\"url(#clip0_1517_129805)\">\r\n                                            <path\r\n                                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                                stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1517_129805\">\r\n                                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </h3>\r\n                                <div class=\"row align-items-center mt-2\">\r\n                                    <div class=\"col-9\">\r\n                                        <div class=\"progress\" style=\"height: 4px\">\r\n                                            <div class=\"progress-bar\" [ngClass]=\"\r\n                          [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n                                                [style]=\"'width:' + getProgressValue + '%'\"\r\n                                                [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n                                                aria-valuemax=\"100\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Layout -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n                                <div class=\"indicator mt-2\"\r\n                                    [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n                                    {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Fixtures -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n                                <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n                                    {{ getStatusText }}\r\n                                </div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div id=\"body\" class=\"row\">\r\n            <!-- Left Column -->\r\n            <div\r\n                [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n                <div class=\"s-card\">\r\n                    <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n                        <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n                            <!-- Walls Section -->\r\n                            <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                                <ng-container formArrayName=\"walls\">\r\n                                    <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                                        <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\"\r\n                                            class=\"mb-5\">\r\n                                            <div class=\"d-flex\" ngbAccordionHeader>\r\n                                                <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                                    <div class=\"d-flex align-items-center\">\r\n                                                        <span class=\"me-2 wall-label\">\r\n                                                            {{ group.get(\"elementType\")?.value | titlecase }}\r\n                                                            {{ group.get(\"elementNumber\")?.value }}\r\n                                                        </span>\r\n\r\n                                                        @if(layoutForm.enabled){\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                        d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                                                        fill=\"#475467\" stroke=\"#475467\"\r\n                                                                        stroke-width=\"0.00064\" />\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_62_8)\">\r\n                                                                        <path\r\n                                                                            d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                                                            fill=\"#475467\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_62_8\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\"\r\n                                                                ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_63_25)\">\r\n                                                                        <path\r\n                                                                            d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                                                            fill=\"#F32B2B\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_63_25\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                        }\r\n                                                    </div>\r\n                                                    <div class=\"divider\"></div>\r\n                                                </button>\r\n                                            </div>\r\n\r\n                                            <div ngbAccordionCollapse>\r\n                                                <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                                    <ng-template>\r\n                                                        <div style=\"min-height: 50px\" dndDropzone\r\n                                                            (dndDrop)=\"onDrop($event, i)\">\r\n                                                            <!-- Fixtures -->\r\n                                                            <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                                                <div formArrayName=\"fixtures\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                                                        <div dndDropzone\r\n                                                                            (dndDrop)=\"onDrop($event, i, j)\"\r\n                                                                            [formGroupName]=\"j\"\r\n                                                                            [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n                                                                            [dndEffectAllowed]=\"'all'\"\r\n                                                                            class=\"row g-0 mb-5 fixture-row\"\r\n                                                                            [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n                                                                            [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                                    <svg dndDragImageRef\r\n                                                                                        [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                                                                        width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                                        <path\r\n                                                                                            d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                            fill=\"grey\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-10\">\r\n                                                                                <lib-reactive-select\r\n                                                                                    formControlName=\"fixtureConfigId\"\r\n                                                                                    [idField]=\"'_id'\"\r\n                                                                                    [nameField]=\"'name'\"\r\n                                                                                    [data]=\"fixtureTemplates\"\r\n                                                                                    [label]=\"'Fixture ' + (j + 1)\"\r\n                                                                                    [subTextField]=\"'subtext'\"\r\n                                                                                    [search]=\"true\">\r\n                                                                                </lib-reactive-select>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewFixture('wall', i)\">\r\n                                                                    Add fixture\r\n                                                                </a>\r\n                                                            </div>\r\n\r\n                                                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                            <!-- Other Elements -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                                                <div formArrayName=\"otherElements\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                                                        <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                            <div class=\"col-11\">\r\n                                                                                <label class=\"form-label mb-1\">Element\r\n                                                                                    {{ j + 1 }}</label>\r\n\r\n                                                                                <!-- Dropdown bound to 'type' -->\r\n                                                                                <lib-reactive-select [idField]=\"'value'\"\r\n                                                                                    [nameField]=\"'label'\"\r\n                                                                                    [data]=\"otherElementList\"\r\n                                                                                    [id]=\"'elementLabel' + j\"\r\n                                                                                    formControlName=\"type\">\r\n                                                                                </lib-reactive-select>\r\n\r\n                                                                                <!-- Show custom text input only when 'Others' is selected -->\r\n                                                                                <input\r\n                                                                                    *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                                    type=\"text\"\r\n                                                                                    class=\"form-control mt-2\"\r\n                                                                                    formControlName=\"customName\"\r\n                                                                                    placeholder=\"Enter custom element name\" />\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewOtherElements('wall', i)\">\r\n                                                                    Add element\r\n                                                                </a>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-template #addWallAction>\r\n                                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                    class=\"btn btn-secondary w-100 p-2\">\r\n                                    Insert new wall\r\n                                </button>\r\n                            </ng-template>\r\n\r\n                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                            <!-- Floor Section -->\r\n                            <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n                                <div class=\"d-flex\" ngbAccordionHeader>\r\n                                    <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                        <span class=\"me-2 wall-label\">Floor</span>\r\n                                        <div class=\"divider\"></div>\r\n                                    </button>\r\n                                </div>\r\n\r\n                                <div ngbAccordionCollapse>\r\n                                    <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                        <ng-template>\r\n                                            <div style=\"min-height: 50px\" dndDropzone\r\n                                                (dndDrop)=\"onDrop($event, 'floor')\">\r\n                                                <!-- Floor Fixtures -->\r\n                                                <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                                                    <div formArrayName=\"floorFixtures\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                                                            <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n                                                                [formGroupName]=\"j\"\r\n                                                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n                                                                [dndEffectAllowed]=\"'all'\"\r\n                                                                [dndDisableDragIf]=\"layoutForm.disabled\"\r\n                                                                class=\"row g-0 mb-5 fixture-row\"\r\n                                                                [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                        <svg dndDragImageRef\r\n                                                                            style=\"cursor: move; opacity: 0.5\"\r\n                                                                            width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                            <path\r\n                                                                                d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                fill=\"grey\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-10\">\r\n                                                                    <lib-reactive-select\r\n                                                                        formControlName=\"fixtureConfigId\"\r\n                                                                        [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n                                                                        [data]=\"fixtureTemplates\"\r\n                                                                        [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n                                                                        [subTextField]=\"'subtext'\">\r\n                                                                    </lib-reactive-select>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"deleteFixture('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewFixture('floor')\">\r\n                                                        Add fixture\r\n                                                    </a>\r\n                                                </div>\r\n\r\n                                                <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                <!-- Floor Other Elements -->\r\n                                                <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                                                    <div formArrayName=\"floorOtherElements\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                                                            <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                <div class=\"col-11\">\r\n                                                                    <label class=\"form-label mb-1\">Element\r\n                                                                        {{ j + 1 }}</label>\r\n\r\n                                                                    <!-- Dropdown for type -->\r\n                                                                    <lib-reactive-select [idField]=\"'value'\"\r\n                                                                        [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n                                                                        [id]=\"'floorElementLabel' + j\"\r\n                                                                        formControlName=\"type\">\r\n                                                                    </lib-reactive-select>\r\n\r\n                                                                    <!-- Conditional input for custom name -->\r\n                                                                    <input\r\n                                                                        *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                        type=\"text\" class=\"form-control mt-2\"\r\n                                                                        formControlName=\"customName\"\r\n                                                                        placeholder=\"Enter custom element name\" />\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewOtherElements('floor')\">\r\n                                                        Add element\r\n                                                    </a>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Center Column -->\r\n            <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n                <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n                    <!-- Canvas View -->\r\n                    <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n                    <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n                        style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n                        <!-- Entrance Button -->\r\n                        <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n                            [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n                            <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n                                [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n                                Add Entrance\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- Cancel edit -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'allocationPending'){\r\n                                <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }@else {\r\n                                <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Save -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'draft'){\r\n                                <button type=\"button\"\r\n                                    class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                    style=\"min-width: 130px;\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save as Draft\r\n                                </button>\r\n                            }@else{\r\n                                <button type=\"button\"\r\n                                    style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n                                    class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n                             clicking compacts the layout and drops the user into edit\r\n                             mode so the change is revertable via Cancel and persistable\r\n                             via Save / Submit. -->\r\n                        @if(canShowCompactToggle && layoutForm.disabled){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                (click)=\"compactLayout()\"\r\n                                ngbTooltip=\"Compact layout.\"\r\n                                container=\"body\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\">\r\n                                    <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n                                    <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n                                    <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n                                    <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n                                </svg>\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Edit Button -->\r\n                        @if(isEditLayoutAllowed){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                                (click)=\"onClickEdit()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_1322_5325)\">\r\n                                        <path\r\n                                            d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_1322_5325\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                Edit\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Cancel Button (From allocation) -->\r\n                        <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n                            class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n                            Cancel\r\n                        </button>\r\n\r\n\r\n                        <!-- Run allocation / Complete -->\r\n                        @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n                            <span\r\n                                [ngbTooltip]=\"!isAllocationRun ? invalidFixturesTooltip : ''\"\r\n                                container=\"body\">\r\n                                <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                    class=\"btn btn-primary text-nowrap\"\r\n                                    [disabled]=\"!isAllocationRun && hasInvalidFixtures\"\r\n                                    (click)=\"onClickRunAllocation()\">\r\n                                    {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n                                </button>\r\n                            </span>\r\n                        }\r\n\r\n                        <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n                            class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n                            Submit for merch allocation\r\n                        </button>\r\n\r\n                        <!-- Rotate Button -->\r\n                        <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n                            (click)=\"rotateCanvas(canvas,90)\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                                    fill=\"#1D2939\" />\r\n                                <path\r\n                                    d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                                    stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </button>\r\n\r\n                        <!-- Download Button -->\r\n                        <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                            (click)=\"downloadCanvas()\">\r\n                            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n                                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                    stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <path\r\n                                        d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                    <path\r\n                                        d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                </g>\r\n                            </svg>\r\n                        </button>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <!-- Panel Collapse Handlers -->\r\n                <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n                    <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n\r\n                <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n                    <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Edit Fixture Body -->\r\n            <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n                <div id=\"edit-body\" class=\"row\">\r\n                    <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Basic details\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Products\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                                Visual Merchandise\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n\r\n                    <div class=\"col\">\r\n                        <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n                            <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"\r\n                                [libraryCategories]=\"libraryCategories\"\r\n                                [libraryByCategory]=\"libraryByCategory\"\r\n                                [allowCategoryAndWidthEdit]=\"true\">\r\n                            </lib-instance-basic-details>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n                            <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-products>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n                            <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-vms>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n                [style]=\"{'min-width': isRightPanelCollapsed ? '0' :  isAllocationRun ?'680px' : '464px' }\">\r\n                <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n    <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n        <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n            (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n            [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n            [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n    <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer w-100 p-4 rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke mt-0 animate title\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n            <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n                the verification section. Are you sure you want to continue?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div>\r\n            <h2 class=\"mb-3\">Approve & Submit</h2>\r\n            <p>\r\n                This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n                placements are as per the plan.\r\n            </p>\r\n        </div>\r\n        @if(hasInvalidFixtures) {\r\n            <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n                style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    style=\"flex-shrink: 0; margin-top: 1px;\">\r\n                    <path\r\n                        d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n                        stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n                    @if(hasInvalidHeaderFixtures) {\r\n                        <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong><br/>\r\n                    }\r\n                    @if(hasInvalidLibraryFixtures) {\r\n                        <strong>{{invalidLibraryFixtureCount}} fixture{{invalidLibraryFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidLibraryFixtureCount === 1 ? 'does' : 'do'}} not match any library entry.</strong><br/>\r\n                    }\r\n                    These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n                </p>\r\n            </div>\r\n        }\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n                <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n                <path\r\n                    d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n                    stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Revert Allocation</h2>\r\n            <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n            </p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n                [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n            <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n                verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n                <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}#onboard-plano .fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}#onboard-plano .fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode", "libraryCategories", "libraryByCategory", "allowCategoryAndWidthEdit"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: OnboardFixtureComponent, selector: "onboard-fixture", inputs: ["fixtureData", "isAllocationRun", "allFixtures"], outputs: ["onClose"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OnboardStorePlanoComponent, selector: "lib-onboard-store-plano", host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["baseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["canvasContainer"], descendants: true }, { propertyName: "applyLogicsModalRef", first: true, predicate: ["applyLogics"], descendants: true }, { propertyName: "approveLayoutModalRef", first: true, predicate: ["approveLayoutModal"], descendants: true }, { propertyName: "revertAllocationModalRef", first: true, predicate: ["revertAllocationModal"], descendants: true }, { propertyName: "completeAllocationModalRef", first: true, predicate: ["completeAllocationModal"], descendants: true }, { propertyName: "bodyAccordion", first: true, predicate: ["bodyAccordion"], descendants: true }], ngImport: i0, template: "<section id=\"onboard-plano\">\r\n    <!-- Loading State -->\r\n    <div *ngIf=\"isPageLoading\" class=\"row\">\r\n        <div class=\"col-12 m-0\">\r\n            <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-6\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Content -->\r\n    <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n        <!-- Header Accordion -->\r\n        <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n            <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n                <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n                    <div class=\"d-flex gap-4 align-items-center\">\r\n                        <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n                            <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n                        </div>\r\n                        <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n                            [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n                        </lib-reactive-select>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex align-items-center gap-4\">\r\n                        <div *ngIf=\"!editFixture\" class=\"updateClass\"\r\n                            [ngbTooltip]=\"floorData?.updatedByName ? 'Updated by ' + floorData.updatedByName : null\">\r\n                            Last Update: {{ floorData?.lastUpdateIso | date:'d MMM yyyy, hh:mm a' }}\r\n                        </div>\r\n\r\n                        <div class=\"d-flex gap-4 align-items-center\">\r\n                            <!-- Edit Fixture Mode -->\r\n                            <ng-container *ngIf=\"editFixture\">\r\n                                <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n                                    (click)=\"onFixturePageCancel()\">\r\n                                    Cancel\r\n                                </button>\r\n                                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                                    Save & Close\r\n                                </button>\r\n                            </ng-container>\r\n                            <button ngbAccordionButton></button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <div id=\"header\" class=\"row mx-0 gap-3\">\r\n                            <!-- Plano Completion -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3 class=\"d-flex align-items-center gap-2\">\r\n                                    Plano Completion %\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n                                        <g clip-path=\"url(#clip0_1517_129805)\">\r\n                                            <path\r\n                                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                                stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1517_129805\">\r\n                                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </h3>\r\n                                <div class=\"row align-items-center mt-2\">\r\n                                    <div class=\"col-9\">\r\n                                        <div class=\"progress\" style=\"height: 4px\">\r\n                                            <div class=\"progress-bar\" [ngClass]=\"\r\n                          [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n                                                [style]=\"'width:' + getProgressValue + '%'\"\r\n                                                [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n                                                aria-valuemax=\"100\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Layout -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n                                <div class=\"indicator mt-2\"\r\n                                    [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n                                    {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Fixtures -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n                                <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n                                    {{ getStatusText }}\r\n                                </div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div id=\"body\" class=\"row\">\r\n            <!-- Left Column -->\r\n            <div\r\n                [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n                <div class=\"s-card\">\r\n                    <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n                        <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n                            <!-- Walls Section -->\r\n                            <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                                <ng-container formArrayName=\"walls\">\r\n                                    <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                                        <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\"\r\n                                            class=\"mb-5\">\r\n                                            <div class=\"d-flex\" ngbAccordionHeader>\r\n                                                <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                                    <div class=\"d-flex align-items-center\">\r\n                                                        <span class=\"me-2 wall-label\">\r\n                                                            {{ group.get(\"elementType\")?.value | titlecase }}\r\n                                                            {{ group.get(\"elementNumber\")?.value }}\r\n                                                        </span>\r\n\r\n                                                        @if(layoutForm.enabled){\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                        d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                                                        fill=\"#475467\" stroke=\"#475467\"\r\n                                                                        stroke-width=\"0.00064\" />\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_62_8)\">\r\n                                                                        <path\r\n                                                                            d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                                                            fill=\"#475467\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_62_8\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\"\r\n                                                                ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_63_25)\">\r\n                                                                        <path\r\n                                                                            d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                                                            fill=\"#F32B2B\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_63_25\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                        }\r\n                                                    </div>\r\n                                                    <div class=\"divider\"></div>\r\n                                                </button>\r\n                                            </div>\r\n\r\n                                            <div ngbAccordionCollapse>\r\n                                                <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                                    <ng-template>\r\n                                                        <div style=\"min-height: 50px\" dndDropzone\r\n                                                            (dndDrop)=\"onDrop($event, i)\">\r\n                                                            <!-- Fixtures -->\r\n                                                            <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                                                <div formArrayName=\"fixtures\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                                                        <div dndDropzone\r\n                                                                            (dndDrop)=\"onDrop($event, i, j)\"\r\n                                                                            [formGroupName]=\"j\"\r\n                                                                            [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n                                                                            [dndEffectAllowed]=\"'all'\"\r\n                                                                            class=\"row g-0 mb-5 fixture-row\"\r\n                                                                            [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n                                                                            [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                                    <svg dndDragImageRef\r\n                                                                                        [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                                                                        width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                                        <path\r\n                                                                                            d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                            fill=\"grey\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-10\">\r\n                                                                                <lib-reactive-select\r\n                                                                                    formControlName=\"fixtureConfigId\"\r\n                                                                                    [idField]=\"'_id'\"\r\n                                                                                    [nameField]=\"'name'\"\r\n                                                                                    [data]=\"fixtureTemplates\"\r\n                                                                                    [label]=\"'Fixture ' + (j + 1)\"\r\n                                                                                    [subTextField]=\"'subtext'\"\r\n                                                                                    [search]=\"true\">\r\n                                                                                </lib-reactive-select>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewFixture('wall', i)\">\r\n                                                                    Add fixture\r\n                                                                </a>\r\n                                                            </div>\r\n\r\n                                                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                            <!-- Other Elements -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                                                <div formArrayName=\"otherElements\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                                                        <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                            <div class=\"col-11\">\r\n                                                                                <label class=\"form-label mb-1\">Element\r\n                                                                                    {{ j + 1 }}</label>\r\n\r\n                                                                                <!-- Dropdown bound to 'type' -->\r\n                                                                                <lib-reactive-select [idField]=\"'value'\"\r\n                                                                                    [nameField]=\"'label'\"\r\n                                                                                    [data]=\"otherElementList\"\r\n                                                                                    [id]=\"'elementLabel' + j\"\r\n                                                                                    formControlName=\"type\">\r\n                                                                                </lib-reactive-select>\r\n\r\n                                                                                <!-- Show custom text input only when 'Others' is selected -->\r\n                                                                                <input\r\n                                                                                    *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                                    type=\"text\"\r\n                                                                                    class=\"form-control mt-2\"\r\n                                                                                    formControlName=\"customName\"\r\n                                                                                    placeholder=\"Enter custom element name\" />\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewOtherElements('wall', i)\">\r\n                                                                    Add element\r\n                                                                </a>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-template #addWallAction>\r\n                                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                    class=\"btn btn-secondary w-100 p-2\">\r\n                                    Insert new wall\r\n                                </button>\r\n                            </ng-template>\r\n\r\n                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                            <!-- Floor Section -->\r\n                            <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n                                <div class=\"d-flex\" ngbAccordionHeader>\r\n                                    <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                        <span class=\"me-2 wall-label\">Floor</span>\r\n                                        <div class=\"divider\"></div>\r\n                                    </button>\r\n                                </div>\r\n\r\n                                <div ngbAccordionCollapse>\r\n                                    <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                        <ng-template>\r\n                                            <div style=\"min-height: 50px\" dndDropzone\r\n                                                (dndDrop)=\"onDrop($event, 'floor')\">\r\n                                                <!-- Floor Fixtures -->\r\n                                                <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                                                    <div formArrayName=\"floorFixtures\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                                                            <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n                                                                [formGroupName]=\"j\"\r\n                                                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n                                                                [dndEffectAllowed]=\"'all'\"\r\n                                                                [dndDisableDragIf]=\"layoutForm.disabled\"\r\n                                                                class=\"row g-0 mb-5 fixture-row\"\r\n                                                                [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                        <svg dndDragImageRef\r\n                                                                            style=\"cursor: move; opacity: 0.5\"\r\n                                                                            width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                            <path\r\n                                                                                d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                fill=\"grey\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-10\">\r\n                                                                    <lib-reactive-select\r\n                                                                        formControlName=\"fixtureConfigId\"\r\n                                                                        [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n                                                                        [data]=\"fixtureTemplates\"\r\n                                                                        [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n                                                                        [subTextField]=\"'subtext'\">\r\n                                                                    </lib-reactive-select>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"deleteFixture('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewFixture('floor')\">\r\n                                                        Add fixture\r\n                                                    </a>\r\n                                                </div>\r\n\r\n                                                <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                <!-- Floor Other Elements -->\r\n                                                <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                                                    <div formArrayName=\"floorOtherElements\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                                                            <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                <div class=\"col-11\">\r\n                                                                    <label class=\"form-label mb-1\">Element\r\n                                                                        {{ j + 1 }}</label>\r\n\r\n                                                                    <!-- Dropdown for type -->\r\n                                                                    <lib-reactive-select [idField]=\"'value'\"\r\n                                                                        [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n                                                                        [id]=\"'floorElementLabel' + j\"\r\n                                                                        formControlName=\"type\">\r\n                                                                    </lib-reactive-select>\r\n\r\n                                                                    <!-- Conditional input for custom name -->\r\n                                                                    <input\r\n                                                                        *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                        type=\"text\" class=\"form-control mt-2\"\r\n                                                                        formControlName=\"customName\"\r\n                                                                        placeholder=\"Enter custom element name\" />\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewOtherElements('floor')\">\r\n                                                        Add element\r\n                                                    </a>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Center Column -->\r\n            <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n                <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n                    <!-- Canvas View -->\r\n                    <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n                    <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n                        style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n                        <!-- Entrance Button -->\r\n                        <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n                            [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n                            <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n                                [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n                                Add Entrance\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- Cancel edit -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'allocationPending'){\r\n                                <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }@else {\r\n                                <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Save -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'draft'){\r\n                                <button type=\"button\"\r\n                                    class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                    style=\"min-width: 130px;\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save as Draft\r\n                                </button>\r\n                            }@else{\r\n                                <button type=\"button\"\r\n                                    style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n                                    class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n                             clicking compacts the layout and drops the user into edit\r\n                             mode so the change is revertable via Cancel and persistable\r\n                             via Save / Submit. -->\r\n                        @if(canShowCompactToggle && layoutForm.disabled){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                (click)=\"compactLayout()\"\r\n                                ngbTooltip=\"Compact layout.\"\r\n                                container=\"body\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\">\r\n                                    <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n                                    <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n                                    <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n                                    <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n                                </svg>\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Edit Button -->\r\n                        @if(isEditLayoutAllowed){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                                (click)=\"onClickEdit()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_1322_5325)\">\r\n                                        <path\r\n                                            d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_1322_5325\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                Edit\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Cancel Button (From allocation) -->\r\n                        <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n                            class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n                            Cancel\r\n                        </button>\r\n\r\n\r\n                        <!-- Run allocation / Complete -->\r\n                        @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n                            <span\r\n                                [ngbTooltip]=\"!isAllocationRun ? invalidFixturesTooltip : unallocatedZonesTooltip\"\r\n                                container=\"body\">\r\n                                <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                    class=\"btn btn-primary text-nowrap\"\r\n                                    [disabled]=\"(!isAllocationRun && hasInvalidFixtures) || (isAllocationRun && hasUnallocatedZoneFixtures)\"\r\n                                    (click)=\"onClickRunAllocation()\">\r\n                                    {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n                                </button>\r\n                            </span>\r\n                        }\r\n\r\n                        <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n                            class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n                            Submit for merch allocation\r\n                        </button>\r\n\r\n                        <!-- Rotate Button -->\r\n                        <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n                            (click)=\"rotateCanvas(canvas,90)\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                                    fill=\"#1D2939\" />\r\n                                <path\r\n                                    d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                                    stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </button>\r\n\r\n                        <!-- Download Button -->\r\n                        <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                            (click)=\"downloadCanvas()\">\r\n                            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n                                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                    stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <path\r\n                                        d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                    <path\r\n                                        d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                </g>\r\n                            </svg>\r\n                        </button>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <!-- Panel Collapse Handlers -->\r\n                <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n                    <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n\r\n                <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n                    <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Edit Fixture Body -->\r\n            <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n                <div id=\"edit-body\" class=\"row\">\r\n                    <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Basic details\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Products\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                                Visual Merchandise\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n\r\n                    <div class=\"col\">\r\n                        <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n                            <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"\r\n                                [libraryCategories]=\"libraryCategories\"\r\n                                [libraryByCategory]=\"libraryByCategory\"\r\n                                [allowCategoryAndWidthEdit]=\"true\">\r\n                            </lib-instance-basic-details>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n                            <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-products>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n                            <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-vms>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n                [style]=\"{'min-width': isRightPanelCollapsed ? '0' :  isAllocationRun ?'680px' : '464px' }\">\r\n                <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n    <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n        <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n            (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n            [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n            [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n    <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer w-100 p-4 rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke mt-0 animate title\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n            <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n                the verification section. Are you sure you want to continue?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div>\r\n            <h2 class=\"mb-3\">Approve & Submit</h2>\r\n            <p>\r\n                This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n                placements are as per the plan.\r\n            </p>\r\n        </div>\r\n        @if(hasInvalidFixtures) {\r\n            <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n                style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    style=\"flex-shrink: 0; margin-top: 1px;\">\r\n                    <path\r\n                        d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n                        stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n                    @if(hasInvalidHeaderFixtures) {\r\n                        <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong><br/>\r\n                    }\r\n                    @if(hasInvalidLibraryFixtures) {\r\n                        <strong>{{invalidLibraryFixtureCount}} fixture{{invalidLibraryFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidLibraryFixtureCount === 1 ? 'does' : 'do'}} not match any library entry.</strong><br/>\r\n                    }\r\n                    These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n                </p>\r\n            </div>\r\n        }\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n                <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n                <path\r\n                    d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n                    stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Revert Allocation</h2>\r\n            <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n            </p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n                [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n            <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n                verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n                <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}#onboard-plano .fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}#onboard-plano .fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "directive", type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "directive", type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i9.DndDragImageRefDirective, selector: "[dndDragImageRef]" }, { kind: "component", type: InstanceBasicDetailsComponent, selector: "lib-instance-basic-details", inputs: ["fixtureData", "editMode", "isSubmitted", "revertOnEdit", "zoneEditMode", "libraryCategories", "libraryByCategory", "allowCategoryAndWidthEdit"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceProductsComponent, selector: "lib-instance-products", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit", "zoneEditMode"], outputs: ["submitEvent"] }, { kind: "component", type: InstanceVmsComponent, selector: "lib-instance-vms", inputs: ["fixtureData", "editMode", "isSubmitted", "isRollout", "revertOnEdit"], outputs: ["submitEvent"] }, { kind: "component", type: OnboardFixtureComponent, selector: "onboard-fixture", inputs: ["fixtureData", "isAllocationRun", "allFixtures"], outputs: ["onClose"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OnboardStorePlanoComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-onboard-store-plano", providers: [TitleCasePipe], template: "<section id=\"onboard-plano\">\r\n    <!-- Loading State -->\r\n    <div *ngIf=\"isPageLoading\" class=\"row\">\r\n        <div class=\"col-12 m-0\">\r\n            <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-6\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Content -->\r\n    <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n        <!-- Header Accordion -->\r\n        <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n            <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n                <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n                    <div class=\"d-flex gap-4 align-items-center\">\r\n                        <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n                            <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n                        </div>\r\n                        <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n                            [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n                        </lib-reactive-select>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex align-items-center gap-4\">\r\n                        <div *ngIf=\"!editFixture\" class=\"updateClass\"\r\n                            [ngbTooltip]=\"floorData?.updatedByName ? 'Updated by ' + floorData.updatedByName : null\">\r\n                            Last Update: {{ floorData?.lastUpdateIso | date:'d MMM yyyy, hh:mm a' }}\r\n                        </div>\r\n\r\n                        <div class=\"d-flex gap-4 align-items-center\">\r\n                            <!-- Edit Fixture Mode -->\r\n                            <ng-container *ngIf=\"editFixture\">\r\n                                <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n                                    (click)=\"onFixturePageCancel()\">\r\n                                    Cancel\r\n                                </button>\r\n                                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                                    Save & Close\r\n                                </button>\r\n                            </ng-container>\r\n                            <button ngbAccordionButton></button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <div id=\"header\" class=\"row mx-0 gap-3\">\r\n                            <!-- Plano Completion -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3 class=\"d-flex align-items-center gap-2\">\r\n                                    Plano Completion %\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n                                        <g clip-path=\"url(#clip0_1517_129805)\">\r\n                                            <path\r\n                                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                                stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1517_129805\">\r\n                                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </h3>\r\n                                <div class=\"row align-items-center mt-2\">\r\n                                    <div class=\"col-9\">\r\n                                        <div class=\"progress\" style=\"height: 4px\">\r\n                                            <div class=\"progress-bar\" [ngClass]=\"\r\n                          [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n                                                [style]=\"'width:' + getProgressValue + '%'\"\r\n                                                [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n                                                aria-valuemax=\"100\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Layout -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n                                <div class=\"indicator mt-2\"\r\n                                    [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n                                    {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Fixtures -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n                                <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n                                    {{ getStatusText }}\r\n                                </div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div id=\"body\" class=\"row\">\r\n            <!-- Left Column -->\r\n            <div\r\n                [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n                <div class=\"s-card\">\r\n                    <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n                        <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n                            <!-- Walls Section -->\r\n                            <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                                <ng-container formArrayName=\"walls\">\r\n                                    <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                                        <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\"\r\n                                            class=\"mb-5\">\r\n                                            <div class=\"d-flex\" ngbAccordionHeader>\r\n                                                <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                                    <div class=\"d-flex align-items-center\">\r\n                                                        <span class=\"me-2 wall-label\">\r\n                                                            {{ group.get(\"elementType\")?.value | titlecase }}\r\n                                                            {{ group.get(\"elementNumber\")?.value }}\r\n                                                        </span>\r\n\r\n                                                        @if(layoutForm.enabled){\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                        d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                                                        fill=\"#475467\" stroke=\"#475467\"\r\n                                                                        stroke-width=\"0.00064\" />\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_62_8)\">\r\n                                                                        <path\r\n                                                                            d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                                                            fill=\"#475467\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_62_8\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\"\r\n                                                                ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_63_25)\">\r\n                                                                        <path\r\n                                                                            d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                                                            fill=\"#F32B2B\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_63_25\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                        }\r\n                                                    </div>\r\n                                                    <div class=\"divider\"></div>\r\n                                                </button>\r\n                                            </div>\r\n\r\n                                            <div ngbAccordionCollapse>\r\n                                                <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                                    <ng-template>\r\n                                                        <div style=\"min-height: 50px\" dndDropzone\r\n                                                            (dndDrop)=\"onDrop($event, i)\">\r\n                                                            <!-- Fixtures -->\r\n                                                            <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                                                <div formArrayName=\"fixtures\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                                                        <div dndDropzone\r\n                                                                            (dndDrop)=\"onDrop($event, i, j)\"\r\n                                                                            [formGroupName]=\"j\"\r\n                                                                            [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n                                                                            [dndEffectAllowed]=\"'all'\"\r\n                                                                            class=\"row g-0 mb-5 fixture-row\"\r\n                                                                            [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n                                                                            [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                                    <svg dndDragImageRef\r\n                                                                                        [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                                                                        width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                                        <path\r\n                                                                                            d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                            fill=\"grey\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-10\">\r\n                                                                                <lib-reactive-select\r\n                                                                                    formControlName=\"fixtureConfigId\"\r\n                                                                                    [idField]=\"'_id'\"\r\n                                                                                    [nameField]=\"'name'\"\r\n                                                                                    [data]=\"fixtureTemplates\"\r\n                                                                                    [label]=\"'Fixture ' + (j + 1)\"\r\n                                                                                    [subTextField]=\"'subtext'\"\r\n                                                                                    [search]=\"true\">\r\n                                                                                </lib-reactive-select>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewFixture('wall', i)\">\r\n                                                                    Add fixture\r\n                                                                </a>\r\n                                                            </div>\r\n\r\n                                                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                            <!-- Other Elements -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                                                <div formArrayName=\"otherElements\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                                                        <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                            <div class=\"col-11\">\r\n                                                                                <label class=\"form-label mb-1\">Element\r\n                                                                                    {{ j + 1 }}</label>\r\n\r\n                                                                                <!-- Dropdown bound to 'type' -->\r\n                                                                                <lib-reactive-select [idField]=\"'value'\"\r\n                                                                                    [nameField]=\"'label'\"\r\n                                                                                    [data]=\"otherElementList\"\r\n                                                                                    [id]=\"'elementLabel' + j\"\r\n                                                                                    formControlName=\"type\">\r\n                                                                                </lib-reactive-select>\r\n\r\n                                                                                <!-- Show custom text input only when 'Others' is selected -->\r\n                                                                                <input\r\n                                                                                    *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                                    type=\"text\"\r\n                                                                                    class=\"form-control mt-2\"\r\n                                                                                    formControlName=\"customName\"\r\n                                                                                    placeholder=\"Enter custom element name\" />\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewOtherElements('wall', i)\">\r\n                                                                    Add element\r\n                                                                </a>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-template #addWallAction>\r\n                                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                    class=\"btn btn-secondary w-100 p-2\">\r\n                                    Insert new wall\r\n                                </button>\r\n                            </ng-template>\r\n\r\n                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                            <!-- Floor Section -->\r\n                            <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n                                <div class=\"d-flex\" ngbAccordionHeader>\r\n                                    <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                        <span class=\"me-2 wall-label\">Floor</span>\r\n                                        <div class=\"divider\"></div>\r\n                                    </button>\r\n                                </div>\r\n\r\n                                <div ngbAccordionCollapse>\r\n                                    <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                        <ng-template>\r\n                                            <div style=\"min-height: 50px\" dndDropzone\r\n                                                (dndDrop)=\"onDrop($event, 'floor')\">\r\n                                                <!-- Floor Fixtures -->\r\n                                                <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                                                    <div formArrayName=\"floorFixtures\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                                                            <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n                                                                [formGroupName]=\"j\"\r\n                                                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n                                                                [dndEffectAllowed]=\"'all'\"\r\n                                                                [dndDisableDragIf]=\"layoutForm.disabled\"\r\n                                                                class=\"row g-0 mb-5 fixture-row\"\r\n                                                                [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                        <svg dndDragImageRef\r\n                                                                            style=\"cursor: move; opacity: 0.5\"\r\n                                                                            width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                            <path\r\n                                                                                d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                fill=\"grey\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-10\">\r\n                                                                    <lib-reactive-select\r\n                                                                        formControlName=\"fixtureConfigId\"\r\n                                                                        [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n                                                                        [data]=\"fixtureTemplates\"\r\n                                                                        [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n                                                                        [subTextField]=\"'subtext'\">\r\n                                                                    </lib-reactive-select>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"deleteFixture('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewFixture('floor')\">\r\n                                                        Add fixture\r\n                                                    </a>\r\n                                                </div>\r\n\r\n                                                <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                <!-- Floor Other Elements -->\r\n                                                <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                                                    <div formArrayName=\"floorOtherElements\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                                                            <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                <div class=\"col-11\">\r\n                                                                    <label class=\"form-label mb-1\">Element\r\n                                                                        {{ j + 1 }}</label>\r\n\r\n                                                                    <!-- Dropdown for type -->\r\n                                                                    <lib-reactive-select [idField]=\"'value'\"\r\n                                                                        [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n                                                                        [id]=\"'floorElementLabel' + j\"\r\n                                                                        formControlName=\"type\">\r\n                                                                    </lib-reactive-select>\r\n\r\n                                                                    <!-- Conditional input for custom name -->\r\n                                                                    <input\r\n                                                                        *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                        type=\"text\" class=\"form-control mt-2\"\r\n                                                                        formControlName=\"customName\"\r\n                                                                        placeholder=\"Enter custom element name\" />\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewOtherElements('floor')\">\r\n                                                        Add element\r\n                                                    </a>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Center Column -->\r\n            <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n                <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n                    <!-- Canvas View -->\r\n                    <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n                    <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n                        style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n                        <!-- Entrance Button -->\r\n                        <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n                            [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n                            <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n                                [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n                                Add Entrance\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- Cancel edit -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'allocationPending'){\r\n                                <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }@else {\r\n                                <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Save -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'draft'){\r\n                                <button type=\"button\"\r\n                                    class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                    style=\"min-width: 130px;\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save as Draft\r\n                                </button>\r\n                            }@else{\r\n                                <button type=\"button\"\r\n                                    style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n                                    class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n                             clicking compacts the layout and drops the user into edit\r\n                             mode so the change is revertable via Cancel and persistable\r\n                             via Save / Submit. -->\r\n                        @if(canShowCompactToggle && layoutForm.disabled){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                (click)=\"compactLayout()\"\r\n                                ngbTooltip=\"Compact layout.\"\r\n                                container=\"body\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\">\r\n                                    <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n                                    <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n                                    <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n                                    <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n                                </svg>\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Edit Button -->\r\n                        @if(isEditLayoutAllowed){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                                (click)=\"onClickEdit()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_1322_5325)\">\r\n                                        <path\r\n                                            d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_1322_5325\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                Edit\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Cancel Button (From allocation) -->\r\n                        <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n                            class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n                            Cancel\r\n                        </button>\r\n\r\n\r\n                        <!-- Run allocation / Complete -->\r\n                        @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n                            <span\r\n                                [ngbTooltip]=\"!isAllocationRun ? invalidFixturesTooltip : ''\"\r\n                                container=\"body\">\r\n                                <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                    class=\"btn btn-primary text-nowrap\"\r\n                                    [disabled]=\"!isAllocationRun && hasInvalidFixtures\"\r\n                                    (click)=\"onClickRunAllocation()\">\r\n                                    {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n                                </button>\r\n                            </span>\r\n                        }\r\n\r\n                        <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n                            class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n                            Submit for merch allocation\r\n                        </button>\r\n\r\n                        <!-- Rotate Button -->\r\n                        <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n                            (click)=\"rotateCanvas(canvas,90)\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                                    fill=\"#1D2939\" />\r\n                                <path\r\n                                    d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                                    stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </button>\r\n\r\n                        <!-- Download Button -->\r\n                        <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                            (click)=\"downloadCanvas()\">\r\n                            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n                                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                    stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <path\r\n                                        d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                    <path\r\n                                        d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                </g>\r\n                            </svg>\r\n                        </button>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <!-- Panel Collapse Handlers -->\r\n                <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n                    <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n\r\n                <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n                    <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Edit Fixture Body -->\r\n            <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n                <div id=\"edit-body\" class=\"row\">\r\n                    <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Basic details\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Products\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                                Visual Merchandise\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n\r\n                    <div class=\"col\">\r\n                        <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n                            <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"\r\n                                [libraryCategories]=\"libraryCategories\"\r\n                                [libraryByCategory]=\"libraryByCategory\"\r\n                                [allowCategoryAndWidthEdit]=\"true\">\r\n                            </lib-instance-basic-details>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n                            <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-products>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n                            <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-vms>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n                [style]=\"{'min-width': isRightPanelCollapsed ? '0' :  isAllocationRun ?'680px' : '464px' }\">\r\n                <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n    <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n        <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n            (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n            [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n            [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n    <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer w-100 p-4 rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke mt-0 animate title\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n            <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n                the verification section. Are you sure you want to continue?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div>\r\n            <h2 class=\"mb-3\">Approve & Submit</h2>\r\n            <p>\r\n                This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n                placements are as per the plan.\r\n            </p>\r\n        </div>\r\n        @if(hasInvalidFixtures) {\r\n            <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n                style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    style=\"flex-shrink: 0; margin-top: 1px;\">\r\n                    <path\r\n                        d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n                        stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n                    @if(hasInvalidHeaderFixtures) {\r\n                        <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong><br/>\r\n                    }\r\n                    @if(hasInvalidLibraryFixtures) {\r\n                        <strong>{{invalidLibraryFixtureCount}} fixture{{invalidLibraryFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidLibraryFixtureCount === 1 ? 'does' : 'do'}} not match any library entry.</strong><br/>\r\n                    }\r\n                    These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n                </p>\r\n            </div>\r\n        }\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n                <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n                <path\r\n                    d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n                    stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Revert Allocation</h2>\r\n            <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n            </p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n                [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n            <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n                verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n                <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}#onboard-plano .fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}#onboard-plano .fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: "lib-onboard-store-plano", providers: [TitleCasePipe], template: "<section id=\"onboard-plano\">\r\n    <!-- Loading State -->\r\n    <div *ngIf=\"isPageLoading\" class=\"row\">\r\n        <div class=\"col-12 m-0\">\r\n            <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-6\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n            <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Content -->\r\n    <div [ngClass]=\"{ 'd-none': isPageLoading }\">\r\n        <!-- Header Accordion -->\r\n        <div id=\"header\" ngbAccordion #accordion=\"ngbAccordion\" class=\"my-4\">\r\n            <div ngbAccordionItem=\"details\" [collapsed]=\"false\">\r\n                <div ngbAccordionHeader class=\"d-flex justify-content-between align-items-center px-6 py-3\">\r\n                    <div class=\"d-flex gap-4 align-items-center\">\r\n                        <div style=\"margin-left:5px;\" *ngIf=\"planoData?.storeName\">\r\n                            <h2 class='title'>{{planoData?.storeName}} - Plano</h2>\r\n                        </div>\r\n                        <lib-reactive-select *ngIf=\"floorsList.length\" [formControl]=\"selectedFloorId\"\r\n                            [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"floorsList\">\r\n                        </lib-reactive-select>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex align-items-center gap-4\">\r\n                        <div *ngIf=\"!editFixture\" class=\"updateClass\"\r\n                            [ngbTooltip]=\"floorData?.updatedByName ? 'Updated by ' + floorData.updatedByName : null\">\r\n                            Last Update: {{ floorData?.lastUpdateIso | date:'d MMM yyyy, hh:mm a' }}\r\n                        </div>\r\n\r\n                        <div class=\"d-flex gap-4 align-items-center\">\r\n                            <!-- Edit Fixture Mode -->\r\n                            <ng-container *ngIf=\"editFixture\">\r\n                                <button type=\"button\" class=\"btn btn-outline text-nowrap\"\r\n                                    (click)=\"onFixturePageCancel()\">\r\n                                    Cancel\r\n                                </button>\r\n                                <button type=\"button\" class=\"btn btn-primary text-nowrap\" (click)=\"onFixtureSave()\">\r\n                                    Save & Close\r\n                                </button>\r\n                            </ng-container>\r\n                            <button ngbAccordionButton></button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <div id=\"header\" class=\"row mx-0 gap-3\">\r\n                            <!-- Plano Completion -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3 class=\"d-flex align-items-center gap-2\">\r\n                                    Plano Completion %\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                                        fill=\"none\" ngbTooltip=\"% of overall planogram completion\">\r\n                                        <g clip-path=\"url(#clip0_1517_129805)\">\r\n                                            <path\r\n                                                d=\"M9 12V9M9 6H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n                                                stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1517_129805\">\r\n                                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </h3>\r\n                                <div class=\"row align-items-center mt-2\">\r\n                                    <div class=\"col-9\">\r\n                                        <div class=\"progress\" style=\"height: 4px\">\r\n                                            <div class=\"progress-bar\" [ngClass]=\"\r\n                          [25, 50].includes(getProgressValue) ? 'bg-warning' : 'bg-success'\" role=\"progressbar\"\r\n                                                [style]=\"'width:' + getProgressValue + '%'\"\r\n                                                [attr.aria-valuenow]=\"getProgressValue\" aria-valuemin=\"0\"\r\n                                                aria-valuemax=\"100\">\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-3\">{{ getProgressValue }}%</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Layout -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{floorData?.floorNumber}}/{{ planoData?.floors?.length }}</b> Layout</h3>\r\n                                <div class=\"indicator mt-2\"\r\n                                    [ngClass]=\"getStatus === 'allocationPending' ? 'completed' : 'draft'\">\r\n                                    {{ getStatus === 'allocationPending' ? 'Completed' : 'Draft' }}\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Fixtures -->\r\n                            <div style=\"cursor: unset;\" class=\"col filter-tab\">\r\n                                <h3><b>{{ allFixtureInstances.length }}</b> Fixtures</h3>\r\n                                <div class=\"indicator mt-2\" [ngClass]=\"getStatus\">\r\n                                    {{ getStatusText }}\r\n                                </div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div id=\"body\" class=\"row\">\r\n            <!-- Left Column -->\r\n            <div\r\n                [ngClass]=\"{ 'collapsed-col': isLeftPanelCollapsed, 'col-3': !isLeftPanelCollapsed,'d-none': editFixture  }\">\r\n                <div class=\"s-card\">\r\n                    <form [ngClass]=\"{ 'd-none': isLeftPanelCollapsed }\" [formGroup]=\"layoutForm\">\r\n                        <div ngbAccordion #bodyAccordion=\"ngbAccordion\">\r\n                            <!-- Walls Section -->\r\n                            <ng-container *ngIf=\"getFormWalls.controls.length; else addWallAction\">\r\n                                <ng-container formArrayName=\"walls\">\r\n                                    <ng-container *ngFor=\"let group of getFormWalls.controls; let i = index\">\r\n                                        <div [formGroupName]=\"i\" [ngbAccordionItem]=\"'accordion-wall-' + i\"\r\n                                            class=\"mb-5\">\r\n                                            <div class=\"d-flex\" ngbAccordionHeader>\r\n                                                <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                                    <div class=\"d-flex align-items-center\">\r\n                                                        <span class=\"me-2 wall-label\">\r\n                                                            {{ group.get(\"elementType\")?.value | titlecase }}\r\n                                                            {{ group.get(\"elementNumber\")?.value }}\r\n                                                        </span>\r\n\r\n                                                        @if(layoutForm.enabled){\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Rotate this wall.\"\r\n                                                                (click)=\"rotateWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                        d=\"M3.73735 8.25011C4.12193 8.24362 4.44377 8.52776 4.49338 8.89998L4.4999 8.98735L4.50262 9.15516C4.58434 11.5741 6.57243 13.5 9 13.5C9.14022 13.5 9.27951 13.4936 9.41756 13.4809L9.21967 13.2803C8.92678 12.9874 8.92678 12.5126 9.21967 12.2197C9.51257 11.9268 9.98744 11.9268 10.2803 12.2197L11.7803 13.7197C12.0732 14.0126 12.0732 14.4874 11.7803 14.7803L10.2803 16.2803C9.98744 16.5732 9.51257 16.5732 9.21967 16.2803C8.92678 15.9874 8.92678 15.5126 9.21967 15.2197L9.45837 14.9827C9.30646 14.9942 9.15359 15 9 15C5.82653 15 3.21665 12.5321 3.0125 9.38289L3.00315 9.19314L3.00011 9.01265C2.99312 8.59849 3.3232 8.25709 3.73735 8.25011ZM8.78033 1.71967C9.0507 1.99003 9.07149 2.41546 8.84272 2.70967L8.78033 2.78033L8.54187 3.01726C8.69371 3.00578 8.8465 3 9 3C12.3137 3 15 5.68629 15 9C15 9.41421 14.6642 9.75 14.25 9.75C13.8358 9.75 13.5 9.41421 13.5 9C13.5 6.51472 11.4853 4.5 9 4.5C8.8597 4.5 8.72034 4.5064 8.58221 4.51909L8.78033 4.71967C9.07323 5.01256 9.07323 5.48744 8.78033 5.78033C8.50997 6.05069 8.08455 6.07149 7.79033 5.84272L7.71967 5.78033L6.21967 4.28033C5.94931 4.00997 5.92851 3.58454 6.15728 3.29033L6.21967 3.21967L7.71967 1.71967C8.01257 1.42678 8.48744 1.42678 8.78033 1.71967Z\"\r\n                                                                        fill=\"#475467\" stroke=\"#475467\"\r\n                                                                        stroke-width=\"0.00064\" />\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\" ngbTooltip=\"Insert new wall below.\"\r\n                                                                (click)=\"addNewWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_62_8)\">\r\n                                                                        <path\r\n                                                                            d=\"M9 9.75C11.0707 9.75 12.75 11.4293 12.75 13.5C12.75 15.5708 11.0707 17.25 9 17.25C6.92925 17.25 5.25 15.5708 5.25 13.5C5.25 11.4293 6.92925 9.75 9 9.75ZM9.75 11.25H8.25V12.7493L6.75 12.75V14.25L8.25 14.2493V15.75H9.75V14.2493L11.25 14.25V12.75L9.75 12.7493V11.25ZM15 2.25C15.414 2.25 15.75 2.586 15.75 3V7.5C15.75 7.914 15.414 8.25 15 8.25H3C2.586 8.25 2.25 7.914 2.25 7.5V3C2.25 2.586 2.586 2.25 3 2.25H15ZM3.75 3.75V6.75H14.25V3.75H3.75Z\"\r\n                                                                            fill=\"#475467\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_62_8\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                            <span class=\"me-1\"\r\n                                                                ngbTooltip=\"Remove this wall and its fixtures.\"\r\n                                                                (click)=\"deleteWall(getElementNumber(group)!); $event.stopPropagation()\">\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n                                                                    height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_63_25)\">\r\n                                                                        <path\r\n                                                                            d=\"M10.7094 1.5C11.3551 1.5 11.9283 1.91314 12.1324 2.52565L12.5406 3.75H15C15.4142 3.75 15.75 4.08579 15.75 4.5C15.75 4.9142 15.4142 5.24999 15 5.25L14.9981 5.30344L14.3476 14.4103C14.2635 15.5878 13.2838 16.5 12.1034 16.5H5.89668C4.71624 16.5 3.7365 15.5878 3.6524 14.4103L3.00191 5.30344C3.00062 5.28551 2.99998 5.26769 2.99997 5.25C2.58577 5.24999 2.25 4.9142 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H5.45943L5.86754 2.52565C6.07172 1.91314 6.64493 1.5 7.29057 1.5H10.7094ZM13.4981 5.25H4.50191L5.14858 14.3034C5.17662 14.696 5.5032 15 5.89668 15H12.1034C12.4968 15 12.8234 14.696 12.8514 14.3034L13.4981 5.25ZM7.5 7.5C7.88464 7.5 8.20163 7.78952 8.24495 8.16253L8.25 8.25V12C8.25 12.4142 7.91422 12.75 7.5 12.75C7.11537 12.75 6.79837 12.4605 6.75505 12.0875L6.75 12V8.25C6.75 7.83578 7.08578 7.5 7.5 7.5ZM10.5 7.5C10.9142 7.5 11.25 7.83578 11.25 8.25V12C11.25 12.4142 10.9142 12.75 10.5 12.75C10.0858 12.75 9.75 12.4142 9.75 12V8.25C9.75 7.83578 10.0858 7.5 10.5 7.5ZM10.7094 3H7.29057L7.04057 3.75H10.9595L10.7094 3Z\"\r\n                                                                            fill=\"#F32B2B\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_63_25\">\r\n                                                                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg>\r\n                                                            </span>\r\n                                                        }\r\n                                                    </div>\r\n                                                    <div class=\"divider\"></div>\r\n                                                </button>\r\n                                            </div>\r\n\r\n                                            <div ngbAccordionCollapse>\r\n                                                <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                                    <ng-template>\r\n                                                        <div style=\"min-height: 50px\" dndDropzone\r\n                                                            (dndDrop)=\"onDrop($event, i)\">\r\n                                                            <!-- Fixtures -->\r\n                                                            <ng-container *ngIf=\"getFormFixtures(i).controls.length\">\r\n                                                                <div formArrayName=\"fixtures\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getFormFixtures(i).controls; let j = index\">\r\n                                                                        <div dndDropzone\r\n                                                                            (dndDrop)=\"onDrop($event, i, j)\"\r\n                                                                            [formGroupName]=\"j\"\r\n                                                                            [dndDraggable]=\"{ wallIndex: i, fixtureIndex: j }\"\r\n                                                                            [dndEffectAllowed]=\"'all'\"\r\n                                                                            class=\"row g-0 mb-5 fixture-row\"\r\n                                                                            [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\"\r\n                                                                            [dndDisableDragIf]=\"layoutForm.disabled\">\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                                    <svg dndDragImageRef\r\n                                                                                        [style]=\"{ cursor: layoutForm.disabled ? 'default' : 'move', opacity: '0.5' }\"\r\n                                                                                        width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                                        <path\r\n                                                                                            d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                            fill=\"grey\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-10\">\r\n                                                                                <lib-reactive-select\r\n                                                                                    formControlName=\"fixtureConfigId\"\r\n                                                                                    [idField]=\"'_id'\"\r\n                                                                                    [nameField]=\"'name'\"\r\n                                                                                    [data]=\"fixtureTemplates\"\r\n                                                                                    [label]=\"'Fixture ' + (j + 1)\"\r\n                                                                                    [subTextField]=\"'subtext'\"\r\n                                                                                    [search]=\"true\">\r\n                                                                                </lib-reactive-select>\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"deleteFixture('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewFixture('wall', i)\">\r\n                                                                    Add fixture\r\n                                                                </a>\r\n                                                            </div>\r\n\r\n                                                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                            <!-- Other Elements -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"getWallOtherElements(i).controls.length\">\r\n                                                                <div formArrayName=\"otherElements\">\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let fixture of getWallOtherElements(i).controls; let j = index\">\r\n                                                                        <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                            <div class=\"col-11\">\r\n                                                                                <label class=\"form-label mb-1\">Element\r\n                                                                                    {{ j + 1 }}</label>\r\n\r\n                                                                                <!-- Dropdown bound to 'type' -->\r\n                                                                                <lib-reactive-select [idField]=\"'value'\"\r\n                                                                                    [nameField]=\"'label'\"\r\n                                                                                    [data]=\"otherElementList\"\r\n                                                                                    [id]=\"'elementLabel' + j\"\r\n                                                                                    formControlName=\"type\">\r\n                                                                                </lib-reactive-select>\r\n\r\n                                                                                <!-- Show custom text input only when 'Others' is selected -->\r\n                                                                                <input\r\n                                                                                    *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                                    type=\"text\"\r\n                                                                                    class=\"form-control mt-2\"\r\n                                                                                    formControlName=\"customName\"\r\n                                                                                    placeholder=\"Enter custom element name\" />\r\n                                                                            </div>\r\n\r\n                                                                            <div class=\"col-1\">\r\n                                                                                <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                                    [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                                    <svg (click)=\"removeOtherElement('wall', j, i)\"\r\n                                                                                        style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"10\" height=\"10\"\r\n                                                                                        viewBox=\"0 0 10 10\" fill=\"none\">\r\n                                                                                        <path d=\"M9 1L1 9M1 1L9 9\"\r\n                                                                                            stroke=\"#344054\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </svg>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <div class=\"d-flex justify-content-end\">\r\n                                                                <a class=\"link-btn\"\r\n                                                                    [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                                    (click)=\"addNewOtherElements('wall', i)\">\r\n                                                                    Add element\r\n                                                                </a>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-template #addWallAction>\r\n                                <button (click)=\"addNewWall(0)\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                    class=\"btn btn-secondary w-100 p-2\">\r\n                                    Insert new wall\r\n                                </button>\r\n                            </ng-template>\r\n\r\n                            <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                            <!-- Floor Section -->\r\n                            <div [ngbAccordionItem]=\"'accordion-floor'\" class=\"mb-5\">\r\n                                <div class=\"d-flex\" ngbAccordionHeader>\r\n                                    <button type=\"button\" class=\"mainheading p-0\" ngbAccordionButton>\r\n                                        <span class=\"me-2 wall-label\">Floor</span>\r\n                                        <div class=\"divider\"></div>\r\n                                    </button>\r\n                                </div>\r\n\r\n                                <div ngbAccordionCollapse>\r\n                                    <div ngbAccordionBody class=\"ps-0 pe-0\">\r\n                                        <ng-template>\r\n                                            <div style=\"min-height: 50px\" dndDropzone\r\n                                                (dndDrop)=\"onDrop($event, 'floor')\">\r\n                                                <!-- Floor Fixtures -->\r\n                                                <ng-container *ngIf=\"getFormFloorFixtures.controls.length\">\r\n                                                    <div formArrayName=\"floorFixtures\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorFixtures.controls; let j = index\">\r\n                                                            <div dndDropzone (dndDrop)=\"onDrop($event, 'floor', j)\"\r\n                                                                [formGroupName]=\"j\"\r\n                                                                [dndDraggable]=\"{ wallIndex: 'floor', fixtureIndex: j }\"\r\n                                                                [dndEffectAllowed]=\"'all'\"\r\n                                                                [dndDisableDragIf]=\"layoutForm.disabled\"\r\n                                                                class=\"row g-0 mb-5 fixture-row\"\r\n                                                                [class.highlighted-fixture]=\"layoutForm.enabled && highlightedFixtureFormId && fixture.get('_id')?.value === highlightedFixtureFormId\">\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-center h-100\">\r\n                                                                        <svg dndDragImageRef\r\n                                                                            style=\"cursor: move; opacity: 0.5\"\r\n                                                                            width=\"25px\" viewBox=\"0 0 16 16\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                                            <path\r\n                                                                                d=\"m 4.496094 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m -6 6 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 6 0 c -0.832032 0 -1.5 0.671875 -1.5 1.5 s 0.667968 1.5 1.5 1.5 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 z m 0 0\"\r\n                                                                                fill=\"grey\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-10\">\r\n                                                                    <lib-reactive-select\r\n                                                                        formControlName=\"fixtureConfigId\"\r\n                                                                        [idField]=\"'_id'\" [nameField]=\"'name'\"\r\n                                                                        [data]=\"fixtureTemplates\"\r\n                                                                        [label]=\"'Fixture ' + (j + 1)\" [search]=\"true\"\r\n                                                                        [subTextField]=\"'subtext'\">\r\n                                                                    </lib-reactive-select>\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"deleteFixture('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewFixture('floor')\">\r\n                                                        Add fixture\r\n                                                    </a>\r\n                                                </div>\r\n\r\n                                                <hr style=\"border-top: 1px dashed #000000;\" />\r\n\r\n                                                <!-- Floor Other Elements -->\r\n                                                <ng-container *ngIf=\"getFormFloorOtherElements.controls.length\">\r\n                                                    <div formArrayName=\"floorOtherElements\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let fixture of getFormFloorOtherElements.controls; let j = index\">\r\n                                                            <div [formGroupName]=\"j\" class=\"row g-0 mb-5\">\r\n                                                                <div class=\"col-11\">\r\n                                                                    <label class=\"form-label mb-1\">Element\r\n                                                                        {{ j + 1 }}</label>\r\n\r\n                                                                    <!-- Dropdown for type -->\r\n                                                                    <lib-reactive-select [idField]=\"'value'\"\r\n                                                                        [nameField]=\"'label'\" [data]=\"otherElementList\"\r\n                                                                        [id]=\"'floorElementLabel' + j\"\r\n                                                                        formControlName=\"type\">\r\n                                                                    </lib-reactive-select>\r\n\r\n                                                                    <!-- Conditional input for custom name -->\r\n                                                                    <input\r\n                                                                        *ngIf=\"(fixture.get('type')?.value) === 'Others'\"\r\n                                                                        type=\"text\" class=\"form-control mt-2\"\r\n                                                                        formControlName=\"customName\"\r\n                                                                        placeholder=\"Enter custom element name\" />\r\n                                                                </div>\r\n\r\n                                                                <div class=\"col-1\">\r\n                                                                    <div class=\"d-flex align-items-end justify-content-center h-100\"\r\n                                                                        [class.disabled-click]=\"layoutForm.disabled\">\r\n                                                                        <svg (click)=\"removeOtherElement('floor', j)\"\r\n                                                                            style=\"cursor: pointer; margin-bottom: 18px\"\r\n                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M9 1L1 9M1 1L9 9\" stroke=\"#344054\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                                <div class=\"d-flex justify-content-end\">\r\n                                                    <a class=\"link-btn\" [class.disabled-click]=\"layoutForm.disabled\"\r\n                                                        (click)=\"addNewOtherElements('floor')\">\r\n                                                        Add element\r\n                                                    </a>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Center Column -->\r\n            <div class=\"col overflow-hidden position-relative\" [ngClass]=\"{ 'd-none': editFixture }\">\r\n                <div id=\"canvas-card\" class=\"c-card position-relative\" #canvasContainer>\r\n                    <!-- Canvas View -->\r\n                    <canvas id=\"base-canvas\" #baseCanvas></canvas>\r\n\r\n                    <div class=\"position-absolute d-flex align-items-center justify-content-end gap-2\"\r\n                        style=\"top: 24px; right: 26px;width: calc(100% - 50px);\">\r\n                        <!-- Entrance Button -->\r\n                        <div *ngIf=\"layoutForm.enabled\" ngbTooltip=\"You can add up to two entrances.\"\r\n                            [disableTooltip]=\"getEntrances?.length < 2\" class=\"me-auto\">\r\n                            <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm \"\r\n                                [disabled]=\"getEntrances?.length >= 2\" (click)=\"addNewEntrance()\">\r\n                                Add Entrance\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- Cancel edit -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'allocationPending'){\r\n                                <button type=\"button\" class=\"btn btn-outline bg-white shadow-sm\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }@else {\r\n                                <button type=\"button\" class=\"btn btn-text\" (click)=\"cancelEdit()\">\r\n                                    Cancel\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Save -->\r\n                        @if(layoutForm.enabled){\r\n                            @if(getStatus === 'draft'){\r\n                                <button type=\"button\"\r\n                                    class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                    style=\"min-width: 130px;\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save as Draft\r\n                                </button>\r\n                            }@else{\r\n                                <button type=\"button\"\r\n                                    style=\"padding: 8px 20px !important;min-width: 90px;\"\r\n                                    class=\"btn btn-primary text-nowrap d-flex align-items-center gap-2 justify-content-center\"\r\n                                    [disabled]=\"isSavingLayout\" (click)=\"updateLayout(true)\">\r\n                                    <span *ngIf=\"isSavingLayout\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n                                    Save\r\n                                </button>\r\n                            }\r\n                        }\r\n\r\n                        <!-- Compact button (CAD layouts only, view mode) \u2014 one-shot:\r\n                             clicking compacts the layout and drops the user into edit\r\n                             mode so the change is revertable via Cancel and persistable\r\n                             via Save / Submit. -->\r\n                        @if(canShowCompactToggle && layoutForm.disabled){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline shadow-sm bg-white d-flex align-items-center gap-2 justify-content-center\"\r\n                                (click)=\"compactLayout()\"\r\n                                ngbTooltip=\"Compact layout.\"\r\n                                container=\"body\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\">\r\n                                    <polyline points=\"4 14 10 14 10 20\"></polyline>\r\n                                    <polyline points=\"20 10 14 10 14 4\"></polyline>\r\n                                    <line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\"></line>\r\n                                    <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"></line>\r\n                                </svg>\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Edit Button -->\r\n                        @if(isEditLayoutAllowed){\r\n                            <button type=\"button\"\r\n                                class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                                (click)=\"onClickEdit()\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_1322_5325)\">\r\n                                        <path\r\n                                            d=\"M14.1667 2.49993C14.3856 2.28106 14.6455 2.10744 14.9314 1.98899C15.2174 1.87054 15.5239 1.80957 15.8334 1.80957C16.1429 1.80957 16.4494 1.87054 16.7354 1.98899C17.0214 2.10744 17.2812 2.28106 17.5001 2.49993C17.719 2.7188 17.8926 2.97863 18.011 3.2646C18.1295 3.55057 18.1904 3.85706 18.1904 4.16659C18.1904 4.47612 18.1295 4.78262 18.011 5.06859C17.8926 5.35455 17.719 5.61439 17.5001 5.83326L6.25008 17.0833L1.66675 18.3333L2.91675 13.7499L14.1667 2.49993Z\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_1322_5325\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                Edit\r\n                            </button>\r\n                        }\r\n\r\n                        <!-- Cancel Button (From allocation) -->\r\n                        <button *ngIf=\"layoutForm.disabled && isAllocationRun\" type=\"button\"\r\n                            class=\"btn btn-outline bg-white shadow-sm\" (click)=\"onClickRevertAllocation() \">\r\n                            Cancel\r\n                        </button>\r\n\r\n\r\n                        <!-- Run allocation / Complete -->\r\n                        @if(isRunAllocationAllowed && layoutForm.disabled && getStatus === 'allocationPending'){\r\n                            <span\r\n                                [ngbTooltip]=\"!isAllocationRun ? invalidFixturesTooltip : unallocatedZonesTooltip\"\r\n                                container=\"body\">\r\n                                <button type=\"button\" style=\"padding: 8px 20px !important;\"\r\n                                    class=\"btn btn-primary text-nowrap\"\r\n                                    [disabled]=\"(!isAllocationRun && hasInvalidFixtures) || (isAllocationRun && hasUnallocatedZoneFixtures)\"\r\n                                    (click)=\"onClickRunAllocation()\">\r\n                                    {{ isAllocationRun ? 'Complete Allocation' : 'Run Allocation' }}\r\n                                </button>\r\n                            </span>\r\n                        }\r\n\r\n                        <button *ngIf=\"getStatus === 'draft'\" type=\"button\" style=\"padding: 8px 20px !important\"\r\n                            class=\"btn btn-primary text-nowrap\" (click)=\"onClickApproveLayout()\">\r\n                            Submit for merch allocation\r\n                        </button>\r\n\r\n                        <!-- Rotate Button -->\r\n                        <button type=\"button\" *ngIf=\"layoutForm.disabled\" class=\"btn btn-outline bg-white shadow-sm\"\r\n                            (click)=\"rotateCanvas(canvas,90)\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n                                    fill=\"#1D2939\" />\r\n                                <path\r\n                                    d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n                                    stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </button>\r\n\r\n                        <!-- Download Button -->\r\n                        <button type=\"button\" class=\"btn btn-outline d-flex align-items-center gap-3 bg-white shadow-sm\"\r\n                            (click)=\"downloadCanvas()\">\r\n                            <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n                                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n                                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                    stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <path\r\n                                        d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                    <path\r\n                                        d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n                                        fill=\"#1D2939\"></path>\r\n                                </g>\r\n                            </svg>\r\n                        </button>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <!-- Panel Collapse Handlers -->\r\n                <div class=\"collapse-handler left\" (click)=\"togglePanel('left')\">\r\n                    <svg *ngIf=\"!isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"isLeftPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n\r\n                <div class=\"collapse-handler right\" (click)=\"togglePanel('right')\">\r\n                    <svg *ngIf=\"isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.27308 12.636L4.63672 8.99964L8.27308 5.36328M13.364 12.636L9.72763 8.99964L13.364 5.36328\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <svg *ngIf=\"!isRightPanelCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                        viewBox=\"0 0 18 18\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.72692 5.36399L13.3633 9.00036L9.72692 12.6367M4.63601 5.36399L8.27237 9.00036L4.63601 12.6367\"\r\n                            stroke=\"#101828\" stroke-width=\"1.45455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Edit Fixture Body -->\r\n            <div class=\"col\" [ngClass]=\"{ 'd-none': !editFixture }\">\r\n                <div id=\"edit-body\" class=\"row\">\r\n                    <ul class=\"mx-3 my-5 nav nav-pills\" role=\"tablist\">\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'basic-details'\"\r\n                                [ngClass]=\"editFixtureSection === 'basic-details' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Basic details\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'products'\"\r\n                                [ngClass]=\"editFixtureSection === 'products' ? 'active' : ''\" class=\"nav-link\"\r\n                                role=\"tab\">\r\n                                Products\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"nav-item cursor-pointer\" role=\"presentation\">\r\n                            <a (click)=\"submitFixture = false; editFixtureSection = 'vms'\"\r\n                                [ngClass]=\"editFixtureSection === 'vms' ? 'active' : ''\" class=\"nav-link\" role=\"tab\">\r\n                                Visual Merchandise\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n\r\n                    <div class=\"col\">\r\n                        <ng-container *ngIf=\"editFixtureSection === 'basic-details'\">\r\n                            <lib-instance-basic-details [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\"\r\n                                [libraryCategories]=\"libraryCategories\"\r\n                                [libraryByCategory]=\"libraryByCategory\"\r\n                                [allowCategoryAndWidthEdit]=\"true\">\r\n                            </lib-instance-basic-details>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'products'\">\r\n                            <lib-instance-products [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-products>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"editFixtureSection === 'vms'\">\r\n                            <lib-instance-vms [fixtureData]=\"selectedFixtureData\" [editMode]=\"true\"\r\n                                [isSubmitted]=\"submitFixture\" (submitEvent)=\"onFixtureSubmit($event)\">\r\n                            </lib-instance-vms>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div [ngClass]=\"{ 'collapsed-col': isRightPanelCollapsed, 'col-3': !isRightPanelCollapsed }\"\r\n                [style]=\"{'min-width': isRightPanelCollapsed ? '0' :  isAllocationRun ?'680px' : '464px' }\">\r\n                <ng-container *ngTemplateOutlet=\"fixturePreviewCol\"></ng-container>\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</section>\r\n\r\n<ng-template #fixturePreviewCol>\r\n    <div class=\"s-card\" [ngStyle]=\"{'margin-top':editFixture ? '72px' : '0px'}\">\r\n        <onboard-fixture [ngClass]=\"{ 'd-none': isRightPanelCollapsed}\"\r\n            (onClose)=\"togglePanel('right'); selectedFixtureData = null; removeHighlight();\"\r\n            [fixtureData]=\"selectedFixtureData\" [isAllocationRun]=\"isAllocationRun\"\r\n            [allFixtures]=\"allFixtureInstances\"></onboard-fixture>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #headerSkeleton>\r\n    <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer w-100 p-4 rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke mt-0 animate title\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #skeletonLoader>\r\n    <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n        <div class=\"shimmer rounded\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n                <br />\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #applyLogics let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Run Allocation Logic</h2>\r\n            <p>This will map all fixtures and apply allocations based on the business-defined logic, then move them to\r\n                the verification section. Are you sure you want to continue?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"runAllocation()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\"> Run allocation Logic</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #approveLayoutModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div>\r\n            <h2 class=\"mb-3\">Approve & Submit</h2>\r\n            <p>\r\n                This will complete the layout and make it ready for allocation. Ensure that all fixture counts and\r\n                placements are as per the plan.\r\n            </p>\r\n        </div>\r\n        @if(hasInvalidFixtures) {\r\n            <div class=\"d-flex align-items-start gap-2 p-3 mb-3 rounded\"\r\n                style=\"background-color: #FFFAEB; border: 1px solid #FEC84B;\">\r\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    style=\"flex-shrink: 0; margin-top: 1px;\">\r\n                    <path\r\n                        d=\"M9.99965 6.66667V10M9.99965 13.3333H10.008M8.57465 2.38334L1.51632 14.1667C1.37079 14.4187 1.29379 14.7044 1.29298 14.9954C1.29216 15.2865 1.36756 15.5726 1.51167 15.8254C1.65579 16.0783 1.86359 16.289 2.11441 16.4366C2.36523 16.5841 2.65032 16.6635 2.94132 16.6667H17.058C17.349 16.6635 17.6341 16.5841 17.8849 16.4366C18.1357 16.289 18.3435 16.0783 18.4876 15.8254C18.6317 15.5726 18.7071 15.2865 18.7063 14.9954C18.7055 14.7044 18.6285 14.4187 18.483 14.1667L11.4247 2.38334C11.2761 2.13843 11.0669 1.93594 10.8173 1.79541C10.5677 1.65488 10.2861 1.58105 9.99965 1.58105C9.71321 1.58105 9.43159 1.65488 9.18199 1.79541C8.93238 1.93594 8.72321 2.13843 8.57465 2.38334Z\"\r\n                        stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <p class=\"mb-0\" style=\"font-size: 13px; color: #92400E;\">\r\n                    @if(hasInvalidHeaderFixtures) {\r\n                        <strong>{{invalidHeaderFixtureCount}} fixture{{invalidHeaderFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidHeaderFixtureCount === 1 ? 'has' : 'have'}} an unrecognized header.</strong><br/>\r\n                    }\r\n                    @if(hasInvalidLibraryFixtures) {\r\n                        <strong>{{invalidLibraryFixtureCount}} fixture{{invalidLibraryFixtureCount === 1 ? '' : 's'}}\r\n                            {{invalidLibraryFixtureCount === 1 ? 'does' : 'do'}} not match any library entry.</strong><br/>\r\n                    }\r\n                    These are highlighted in red on the layout and must be corrected before the allocation rule can run.\r\n                </p>\r\n            </div>\r\n        }\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"approveLayout()\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Submit</span>\r\n                <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #revertAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#FEF3C7\" />\r\n                <path\r\n                    d=\"M20 13.3333V20M20 26.6667H20.0167M28.3333 20C28.3333 24.6024 24.6024 28.3333 20 28.3333C15.3976 28.3333 11.6667 24.6024 11.6667 20C11.6667 15.3976 15.3976 11.6667 20 11.6667C24.6024 11.6667 28.3333 15.3976 28.3333 20Z\"\r\n                    stroke=\"#F59E0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Revert Allocation</h2>\r\n            <p>Are you sure you want to revert the allocation? This will restore the state before running allocation.\r\n            </p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"revertAllocation(); modal.close()\"\r\n                [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Revert</span>\r\n                <svg style=\"width: 141px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #completeAllocationModal let-modal>\r\n    <div class=\"modal-body\">\r\n        <div class=\"d-flex justify-content-start mb-4\">\r\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n                <path\r\n                    d=\"M20.833 21.6665C18.033 21.6665 17.1164 22.7915 16.8164 23.5332C17.708 23.9165 18.333 24.7998 18.333 25.8332C18.333 26.4962 18.0696 27.1321 17.6008 27.6009C17.1319 28.0698 16.4961 28.3332 15.833 28.3332C15.17 28.3332 14.5341 28.0698 14.0653 27.6009C13.5964 27.1321 13.333 26.4962 13.333 25.8332C13.333 24.7415 14.0247 23.8165 14.9997 23.4748V16.5248C14.5114 16.3535 14.0885 16.0344 13.7899 15.6117C13.4912 15.1891 13.3315 14.684 13.333 14.1665C13.333 13.5035 13.5964 12.8676 14.0653 12.3987C14.5341 11.9299 15.17 11.6665 15.833 11.6665C16.4961 11.6665 17.1319 11.9299 17.6008 12.3987C18.0696 12.8676 18.333 13.5035 18.333 14.1665C18.333 15.2582 17.6414 16.1832 16.6664 16.5248V20.9332C17.3997 20.3915 18.4664 19.9998 19.9997 19.9998C22.2247 19.9998 22.9664 18.8832 23.208 18.1415C22.7521 17.9516 22.3625 17.6311 22.0882 17.2204C21.8139 16.8097 21.6671 16.3271 21.6664 15.8332C21.6664 15.1701 21.9297 14.5342 22.3986 14.0654C22.8674 13.5966 23.5033 13.3332 24.1664 13.3332C24.8294 13.3332 25.4653 13.5966 25.9341 14.0654C26.403 14.5342 26.6664 15.1701 26.6664 15.8332C26.6664 16.9498 25.933 17.9165 24.9247 18.2165C24.708 19.4082 23.8997 21.6665 20.833 21.6665ZM15.833 24.9998C15.612 24.9998 15.4 25.0876 15.2438 25.2439C15.0875 25.4002 14.9997 25.6122 14.9997 25.8332C14.9997 26.0542 15.0875 26.2661 15.2438 26.4224C15.4 26.5787 15.612 26.6665 15.833 26.6665C16.054 26.6665 16.266 26.5787 16.4223 26.4224C16.5786 26.2661 16.6664 26.0542 16.6664 25.8332C16.6664 25.6122 16.5786 25.4002 16.4223 25.2439C16.266 25.0876 16.054 24.9998 15.833 24.9998ZM15.833 13.3332C15.612 13.3332 15.4 13.421 15.2438 13.5772C15.0875 13.7335 14.9997 13.9455 14.9997 14.1665C14.9997 14.3875 15.0875 14.5995 15.2438 14.7558C15.4 14.912 15.612 14.9998 15.833 14.9998C16.054 14.9998 16.266 14.912 16.4223 14.7558C16.5786 14.5995 16.6664 14.3875 16.6664 14.1665C16.6664 13.9455 16.5786 13.7335 16.4223 13.5772C16.266 13.421 16.054 13.3332 15.833 13.3332ZM24.1664 14.9998C23.9453 14.9998 23.7334 15.0876 23.5771 15.2439C23.4208 15.4002 23.333 15.6122 23.333 15.8332C23.333 16.0542 23.4208 16.2661 23.5771 16.4224C23.7334 16.5787 23.9453 16.6665 24.1664 16.6665C24.3874 16.6665 24.5993 16.5787 24.7556 16.4224C24.9119 16.2661 24.9997 16.0542 24.9997 15.8332C24.9997 15.6122 24.9119 15.4002 24.7556 15.2439C24.5993 15.0876 24.3874 14.9998 24.1664 14.9998Z\"\r\n                    fill=\"#009BF3\" />\r\n            </svg>\r\n        </div>\r\n        <div>\r\n            <h2 class=\"mb-3\">Save and complete allocation</h2>\r\n            <p>You are about to complete the merch allocation process. This will make the store ready for fixture\r\n                verification and move it to the verification stage. Are you sure you want to proceed?</p>\r\n        </div>\r\n        <div class=\"d-flex justify-content-end gap-3\">\r\n            <button type=\"button\" class=\"btn btn-outline\" (click)=\"modal.close()\"\r\n                [disabled]=\"isButtonLoading\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"completeAllocation();\" [disabled]=\"isButtonLoading\">\r\n                <span *ngIf=\"!isButtonLoading\">Complete allocation</span>\r\n                <svg style=\"width: 107px;\" *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n                    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #d0d5dd)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00a3ff;border-right:2px solid #00a3ff;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}#onboard-plano ::ng-deep .backgroundImg{background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion .accordion-button.backgroundImg:not(.collapsed){background-color:#f9fafb!important}#onboard-plano ::ng-deep .accordion-body{padding:10px 20px 20px}#onboard-plano .s-card{position:relative;box-sizing:border-box;border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow-y:auto;overflow-x:visible}#onboard-plano .c-card{border-radius:8px;background:#fff;padding:20px 16px;height:75dvh;overflow:hidden;width:100%}#onboard-plano .h-card{border-radius:8px;background:#fff;padding:20px 16px;min-height:20dvh}#onboard-plano .wall-label{color:var(--Gray-600, #475467);font-family:Inter;font-size:14px;font-style:normal;font-weight:600}#onboard-plano img{width:100%;height:100%;object-fit:cover;display:block}#onboard-plano #header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#onboard-plano #header .cus-btn{color:#009bf3;background:#eaf8ff;padding:4px 10px;border-radius:16px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;cursor:pointer}#onboard-plano #header .cus-btn:hover{background:#e2f5ff}#onboard-plano .loader .shimmer{height:100%!important}#onboard-plano .collapse-handler{position:absolute;height:32px;width:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;cursor:pointer;top:12px}#onboard-plano .collapse-handler.right{right:0}#onboard-plano .collapse-handler.left{left:0}#onboard-plano .collapsed-col{transition:all .3s ease;width:40px!important}#onboard-plano [class^=col]{transition:all .3s ease}#onboard-plano #segment-btn .custom-tabs{border-radius:8px;border:1px solid var(--Gray-300, #d0d5dd);overflow:hidden;margin-bottom:24px}#onboard-plano #segment-btn .custom-tabs .nav-link{border-radius:0%;color:#495057;padding:.75rem 1rem;background-color:#fff;text-align:center;border-right:1px solid var(--Gray-300, #d0d5dd);transition:all ease .2s;font-weight:500}#onboard-plano #segment-btn .custom-tabs .nav-link.active{background:var(--Primary-500, #33b5ff);color:#fff}#onboard-plano #segment-btn .nav-tabs .nav-link{border:none;margin:0}#onboard-plano #segment-btn .nav-item{text-align:center}#onboard-plano #segment-btn .nav-item:last-child .nav-link{border:none}#onboard-plano .link-btn{color:#33b5ff;cursor:pointer;font-weight:500}#onboard-plano .link-btn:hover{color:#33b5ff;text-decoration:underline!important}#onboard-plano .btn-red{border-radius:8px!important;border:1px solid #fef3f2!important;background:#fef3f2!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 18px!important;color:#b42318!important;font-size:16px!important;font-weight:600!important}#onboard-plano .updateClass{font-family:Inter;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}#onboard-plano .fixture-row{border-radius:8px;transition:background-color .2s ease,box-shadow .2s ease}#onboard-plano .fixture-row.highlighted-fixture{background-color:#eaf8ff;box-shadow:0 0 0 2px #33b5ff}.btn .spinner{height:22px;min-width:46px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:6px;stroke:#fff;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2.ActivatedRoute }, { type: i1$2.FormBuilder }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i4.ToastService }, { type: i1$1.NgbModal }, { type: i2$1.PageInfoService }, { type: i5.Location }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { canvasRef: [{
                 type: ViewChild,
                 args: ["baseCanvas"]
@@ -66732,7 +66963,7 @@ class CadRenderComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${fixtureData?.fixtureCapacity ?? 0} . VM - ${fixtureData?.vmConfig?.length ?? 0}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData?.shelfConfig)} . VM - ${fixtureData?.vmConfig?.length ?? 0}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,
@@ -67402,11 +67633,11 @@ class DeleteFloorComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteFloorComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DeleteFloorComponent, selector: "lib-delete-floor", ngImport: i0, template: "<section class=\"delete-floor p-3\">\n  <lib-tool-page-header\n    title=\"Delete Floor\"\n    description=\"Removes a floor and every row that references it \u2014 fixtures, shelves, task compliance, processed tasks, comments, and revisions. If this is the only floor, the entire planogram is removed. The store entry is never touched.\"\n  ></lib-tool-page-header>\n  <div class=\"card p-4\" style=\"max-width: 720px;\">\n\n    <!-- Store -->\n    <div class=\"mb-3\">\n      <lib-reactive-select\n        label=\"Store\"\n        [idField]=\"'storeId'\"\n        [nameField]=\"'storeName'\"\n        [data]=\"storeOptions\"\n        [search]=\"true\"\n        [ngModel]=\"selectedStoreId\"\n        (ngModelChange)=\"onStoreSelected($event)\">\n      </lib-reactive-select>\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n    </div>\n\n    <!-- Floor -->\n    <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\n      <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\n        <div class=\"text-muted small\">Loading floors...</div>\n      </ng-container>\n      <ng-template #floorPicker>\n        <ng-container *ngIf=\"floors.length > 0; else noFloors\">\n          <lib-reactive-select\n            label=\"Floor\"\n            [idField]=\"'_id'\"\n            [nameField]=\"'displayName'\"\n            [data]=\"floors\"\n            [search]=\"true\"\n            [ngModel]=\"selectedFloorId\"\n            (ngModelChange)=\"onFloorSelected($event)\">\n          </lib-reactive-select>\n        </ng-container>\n        <ng-template #noFloors>\n          <div class=\"text-muted small\">No floors found for this store.</div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <!-- Status + cascade preview -->\n    <ng-container *ngIf=\"selectedFloorId\">\n      <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\n        <div class=\"text-muted small\">Loading floor details...</div>\n      </ng-container>\n      <ng-template #impactBlock>\n        <ng-container *ngIf=\"impact\">\n          <div class=\"mb-3 p-3 rounded info-block\">\n            <div class=\"row gx-3 gy-2 small\">\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Floor status</span>\n                <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Planogram status</span>\n                <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Plano approved</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Verification done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Merch rollout done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">VM rollout done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\n              </div>\n              <div class=\"col-12\">\n                <span class=\"text-muted d-block\">Total floors in this planogram</span>\n                <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"mb-3 p-3 rounded cascade-block\">\n            <div class=\"fw-semibold mb-2\">Will delete</div>\n            <ul class=\"small mb-0 ps-3\">\n              <li>1 floor (storelayouts)</li>\n              <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\n              <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\n              <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\n              <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\n              <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\n              <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\n            </ul>\n            <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\n          </div>\n\n          <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\n            <strong>This is the only floor in this planogram.</strong>\n            Deleting it will also remove the planogram entry \u2014 the plano will\n            disappear completely. The store record itself will NOT be deleted.\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <!-- Submit -->\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\n      {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\n    </button>\n\n    <div class=\"mt-3 alert\" *ngIf=\"message\"\n      [class.alert-success]=\"messageType === 'success'\"\n      [class.alert-danger]=\"messageType === 'error'\"\n      style=\"white-space: pre-line;\">\n      {{ message }}\n    </div>\n  </div>\n</section>\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: ["title", "description", "backLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DeleteFloorComponent, selector: "lib-delete-floor", ngImport: i0, template: "<section class=\"delete-floor p-3\">\r\n  <lib-tool-page-header\r\n    title=\"Delete Floor\"\r\n    description=\"Removes a floor and every row that references it \u2014 fixtures, shelves, task compliance, processed tasks, comments, and revisions. If this is the only floor, the entire planogram is removed. The store entry is never touched.\"\r\n  ></lib-tool-page-header>\r\n  <div class=\"card p-4\" style=\"max-width: 720px;\">\r\n\r\n    <!-- Store -->\r\n    <div class=\"mb-3\">\r\n      <lib-reactive-select\r\n        label=\"Store\"\r\n        [idField]=\"'storeId'\"\r\n        [nameField]=\"'storeName'\"\r\n        [data]=\"storeOptions\"\r\n        [search]=\"true\"\r\n        [ngModel]=\"selectedStoreId\"\r\n        (ngModelChange)=\"onStoreSelected($event)\">\r\n      </lib-reactive-select>\r\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\r\n    </div>\r\n\r\n    <!-- Floor -->\r\n    <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\r\n      <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\r\n        <div class=\"text-muted small\">Loading floors...</div>\r\n      </ng-container>\r\n      <ng-template #floorPicker>\r\n        <ng-container *ngIf=\"floors.length > 0; else noFloors\">\r\n          <lib-reactive-select\r\n            label=\"Floor\"\r\n            [idField]=\"'_id'\"\r\n            [nameField]=\"'displayName'\"\r\n            [data]=\"floors\"\r\n            [search]=\"true\"\r\n            [ngModel]=\"selectedFloorId\"\r\n            (ngModelChange)=\"onFloorSelected($event)\">\r\n          </lib-reactive-select>\r\n        </ng-container>\r\n        <ng-template #noFloors>\r\n          <div class=\"text-muted small\">No floors found for this store.</div>\r\n        </ng-template>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <!-- Status + cascade preview -->\r\n    <ng-container *ngIf=\"selectedFloorId\">\r\n      <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\r\n        <div class=\"text-muted small\">Loading floor details...</div>\r\n      </ng-container>\r\n      <ng-template #impactBlock>\r\n        <ng-container *ngIf=\"impact\">\r\n          <div class=\"mb-3 p-3 rounded info-block\">\r\n            <div class=\"row gx-3 gy-2 small\">\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Floor status</span>\r\n                <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Planogram status</span>\r\n                <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Plano approved</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Verification done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Merch rollout done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">VM rollout done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <span class=\"text-muted d-block\">Total floors in this planogram</span>\r\n                <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mb-3 p-3 rounded cascade-block\">\r\n            <div class=\"fw-semibold mb-2\">Will delete</div>\r\n            <ul class=\"small mb-0 ps-3\">\r\n              <li>1 floor (storelayouts)</li>\r\n              <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\r\n              <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\r\n              <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\r\n              <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\r\n              <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\r\n              <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\r\n            </ul>\r\n            <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\r\n          </div>\r\n\r\n          <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\r\n            <strong>This is the only floor in this planogram.</strong>\r\n            Deleting it will also remove the planogram entry \u2014 the plano will\r\n            disappear completely. The store record itself will NOT be deleted.\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n    <!-- Submit -->\r\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\r\n      {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\r\n    </button>\r\n\r\n    <div class=\"mt-3 alert\" *ngIf=\"message\"\r\n      [class.alert-success]=\"messageType === 'success'\"\r\n      [class.alert-danger]=\"messageType === 'error'\"\r\n      style=\"white-space: pre-line;\">\r\n      {{ message }}\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: ["title", "description", "backLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteFloorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-delete-floor", template: "<section class=\"delete-floor p-3\">\n  <lib-tool-page-header\n    title=\"Delete Floor\"\n    description=\"Removes a floor and every row that references it \u2014 fixtures, shelves, task compliance, processed tasks, comments, and revisions. If this is the only floor, the entire planogram is removed. The store entry is never touched.\"\n  ></lib-tool-page-header>\n  <div class=\"card p-4\" style=\"max-width: 720px;\">\n\n    <!-- Store -->\n    <div class=\"mb-3\">\n      <lib-reactive-select\n        label=\"Store\"\n        [idField]=\"'storeId'\"\n        [nameField]=\"'storeName'\"\n        [data]=\"storeOptions\"\n        [search]=\"true\"\n        [ngModel]=\"selectedStoreId\"\n        (ngModelChange)=\"onStoreSelected($event)\">\n      </lib-reactive-select>\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n    </div>\n\n    <!-- Floor -->\n    <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\n      <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\n        <div class=\"text-muted small\">Loading floors...</div>\n      </ng-container>\n      <ng-template #floorPicker>\n        <ng-container *ngIf=\"floors.length > 0; else noFloors\">\n          <lib-reactive-select\n            label=\"Floor\"\n            [idField]=\"'_id'\"\n            [nameField]=\"'displayName'\"\n            [data]=\"floors\"\n            [search]=\"true\"\n            [ngModel]=\"selectedFloorId\"\n            (ngModelChange)=\"onFloorSelected($event)\">\n          </lib-reactive-select>\n        </ng-container>\n        <ng-template #noFloors>\n          <div class=\"text-muted small\">No floors found for this store.</div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <!-- Status + cascade preview -->\n    <ng-container *ngIf=\"selectedFloorId\">\n      <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\n        <div class=\"text-muted small\">Loading floor details...</div>\n      </ng-container>\n      <ng-template #impactBlock>\n        <ng-container *ngIf=\"impact\">\n          <div class=\"mb-3 p-3 rounded info-block\">\n            <div class=\"row gx-3 gy-2 small\">\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Floor status</span>\n                <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Planogram status</span>\n                <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Plano approved</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Verification done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">Merch rollout done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\n              </div>\n              <div class=\"col-6\">\n                <span class=\"text-muted d-block\">VM rollout done</span>\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\n              </div>\n              <div class=\"col-12\">\n                <span class=\"text-muted d-block\">Total floors in this planogram</span>\n                <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"mb-3 p-3 rounded cascade-block\">\n            <div class=\"fw-semibold mb-2\">Will delete</div>\n            <ul class=\"small mb-0 ps-3\">\n              <li>1 floor (storelayouts)</li>\n              <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\n              <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\n              <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\n              <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\n              <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\n              <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\n            </ul>\n            <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\n          </div>\n\n          <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\n            <strong>This is the only floor in this planogram.</strong>\n            Deleting it will also remove the planogram entry \u2014 the plano will\n            disappear completely. The store record itself will NOT be deleted.\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <!-- Submit -->\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\n      {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\n    </button>\n\n    <div class=\"mt-3 alert\" *ngIf=\"message\"\n      [class.alert-success]=\"messageType === 'success'\"\n      [class.alert-danger]=\"messageType === 'error'\"\n      style=\"white-space: pre-line;\">\n      {{ message }}\n    </div>\n  </div>\n</section>\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"] }]
+            args: [{ selector: "lib-delete-floor", template: "<section class=\"delete-floor p-3\">\r\n  <lib-tool-page-header\r\n    title=\"Delete Floor\"\r\n    description=\"Removes a floor and every row that references it \u2014 fixtures, shelves, task compliance, processed tasks, comments, and revisions. If this is the only floor, the entire planogram is removed. The store entry is never touched.\"\r\n  ></lib-tool-page-header>\r\n  <div class=\"card p-4\" style=\"max-width: 720px;\">\r\n\r\n    <!-- Store -->\r\n    <div class=\"mb-3\">\r\n      <lib-reactive-select\r\n        label=\"Store\"\r\n        [idField]=\"'storeId'\"\r\n        [nameField]=\"'storeName'\"\r\n        [data]=\"storeOptions\"\r\n        [search]=\"true\"\r\n        [ngModel]=\"selectedStoreId\"\r\n        (ngModelChange)=\"onStoreSelected($event)\">\r\n      </lib-reactive-select>\r\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\r\n    </div>\r\n\r\n    <!-- Floor -->\r\n    <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\r\n      <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\r\n        <div class=\"text-muted small\">Loading floors...</div>\r\n      </ng-container>\r\n      <ng-template #floorPicker>\r\n        <ng-container *ngIf=\"floors.length > 0; else noFloors\">\r\n          <lib-reactive-select\r\n            label=\"Floor\"\r\n            [idField]=\"'_id'\"\r\n            [nameField]=\"'displayName'\"\r\n            [data]=\"floors\"\r\n            [search]=\"true\"\r\n            [ngModel]=\"selectedFloorId\"\r\n            (ngModelChange)=\"onFloorSelected($event)\">\r\n          </lib-reactive-select>\r\n        </ng-container>\r\n        <ng-template #noFloors>\r\n          <div class=\"text-muted small\">No floors found for this store.</div>\r\n        </ng-template>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <!-- Status + cascade preview -->\r\n    <ng-container *ngIf=\"selectedFloorId\">\r\n      <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\r\n        <div class=\"text-muted small\">Loading floor details...</div>\r\n      </ng-container>\r\n      <ng-template #impactBlock>\r\n        <ng-container *ngIf=\"impact\">\r\n          <div class=\"mb-3 p-3 rounded info-block\">\r\n            <div class=\"row gx-3 gy-2 small\">\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Floor status</span>\r\n                <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Planogram status</span>\r\n                <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Plano approved</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Verification done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">Merch rollout done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <span class=\"text-muted d-block\">VM rollout done</span>\r\n                <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <span class=\"text-muted d-block\">Total floors in this planogram</span>\r\n                <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mb-3 p-3 rounded cascade-block\">\r\n            <div class=\"fw-semibold mb-2\">Will delete</div>\r\n            <ul class=\"small mb-0 ps-3\">\r\n              <li>1 floor (storelayouts)</li>\r\n              <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\r\n              <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\r\n              <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\r\n              <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\r\n              <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\r\n              <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\r\n            </ul>\r\n            <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\r\n          </div>\r\n\r\n          <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\r\n            <strong>This is the only floor in this planogram.</strong>\r\n            Deleting it will also remove the planogram entry \u2014 the plano will\r\n            disappear completely. The store record itself will NOT be deleted.\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n    <!-- Submit -->\r\n    <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\r\n      {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\r\n    </button>\r\n\r\n    <div class=\"mt-3 alert\" *ngIf=\"message\"\r\n      [class.alert-success]=\"messageType === 'success'\"\r\n      [class.alert-danger]=\"messageType === 'error'\"\r\n      style=\"white-space: pre-line;\">\r\n      {{ message }}\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"] }]
         }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i1$1.NgbModal }] });
 
 class UpdateFixtureTypeComponent {
@@ -69029,11 +69260,11 @@ class LayoutTouchupComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutTouchupComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i4.ToastService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutTouchupComponent, selector: "lib-layout-touchup", ngImport: i0, template: "<div class=\"touchup-selector\">\n  <lib-tool-page-header\n    title=\"Layout Touchup\"\n    description=\"Reposition or resize existing walls, fixtures, entrances and other elements, or tweak individual fixture details \u2014 without invalidating any verification responses.\"\n  ></lib-tool-page-header>\n\n  <div class=\"row g-3\">\n    <div class=\"col-md-6\">\n      <lib-reactive-select\n        label=\"Store\"\n        [idField]=\"'id'\"\n        [nameField]=\"'label'\"\n        [data]=\"storeOptions\"\n        [search]=\"true\"\n        [ngModel]=\"selectedStore?.id\"\n        (ngModelChange)=\"onStoreChange($event)\">\n      </lib-reactive-select>\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n      <div class=\"text-muted small mt-1\" *ngIf=\"!isLoadingStores\">\n        Active stores with a planogram only.\n      </div>\n    </div>\n\n    <div class=\"col-md-6\" *ngIf=\"selectedStore\">\n      <ng-container *ngIf=\"isLoadingFloor; else floorPicker\">\n        <div class=\"text-muted small\">Loading floors...</div>\n      </ng-container>\n      <ng-template #floorPicker>\n        <lib-reactive-select\n          label=\"Floor\"\n          [idField]=\"'id'\"\n          [nameField]=\"'label'\"\n          [data]=\"floorOptions\"\n          [search]=\"false\"\n          [ngModel]=\"selectedFloorId\"\n          (ngModelChange)=\"selectedFloorId = $event\">\n        </lib-reactive-select>\n      </ng-template>\n    </div>\n  </div>\n\n  <div class=\"mt-4 d-flex justify-content-end\">\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"!selectedFloorId || isLoadingFloor\"\n      (click)=\"openEditor()\">\n      Open Editor\n    </button>\n  </div>\n</div>\n", styles: [".touchup-selector{max-width:960px}.touchup-selector h4{font-size:18px;font-weight:600;color:#101828}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: ["title", "description", "backLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutTouchupComponent, selector: "lib-layout-touchup", ngImport: i0, template: "<div class=\"touchup-selector\">\r\n  <lib-tool-page-header\r\n    title=\"Layout Touchup\"\r\n    description=\"Reposition or resize existing walls, fixtures, entrances and other elements, or tweak individual fixture details \u2014 without invalidating any verification responses.\"\r\n  ></lib-tool-page-header>\r\n\r\n  <div class=\"row g-3\">\r\n    <div class=\"col-md-6\">\r\n      <lib-reactive-select\r\n        label=\"Store\"\r\n        [idField]=\"'id'\"\r\n        [nameField]=\"'label'\"\r\n        [data]=\"storeOptions\"\r\n        [search]=\"true\"\r\n        [ngModel]=\"selectedStore?.id\"\r\n        (ngModelChange)=\"onStoreChange($event)\">\r\n      </lib-reactive-select>\r\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\r\n      <div class=\"text-muted small mt-1\" *ngIf=\"!isLoadingStores\">\r\n        Active stores with a planogram only.\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-md-6\" *ngIf=\"selectedStore\">\r\n      <ng-container *ngIf=\"isLoadingFloor; else floorPicker\">\r\n        <div class=\"text-muted small\">Loading floors...</div>\r\n      </ng-container>\r\n      <ng-template #floorPicker>\r\n        <lib-reactive-select\r\n          label=\"Floor\"\r\n          [idField]=\"'id'\"\r\n          [nameField]=\"'label'\"\r\n          [data]=\"floorOptions\"\r\n          [search]=\"false\"\r\n          [ngModel]=\"selectedFloorId\"\r\n          (ngModelChange)=\"selectedFloorId = $event\">\r\n        </lib-reactive-select>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"mt-4 d-flex justify-content-end\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn btn-primary\"\r\n      [disabled]=\"!selectedFloorId || isLoadingFloor\"\r\n      (click)=\"openEditor()\">\r\n      Open Editor\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".touchup-selector{max-width:960px}.touchup-selector h4{font-size:18px;font-weight:600;color:#101828}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: ["title", "description", "backLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutTouchupComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-layout-touchup", template: "<div class=\"touchup-selector\">\n  <lib-tool-page-header\n    title=\"Layout Touchup\"\n    description=\"Reposition or resize existing walls, fixtures, entrances and other elements, or tweak individual fixture details \u2014 without invalidating any verification responses.\"\n  ></lib-tool-page-header>\n\n  <div class=\"row g-3\">\n    <div class=\"col-md-6\">\n      <lib-reactive-select\n        label=\"Store\"\n        [idField]=\"'id'\"\n        [nameField]=\"'label'\"\n        [data]=\"storeOptions\"\n        [search]=\"true\"\n        [ngModel]=\"selectedStore?.id\"\n        (ngModelChange)=\"onStoreChange($event)\">\n      </lib-reactive-select>\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n      <div class=\"text-muted small mt-1\" *ngIf=\"!isLoadingStores\">\n        Active stores with a planogram only.\n      </div>\n    </div>\n\n    <div class=\"col-md-6\" *ngIf=\"selectedStore\">\n      <ng-container *ngIf=\"isLoadingFloor; else floorPicker\">\n        <div class=\"text-muted small\">Loading floors...</div>\n      </ng-container>\n      <ng-template #floorPicker>\n        <lib-reactive-select\n          label=\"Floor\"\n          [idField]=\"'id'\"\n          [nameField]=\"'label'\"\n          [data]=\"floorOptions\"\n          [search]=\"false\"\n          [ngModel]=\"selectedFloorId\"\n          (ngModelChange)=\"selectedFloorId = $event\">\n        </lib-reactive-select>\n      </ng-template>\n    </div>\n  </div>\n\n  <div class=\"mt-4 d-flex justify-content-end\">\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"!selectedFloorId || isLoadingFloor\"\n      (click)=\"openEditor()\">\n      Open Editor\n    </button>\n  </div>\n</div>\n", styles: [".touchup-selector{max-width:960px}.touchup-selector h4{font-size:18px;font-weight:600;color:#101828}\n"] }]
+            args: [{ selector: "lib-layout-touchup", template: "<div class=\"touchup-selector\">\r\n  <lib-tool-page-header\r\n    title=\"Layout Touchup\"\r\n    description=\"Reposition or resize existing walls, fixtures, entrances and other elements, or tweak individual fixture details \u2014 without invalidating any verification responses.\"\r\n  ></lib-tool-page-header>\r\n\r\n  <div class=\"row g-3\">\r\n    <div class=\"col-md-6\">\r\n      <lib-reactive-select\r\n        label=\"Store\"\r\n        [idField]=\"'id'\"\r\n        [nameField]=\"'label'\"\r\n        [data]=\"storeOptions\"\r\n        [search]=\"true\"\r\n        [ngModel]=\"selectedStore?.id\"\r\n        (ngModelChange)=\"onStoreChange($event)\">\r\n      </lib-reactive-select>\r\n      <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\r\n      <div class=\"text-muted small mt-1\" *ngIf=\"!isLoadingStores\">\r\n        Active stores with a planogram only.\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-md-6\" *ngIf=\"selectedStore\">\r\n      <ng-container *ngIf=\"isLoadingFloor; else floorPicker\">\r\n        <div class=\"text-muted small\">Loading floors...</div>\r\n      </ng-container>\r\n      <ng-template #floorPicker>\r\n        <lib-reactive-select\r\n          label=\"Floor\"\r\n          [idField]=\"'id'\"\r\n          [nameField]=\"'label'\"\r\n          [data]=\"floorOptions\"\r\n          [search]=\"false\"\r\n          [ngModel]=\"selectedFloorId\"\r\n          (ngModelChange)=\"selectedFloorId = $event\">\r\n        </lib-reactive-select>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"mt-4 d-flex justify-content-end\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"btn btn-primary\"\r\n      [disabled]=\"!selectedFloorId || isLoadingFloor\"\r\n      (click)=\"openEditor()\">\r\n      Open Editor\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".touchup-selector{max-width:960px}.touchup-selector h4{font-size:18px;font-weight:600;color:#101828}\n"] }]
         }], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i4.ToastService }, { type: i2.Router }] });
 
 /**
@@ -76084,6 +76315,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ selector: 'lib-look-plano-collection-form', template: "<div *ngIf=\"!accessChecked\" class=\"card p-5 m-4 text-center text-muted\">Checking access\u2026</div>\r\n\r\n<div *ngIf=\"accessChecked && !allowed\" class=\"card p-5 m-4\">\r\n  <div class=\"access-denied text-center py-10\">\r\n    <div class=\"access-denied-icon mb-4\"><i class=\"bi bi-shield-lock\"></i></div>\r\n    <h3 class=\"mb-2\">Access denied</h3>\r\n    <p class=\"text-muted mb-0\">\r\n      You don't have permission to access Looks. Contact your administrator\r\n      to be added to the allowed users list.\r\n    </p>\r\n  </div>\r\n</div>\r\n\r\n<section class=\"look-form\" *ngIf=\"accessChecked && allowed\">\r\n  <!-- Top bar (bound to the outer form) -->\r\n  <div class=\"card p-4 mb-4\" [formGroup]=\"form\">\r\n    <div class=\"row align-items-end\">\r\n      <div class=\"col-md-4\">\r\n        <label class=\"form-label fw-bold\">Name *</label>\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"name\" placeholder=\"e.g. Master Look Plan FY26\" />\r\n      </div>\r\n      <div class=\"col-md-5\">\r\n        <label class=\"form-label fw-bold\">Description</label>\r\n        <input type=\"text\" class=\"form-control\" formControlName=\"description\" placeholder=\"Optional description\" />\r\n      </div>\r\n      <div class=\"col-md-1 text-center\">\r\n        <label class=\"form-label fw-bold d-block\">Active</label>\r\n        <input type=\"checkbox\" class=\"form-check-input\" formControlName=\"isActive\" />\r\n      </div>\r\n      <div class=\"col-md-2 text-end\">\r\n        <button type=\"button\" class=\"btn btn-light me-2\" (click)=\"cancel()\">Cancel</button>\r\n        <button type=\"button\" class=\"btn btn-primary\" [disabled]=\"saving\" (click)=\"save()\">\r\n          {{ saving ? 'Saving\u2026' : 'Save' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Three-pane editor -->\r\n  <div class=\"row mx-0 g-3\">\r\n    <!-- Left: Looks list (no form binding needed \u2014 just navigation) -->\r\n    <div class=\"col-md-3\">\r\n      <div class=\"card p-3 h-100\">\r\n        <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n          <h6 class=\"m-0\">MBQ Bucket - Fixture Combinations</h6>\r\n          <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"addLook()\">+ Add Look</button>\r\n        </div>\r\n        <div *ngIf=\"looks.length === 0\" class=\"text-muted small\">No looks yet. Add one to start.</div>\r\n        <div class=\"looks-tree\">\r\n          <div\r\n            *ngFor=\"let look of looks.controls; let i = index; trackBy: trackByIndex\"\r\n            class=\"look-row d-flex justify-content-between align-items-center px-2 py-2 mb-1 rounded\"\r\n            [class.selected]=\"selectedLookIndex === i\"\r\n            [style.background-color]=\"bucketColor($any(look))\"\r\n            (click)=\"selectLook(i)\"\r\n          >\r\n            <span class=\"d-flex align-items-center gap-2 text-truncate\">\r\n              <span class=\"bucket-dot\" [style.background-color]=\"bucketColor($any(look))\"></span>\r\n              <span class=\"text-truncate\">{{ lookTitle($any(look)) }}</span>\r\n              <ng-container *ngIf=\"fixtureTypeBadge($any(look)) as ftb\">\r\n                <span class=\"fixture-type-badge\" [ngClass]=\"ftb.cls\">{{ ftb.label }}</span>\r\n              </ng-container>\r\n            </span>\r\n            <span class=\"look-row-actions\">\r\n              <button type=\"button\" class=\"row-action-btn duplicate\" title=\"Duplicate look\"\r\n                (click)=\"$event.stopPropagation(); duplicateLook(i)\">\r\n                <i class=\"bi bi-files\"></i>\r\n              </button>\r\n              <button type=\"button\" class=\"row-action-btn remove\" title=\"Remove look\"\r\n                (click)=\"$event.stopPropagation(); removeLook(i)\">\r\n                <i class=\"bi bi-trash3\"></i>\r\n              </button>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Centre: selected Look metadata + slots -->\r\n    <div class=\"col-md-3\">\r\n      <ng-container *ngIf=\"selectedLookGroup as lookGroup; else noLook\">\r\n        <div class=\"card p-3 h-100\" [formGroup]=\"lookGroup\">\r\n          <h6 class=\"mb-3\">Fixture Combination Details</h6>\r\n\r\n          <div class=\"row g-2 mb-3\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">MBQ bucket</label>\r\n              <lib-searchable-select\r\n                [items]=\"mbqBucketItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select MBQ bucket\"\r\n                formControlName=\"mbqBucket\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Fixture count *</label>\r\n              <input type=\"number\" min=\"0\" max=\"30\" class=\"form-control form-control-sm\" formControlName=\"fixtureCount\" />\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">CAD Header Varients</label>\r\n              <lib-chips-input\r\n                class=\"cad-header-variants-input\"\r\n                formControlName=\"cadHeaderVariants\"\r\n                placeholder=\"Type a variant and press Enter\">\r\n              </lib-chips-input>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Positions</label>\r\n              <multiselect-chip-dropdown\r\n                [items]=\"fixtureTypeOptions\"\r\n                idField=\"id\"\r\n                nameField=\"name\"\r\n                placeholder=\"Select fixture position\"\r\n                formControlName=\"fixtureType\">\r\n              </multiselect-chip-dropdown>\r\n            </div>\r\n          </div>\r\n\r\n          <hr />\r\n\r\n          <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n            <h6 class=\"m-0\">Fixtures</h6>\r\n            <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"addSlot()\">+ Add Fixture</button>\r\n          </div>\r\n          <div class=\"slots-list\">\r\n            <div\r\n              *ngFor=\"let slot of (selectedSlotsArray?.controls || []); let s = index; trackBy: trackByIndex\"\r\n              class=\"slot-row d-flex justify-content-between align-items-center px-2 py-2 mb-1 rounded\"\r\n              [class.selected]=\"selectedSlotIndex === s\"\r\n              (click)=\"selectSlot(s)\"\r\n            >\r\n              <div class=\"d-flex flex-column\">\r\n                <span class=\"fw-bold small\">\r\n                  Fixture {{ $any(slot).get('slotIndex')?.value }} \u2014 {{ $any(slot).get('slotType')?.value }}\r\n                </span>\r\n                <span class=\"text-muted small\">\r\n                  {{ $any(slot).get('brand')?.value || '(no brand)' }} \u00B7\r\n                  {{ $any(slot).get('fixtureLevelZone')?.value || '(no zone)' }}\r\n                </span>\r\n              </div>\r\n              <button type=\"button\" class=\"btn btn-sm btn-light-danger ms-2\" (click)=\"$event.stopPropagation(); removeSlot(s)\">\u00D7</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noLook>\r\n        <div class=\"card p-5 h-100 text-center text-muted\">Select or add a Look to edit it.</div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <!-- Right: selected slot \u2014 placements editor -->\r\n    <div class=\"col-md-6\">\r\n      <ng-container *ngIf=\"selectedSlotGroup as slotGroup; else noSlot\">\r\n        <div class=\"card p-3 h-100\" [formGroup]=\"slotGroup\">\r\n          <h6 class=\"mb-3\">Fixture {{ selectedSlotIndex + 1 }} - Definition</h6>\r\n\r\n          <div class=\"row g-2 mb-3\">\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small text-muted\">Slot index (auto)</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [value]=\"selectedSlotIndex + 1\" readonly disabled />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Fixture Type</label>\r\n              <select class=\"form-select form-select-sm\" formControlName=\"slotType\">\r\n                <option *ngFor=\"let opt of availableSlotTypes\" [value]=\"opt.id\">{{ opt.name }}</option>\r\n              </select>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"form-label small\">Brand</label>\r\n              <lib-searchable-select\r\n                [items]=\"brandItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select brand\"\r\n                formControlName=\"brand\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Header</label>\r\n              <lib-searchable-select\r\n                [items]=\"fixtureHeaderItems\"\r\n                idField=\"value\"\r\n                nameField=\"label\"\r\n                placeholder=\"Select fixture header\"\r\n                formControlName=\"fixtureLevelZone\">\r\n              </lib-searchable-select>\r\n            </div>\r\n            <div class=\"col-md-12\">\r\n              <label class=\"form-label small\">Fixture Templates</label>\r\n              <multiselect-chip-dropdown\r\n                class=\"fixture-libraries-select\"\r\n                [items]=\"fixtureLibraryItemsForSlot\"\r\n                idField=\"id\"\r\n                nameField=\"name\"\r\n                [search]=\"true\"\r\n                searchField=\"name\"\r\n                placeholder=\"Select fixture templates\"\r\n                formControlName=\"fixtureLibraryRefs\">\r\n              </multiselect-chip-dropdown>\r\n              <small class=\"text-muted\" *ngIf=\"slotGroup.get('slotType')?.value === 'eurocenter'\">\r\n                Showing floor fixtures (eurocenter slot).\r\n              </small>\r\n              <small class=\"text-muted\" *ngIf=\"slotGroup.get('slotType')?.value !== 'eurocenter'\">\r\n                Showing wall fixtures (shelf slot).\r\n              </small>\r\n            </div>\r\n          </div>\r\n\r\n          <hr />\r\n\r\n          <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n            <h6 class=\"m-0\">Look and Visual Merchandising Placements</h6>\r\n            <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"addPlacement()\">+ Add placement</button>\r\n          </div>\r\n          <div *ngIf=\"(selectedPlacements?.length || 0) === 0\" class=\"text-muted small mb-2\">\r\n            No placements yet. Click <strong>+ Add placement</strong> to add one.\r\n          </div>\r\n          <div class=\"placements-scroll\" formArrayName=\"placements\">\r\n            <div\r\n              *ngFor=\"let p of (selectedPlacements?.controls || []); let pi = index; trackBy: trackByIndex\"\r\n              class=\"placement-row mb-2\"\r\n              [formGroupName]=\"pi\"\r\n            >\r\n              <div class=\"d-flex align-items-start gap-2 placement-fields\">\r\n                <div class=\"ph-field\">\r\n                  <select class=\"form-select form-select-sm\" formControlName=\"kind\">\r\n                    <option value=\"pid\">Product Merchandising</option>\r\n                    <option value=\"vm\">Visual Merchandising</option>\r\n                  </select>\r\n                </div>\r\n\r\n                <!-- Visual Merchandising rows: VM Type (single) + VM Artwork (single) -->\r\n                <ng-container *ngIf=\"$any(p).get('kind')?.value === 'vm'; else pidInputs\">\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"vmTypeOptions\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      placeholder=\"Visual Merchandising Type\"\r\n                      formControlName=\"position\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"vmArtworkOptionsFor($any(p).get('position')?.value)\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      placeholder=\"Visual Merchandising Artwork\"\r\n                      formControlName=\"rawValue\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <!-- Product Merchandising rows: Top/Mid/Bottom position + multi-select product/SKU -->\r\n                <ng-template #pidInputs>\r\n                  <div class=\"ph-field\">\r\n                    <select class=\"form-select form-select-sm\" formControlName=\"position\">\r\n                      <option value=\"\">Position</option>\r\n                      <option value=\"Top\">Top</option>\r\n                      <option value=\"Mid\">Mid</option>\r\n                      <option value=\"Bottom\">Bottom</option>\r\n                    </select>\r\n                  </div>\r\n                  <div class=\"ph-field\">\r\n                    <lib-searchable-select\r\n                      [items]=\"productOptions\"\r\n                      idField=\"value\"\r\n                      nameField=\"label\"\r\n                      [multiple]=\"true\"\r\n                      placeholder=\"Product / SKU\"\r\n                      formControlName=\"rawValues\">\r\n                    </lib-searchable-select>\r\n                  </div>\r\n                </ng-template>\r\n\r\n                <button type=\"button\" class=\"btn btn-sm btn-light-danger ph-remove\" (click)=\"removePlacement(pi)\">\u00D7</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noSlot>\r\n        <div class=\"card p-5 h-100 text-center text-muted\">Select a fixture slot to edit placements.</div>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Per-slot Fixture Library Configuration card -->\r\n  <ng-container *ngIf=\"selectedSlotGroup as slotGroupForMap\">\r\n    <div class=\"card p-4 mt-4 library-config-card\" [formGroup]=\"slotGroupForMap\">\r\n      <div class=\"mb-4\">\r\n        <h5 class=\"form-label d-block mb-3\">Fixture library</h5>\r\n        <div class=\"library-chips\">\r\n          <button\r\n            *ngFor=\"let lib of selectedSlotLibrariesForDropdown\"\r\n            type=\"button\"\r\n            class=\"library-chip\"\r\n            [class.active]=\"selectedLibraryIdInMap === lib.id\"\r\n            (click)=\"onLibraryMapSelect(selectedLibraryIdInMap === lib.id ? '' : lib.id)\">\r\n            {{ lib.name }}\r\n          </button>\r\n        </div>\r\n        <small *ngIf=\"selectedSlotLibrariesForDropdown.length === 0\" class=\"text-muted\">\r\n          No libraries linked to this slot yet. Add some in the \"Fixture libraries\" multiselect above.\r\n        </small>\r\n      </div>\r\n\r\n      <div *ngIf=\"loadingLibraryDetails\" class=\"text-muted\">Loading fixture details\u2026</div>\r\n\r\n      <!--\r\n        Use *ngFor + trackBy keyed on (look, slot, library) so Angular treats\r\n        a switch as a new item \u2014 that forces the embedded template-products\r\n        / template-vms components to remount and rerun their ngOnInit\r\n        (otherwise their `isPageLoading` guard skips the form rebuild).\r\n      -->\r\n      <ng-container *ngFor=\"let _ of embeddedHostKeys; trackBy: trackByEmbeddedKey\">\r\n        <ul class=\"nav nav-tabs custom-tabs mb-3\">\r\n          <li class=\"nav-item\">\r\n            <button type=\"button\" class=\"nav-link\"\r\n              [class.active]=\"embeddedTab === 'products'\"\r\n              (click)=\"embeddedTab = 'products'\">Product Merchandising</button>\r\n          </li>\r\n          <li class=\"nav-item\">\r\n            <button type=\"button\" class=\"nav-link\"\r\n              [class.active]=\"embeddedTab === 'vms'\"\r\n              (click)=\"embeddedTab = 'vms'\">Visual Merchandising</button>\r\n          </li>\r\n        </ul>\r\n\r\n        <div *ngIf=\"embeddedTab === 'products'\">\r\n          <lib-template-products [looksMode]=\"true\"></lib-template-products>\r\n        </div>\r\n        <div *ngIf=\"embeddedTab === 'vms'\">\r\n          <lib-template-vms [looksMode]=\"true\"></lib-template-vms>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</section>\r\n", styles: [".access-denied .access-denied-icon i{font-size:48px;color:#ef4444;line-height:1}.look-form .col-md-3>.card,.look-form .col-md-6>.card{display:flex!important;flex-direction:column;height:85vh!important;min-height:720px}.look-form .looks-tree,.look-form .slots-list,.look-form .placements-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}.look-form .look-row,.look-form .slot-row{cursor:pointer;border:1px solid transparent;background:#f9fafb;transition:filter .15s ease,box-shadow .15s ease,border-color .15s ease}.look-form .look-row:hover,.look-form .slot-row:hover{filter:brightness(.96)}.look-form .look-row.selected,.look-form .slot-row.selected{filter:brightness(.96);outline:1px solid rgba(14,165,233,.55);outline-offset:-1px}.look-form .bucket-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.12)}.look-form .look-row-actions{flex-shrink:0;display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .15s ease}.look-form .look-row-actions .row-action-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:#94a3b8;cursor:pointer;transition:background-color .15s ease,color .15s ease}.look-form .look-row-actions .row-action-btn i{font-size:13px;line-height:1}.look-form .look-row-actions .row-action-btn:hover{background:#fff}.look-form .look-row-actions .row-action-btn.duplicate:hover{color:#0ea5e9}.look-form .look-row-actions .row-action-btn.remove:hover{color:#ef4444}.look-form .look-row:hover .look-row-actions,.look-form .look-row.selected .look-row-actions{opacity:1}.look-form .fixture-type-badge{display:inline-block;flex-shrink:0;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:600;line-height:14px;letter-spacing:.2px;border:1px solid transparent;white-space:nowrap}.look-form .fixture-type-badge.badge-wall{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.look-form .fixture-type-badge.badge-floor{background:#fed7aa;color:#9a3412;border-color:#fdba74}.look-form .fixture-type-badge.badge-mixed{background:#ede9fe;color:#6d28d9;border-color:#c4b5fd}.look-form .fixture-libraries-select{display:block}.look-form .fixture-libraries-select ::ng-deep .multiselect-container{align-items:flex-start}.look-form .fixture-libraries-select ::ng-deep .chip-list{max-height:84px;overflow-y:auto;padding-right:4px}.look-form .cad-header-variants-input{display:block}.look-form .cad-header-variants-input ::ng-deep .chips-input{max-height:84px;overflow-y:auto;align-content:flex-start;padding-right:4px}.look-form .placement-row .placement-fields .ph-field{flex:1 1 0;min-width:0}.look-form .placement-row .placement-fields .ph-remove{flex:0 0 auto}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .multiselect-container{padding:4px 10px;min-height:31px}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .chip-list{min-height:21px}.look-form .placement-row .placement-fields ::ng-deep multiselect-chip-dropdown .multi-placeholder{font-size:13px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.look-form .library-config-card .library-chips{display:flex;flex-wrap:wrap;gap:8px}.look-form .library-config-card .library-chip{background:#f1f5f9;border:1px solid #cbd5e1;color:#1e293b;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.look-form .library-config-card .library-chip:hover{background:#e2e8f0;border-color:#94a3b8}.look-form .library-config-card .library-chip.active{background:#0ea5e9;border-color:#0284c7;color:#fff}.look-form .library-config-card ::ng-deep #fixture-template-products .cols.col>ul.nav.nav-tabs.custom-tabs{display:none!important}.look-form .library-config-card ::ng-deep #fixture-template-products .cols.col-8>ul.nav.nav-tabs.custom-tabs{display:none!important}.look-form .library-config-card ::ng-deep #fixture-template-products input[readonly]{background-color:var(--bs-gray-200, #e9ecef);cursor:not-allowed}.look-form .library-config-card .fixture-preview{border:1px solid #e2e8f0;border-radius:8px;background:#fff;padding:12px}.look-form .library-config-card .fixture-preview .fx-header,.look-form .library-config-card .fixture-preview .fx-footer{background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:6px;padding:6px 10px;font-size:12px;color:#475569;text-align:center;margin:4px 0}.look-form .library-config-card .fixture-preview .fx-body{display:flex;flex-direction:column;gap:4px;padding:4px 0}.look-form .library-config-card .fixture-preview .fx-shelf{background:linear-gradient(180deg,#f8fafc,#eef2f7);border:1px solid #cbd5e1;border-radius:4px;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:13px;min-height:36px}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-badge{background:#0ea5e9;color:#fff;font-weight:700;padding:2px 8px;border-radius:999px;font-size:11px;flex-shrink:0}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-label{font-weight:500;color:#1e293b}.look-form .library-config-card .fixture-preview .fx-shelf .fx-shelf-meta{color:#64748b;font-size:11px;margin-left:auto}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-tray{background:linear-gradient(180deg,#fef3c7,#fde68a);border-color:#f59e0b}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-tray .fx-shelf-badge{background:#d97706}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-vmonly{background:linear-gradient(180deg,#ede9fe,#ddd6fe);border-color:#8b5cf6}.look-form .library-config-card .fixture-preview .fx-shelf.fx-shelf-vmonly .fx-shelf-badge{background:#7c3aed}.look-form .library-config-card .fixture-preview .fx-dims{text-align:center}.look-form .library-config-card .shelf-mappings{max-height:70vh;overflow-y:auto;padding-right:4px}.look-form .library-config-card .shelf-mappings .shelf-mapping{border:1px solid #e5e7eb;border-radius:8px;padding:12px;background:#f9fafb}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: i2$1.GlobalStateService }, { type: StoreBuilderService }, { type: i4.ToastService }, { type: i2$1.PageInfoService }, { type: PlanoDataService }] });
 
+/**
+ * Route guard for the Find & Replace pages. Allows navigation only when the
+ * session user's email is in the planostaticdatas `allowedFindReplaceUsers`
+ * allowlist (checked server-side via StoreBuilderService.getFindReplaceAccess).
+ * Denied users — and any error resolving access — are redirected to the shared
+ * Access-denied view. Same email-based mechanism the Looks feature uses.
+ */
+const findReplaceAccessGuard = () => {
+    const storeBuilderService = inject(StoreBuilderService);
+    const router = inject(Router);
+    const denied = () => router.createUrlTree(['/manage/planogram/access-denied'], {
+        queryParams: { feature: 'Find and Replace' },
+    });
+    return storeBuilderService.getFindReplaceAccess().pipe(map$1((res) => (res?.data?.allowed ? true : denied())), catchError(() => of(denied())));
+};
+
 const routes$1 = [
     {
         path: "layout-builder",
@@ -76159,6 +76406,7 @@ const routes$1 = [
     {
         path: "findAndReplace",
         component: FindAndReplaceComponent,
+        canActivate: [findReplaceAccessGuard],
     },
     {
         path: "fixture-template",
@@ -76275,10 +76523,12 @@ const routes$1 = [
     {
         path: "find-replace-table",
         component: FindReplaceTableComponent,
+        canActivate: [findReplaceAccessGuard],
     },
     {
         path: "find-replace",
         component: FindReplaceLayoutComponent,
+        canActivate: [findReplaceAccessGuard],
         children: [
             {
                 path: "prepare",
@@ -76293,6 +76543,7 @@ const routes$1 = [
     {
         path: "collection-update-ai",
         component: CollectionUpdateAiComponent,
+        canActivate: [findReplaceAccessGuard],
     },
     {
         path: "looks",
@@ -76302,6 +76553,10 @@ const routes$1 = [
         path: "looks/:collectionId",
         component: LookPlanoCollectionFormComponent,
     },
+    {
+        path: "access-denied",
+        component: AccessDeniedComponent,
+    },
 ];
 class TangoStoreBuilderRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoStoreBuilderRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -77391,7 +77646,8 @@ class TangoStoreBuilderModule {
             FixtureAnalyticsComponent,
             AnalyticsPopupComponent,
             LookPlanoCollectionComponent,
-            LookPlanoCollectionFormComponent], imports: [TangoStoreBuilderRoutingModule,
+            LookPlanoCollectionFormComponent,
+            AccessDeniedComponent], imports: [TangoStoreBuilderRoutingModule,
             ReactiveSelectComponent,
             CommonModule,
             FormsModule,
@@ -77569,6 +77825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         AnalyticsPopupComponent,
                         LookPlanoCollectionComponent,
                         LookPlanoCollectionFormComponent,
+                        AccessDeniedComponent,
                     ],
                     // Note: SearchableSelectComponent is standalone, added below in `imports`.
                     imports: [
@@ -78742,7 +78999,7 @@ class StorePlanoComponent {
             stroke: "transparent",
             fill: "transparent",
         });
-        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${fixtureData.fixtureCapacity} . VM - ${fixtureData.vmConfig?.length}`, {
+        const bottomTextContent = new fabric.Textbox(`Shelves - ${actualShelves.length} . Products -  ${getFixtureProductCapacity(fixtureData.shelfConfig)} . VM - ${fixtureData.vmConfig?.length}`, {
             left: bottomX + bottomWidth / 2,
             top: bottomY + bottomHeight / 2,
             fontSize: 5,