<f:spaceless>
    <f:if condition="{product.presenter.productVariation.program}">
        <v:variable.set name="program" value="{
            title: product.presenter.productVariation.program.title,
            uid: product.presenter.productVariation.program.uid
        }"></v:variable.set>
    </f:if>

    <v:variable.set name="backgroundImagesURLs" value="{v:iterator.filter(subject: {})}"></v:variable.set>
    <f:for each="{product.presenter.productVariation.backgroundImages}" as="backgroundImage" iteration="i">
        <v:variable.set name="url" value="{f:uri.image(src: backgroundImage.uid, treatIdAsReference: 1, absolute: 1)}" />    
        <v:variable.set name="backgroundImagesURLs">{backgroundImagesURLs -> v:iterator.push(add: url, key: i.index)}</v:variable.set>
    </f:for>
    
    <v:variable.set name="images" value="{v:iterator.filter(subject: {})}"></v:variable.set>
    <f:for each="{product.presenter.productVariation.presenter.images}" as="productVariationImage" iteration="i">
        <v:variable.set name="publicUrl" value="{v:uri.image(src: productVariationImage.uid, treatIdAsReference: 1, relative: 0, maxW: 1000, quality:92, format:'webp')}" />

        <v:variable.set name="mainColor" value="NULL"></v:variable.set>
        <f:if condition="{productVariationImage.mainColor}">
            <v:variable.set name="mainColor" value="{
                uid: productVariationImage.mainColor.uid,
                title: productVariationImage.mainColor.title,
                code: productVariationImage.mainColor.code
            }" />
        </f:if>
        
        <v:variable.set name="frameColor" value="NULL"></v:variable.set>
        <f:if condition="{productVariationImage.frameColor}">
            <v:variable.set name="frameColor" value="{
                uid: productVariationImage.frameColor.uid,
                title: productVariationImage.frameColor.title,
                code: productVariationImage.frameColor.code
            }" />
        </f:if>
 
        <v:variable.set name="glbUrl" value="NULL"></v:variable.set>
        <f:if condition="{productVariationImage.glb.0.uid}">
            <v:variable.set name="glbFile" value="{v:resource.file(identifier: productVariationImage.glb.0.uid, treatIdAsReference: 1)}" />
            <v:variable.set name="glbUrl" value="{glbFile.url}" />
        </f:if>

        <v:variable.set name="onlineCatalogProducts" value="{v:iterator.filter(subject: {})}"></v:variable.set>
        <f:if condition="{productVariationImage.onlineCatalogProducts}">
            <f:for each="{productVariationImage.onlineCatalogProducts}" as="onlineCatalogProduct" iteration="j">
                <v:variable.set name="onlineCatalogProduct" value="{
                    uid: onlineCatalogProduct.uid,
                    productId: onlineCatalogProduct.productId,
                    articleNo: onlineCatalogProduct.articleNo,
                    name: onlineCatalogProduct.name,
                    color: onlineCatalogProduct.color,
                    productImageUrl: onlineCatalogProduct.productImageUrl,
                    productThumbnailUrl: onlineCatalogProduct.productThumbnailUrl
                }" />
                <v:variable.set name="onlineCatalogProducts">{onlineCatalogProducts -> v:iterator.push(add: onlineCatalogProduct, key: j.index)}</v:variable.set>
            </f:for>
        </f:if>

        <v:variable.set name="image" value="{
            uid: productVariationImage.uid,
            mainColor: mainColor,
            frameColor: frameColor,
            onlineCatalogProducts: onlineCatalogProducts,
            presenter: {
                glbURL: glbUrl,
                publicURL: publicUrl
            }
        }" />
        <v:variable.set name="images">{images -> v:iterator.push(add: image, key: i.index)}</v:variable.set>
    </f:for>

    <v:variable.set name="glbUrl" value="NULL"></v:variable.set>
    <f:if condition="{product.glb.0.uid}">
        <v:variable.set name="glbFile" value="{v:resource.file(identifier: product.glb.0.uid, treatIdAsReference: 1)}" />
        <v:variable.set name="glbUrl" value="{glbFile.url}" />
    </f:if>

    <v:variable.set name="model" value="{
        uid: product.uid,
        presenter: {
            glbURL: glbUrl,
            productVariation: {
                uid: product.presenter.productVariation.uid,
                presenter: {
                    backgroundImagesURLs: backgroundImagesURLs,
                    images: images
                },
                program: program
            },
            programsCount: product.presenter.programsCount
        }
    }"/>

    {model -> v:format.json.encode()}
</f:spaceless>