<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, fileExtension:'webp', 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="{f:uri.image(src: productVariationImage.uid, fileExtension:'webp', treatIdAsReference: 1, absolute: 1)}" />

        <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="image" value="{
            uid: productVariationImage.uid,
            mainColor: mainColor,
            frameColor: frameColor,
            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="programsReduced" value="{v:iterator.filter(subject: {})}"></v:variable.set>

    <f:for each="{product.programs}" as="productProgram" iteration="i">
        <v:variable.set name="imageUrl" value="{f:uri.image(src: productProgram.presenter.image.uid, fileExtension:'webp', treatIdAsReference: 1, absolute: 1)}" />

        <v:variable.set name="programReduced" value="{
            uid: productProgram.uid,
            sustainable: productProgram.sustainable,
            title: productProgram.title,
            imageUrl: imageUrl
        }" />
        <v:variable.set name="programsReduced">{programsReduced -> v:iterator.push(add: programReduced, key: i.index)}</v:variable.set>
    </f:for>

    <v:variable.set name="systems" value="{v:iterator.filter(subject: {})}"></v:variable.set>
    <f:for each="{product.presenter.systems}" as="system" iteration="i">
        <v:variable.set name="systemReduced" value="{
            uid: system.uid,
            title: system.title,
            presenter: {
                pageURL: system.presenter.pageURL
            }
        }" />
        <v:variable.set name="systems">{systems -> v:iterator.push(add: systemReduced, key: i.index)}</v:variable.set>
    </f:for>

    <v:variable.set name="programsCount" value="{programsReduced -> f:count()}"></v:variable.set>

    <v:variable.set name="model" value="{
        uid: product.uid,
        title: product.title,
        teaserLinkText: product.teaserLinkText,
        presenter: {
            systems: systems,
            glbURL: glbUrl,
            productVariation: {
                uid: product.presenter.productVariation.uid,
                presenter: {
                    backgroundImagesURLs: backgroundImagesURLs,
                    images: images,
                    additionalProperties: product.presenter.productVariation.additionalProperties,
                    dimensions: product.presenter.productVariation.dimensions,
                },
                program: program
            },
            programsCount: programsCount
        },
        programs: programsReduced
    }"/>

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