{{#fields}}
{{#viewFirstSection}}
<div class=" " {{{first_section_style}}}>
    <div class="container-max-width nopadding-top">
        <div class="container">
            <div class="html-content">
                <div class="row">
                    <div class="col-sm-8 col-md-12 col-xs-12">
                        {{#pageTitle}}
                        <h1 class="brandcolor">{{{pageTitle}}}</h1>
                        {{/pageTitle}}
                        {{#pageSubtitle}}
                        <h3>{{{pageSubtitle}}}</h3>
                        {{/pageSubtitle}}
                        {{{htmlContent}}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{/viewFirstSection}}
{{{formattedTopSections}}}
{{#GD-ProductCategory}}
<section class="container-max-width GD-ProductCategory" {{{relatedItemsStyle}}}>
    <div class="container">
        {{#relatedItemsHeading}}
        <div class="row">
            <div class="col-md-12">
                <h2 class="brandcolor title">{{{relatedItemsHeading}}}</h2>
            </div>
        </div>
        {{/relatedItemsHeading}}
        <div class="ui doubling stackable {{relatedItemsLayoutCards}} cards product-parts ng-scope">
            {{#smallView}}
            {{#relatedItems}}
            <div class="ui raised card ">
                <div class="content ieFlex top-content">
                    <a target="_self" href="{{fields.fullLink}}" id="_TEASER_{{id}}" class="js-relatedItem ABC1">
                        <div class="card__content">
                            <h4 class="card__content__header--font-control">
                                {{{fields.teaserTitle}}}
                            </h4>
                        </div>
                    </a>
                </div>
                {{#fields.addPriceSpider}}
                <div class="ps-widget" ps-sku="{{fields.sku}}">
                </div>
                {{/fields.addPriceSpider}}

                {{#fields.associatedPages}}
                <div class="card__extra-content">
                    <div class="card__extra-content__tags">
                    {{#fields}}
                        {{#teaserTitle}}
                            {{! generatedUrl is added by the mutateModelAddUrlsToRelatedItems, it's not part of the graphql query }}
                            <a class="card__extra-content__tags__link-rectangular brandcolor brandbackgroundhover" href="{{generatedUrl}}">{{{.}}}</a>
                        {{/teaserTitle}}
                    {{/fields}}     
                    </div>
                </div>   
                {{/fields.associatedPages}}              

                {{^fields.addPriceSpider}}
                <div class="extra content ">
                    <a target="_self" href="{{fields.fullLink}}" class="card__no-tags js-relatedItem" id="_LEARNMORE_{{id}}">
                        <div class="callToAction">
                            <p class="brandcolor learnMoreLabel">
                                {{{fields.learnMoreLabel}}}
                            </p>
                        </div>
                    </a>
                </div>
                {{/fields.addPriceSpider}}
            </div>
            {{/relatedItems}}
            {{/smallView}}

            {{^smallView}}
            {{#relatedItems}}
            <div class="ui raised card ">
                <div class="content ieFlex top-content">
                    <a target="_self" href="{{fields.fullLink}}" id="_TEASER_{{id}}" class="js-relatedItem ABC2">
                        <img loading="lazy" class="card__image {{relatedSingleItem}}" src="{{fields.teaserMedia.fields.file.url}}" width="240" height="240"
                            alt="{{name}}" loading="lazy">
                        <div class="card__content">
                            <h4 class="card__content__header--font-control">
                                {{{fields.teaserTitle}}}
                            </h4>
                            <div class="card__content__description">
                                <div class="card__content__description--font-control">
                                    {{{fields.teaserSummary}}}
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                {{#fields.addPriceSpider}}
                <div class="ps-widget" ps-sku="{{fields.sku}}">
                </div>
                {{/fields.addPriceSpider}}

                {{#fields.associatedPages}}
                <div class="card__extra-content">
                    <div class="card__extra-content__tags">
                    {{#fields}}
                        {{#teaserTitle}}
                            {{! generatedUrl is added by the mutateModelAddUrlsToRelatedItems, it's not part of the graphql query }}
                            <a class="card__extra-content__tags__link-rectangular brandcolor brandbackgroundhover" href="{{generatedUrl}}">{{{.}}}</a>
                        {{/teaserTitle}}
                    {{/fields}}     
                    </div>
                </div>   
                {{/fields.associatedPages}}
                
                      

                {{^fields.addPriceSpider}}
                <div class="extra content ">
                    <a target="_self" href="{{fields.fullLink}}" class="card__no-tags js-relatedItem" id="_LEARNMORE_{{id}}">
                        <div class="callToAction">
                            <p class="brandcolor learnMoreLabel">
                                {{{fields.learnMoreLabel}}}
                            </p>
                        </div>
                    </a>
                </div>
                {{/fields.addPriceSpider}}
            </div>
            {{/relatedItems}}
            {{/smallView}}
        </div>
    </div>
</section>
{{/GD-ProductCategory}}
{{#GD-ProductLibrary}}
<section class="container-max-width GD-ProductLibrary">
    <div class="container">
        <div class="row GD-ProductLibrary-cards-wrapper">
            <div class="col-xs-12 col-sm-4 col-md-3 column-break {{relatedMediaItemsLayoutCards}}">
                {{#relatedMediaItems}}
                {{#fields}}
                <div class="card">
                    <a href={{media_link}} target="_blank" download="filename">
                        <img loading="lazy" class="lazyload card__image--border-radius card__image--img-center pdf-img"
                            src="{{smallRendition}}" data-was-processed="false" alt="{{file_name}}">
                        <div class="card__content">
                            <div class="card__content__header">
                                <h4 class="card__content__header--font-control"> {{{title}}}</h4>
                            </div>
                        </div>
                    </a>
                </div>
                {{/fields}}
                {{/relatedMediaItems}}
            </div>
        </div>
    </div>
</section>
{{/GD-ProductLibrary}}
{{#RI-Sections}}
<div class="container FlexibleGrid  ">
    <div class="row">
        <div class="col-md-12">
            {{#relatedSectionItems}}
            <div class="col-md-6 FlexibleGridColumn">
                {{{formattedSection}}}
            </div>
            {{/relatedSectionItems}}
        </div>
    </div>
</div>
{{/RI-Sections}}
{{#showTabs}}
<div class="{{containerClassTabs}} FlexibleGrid" {{{tabs_style}}}>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-12 FlexibleGridColumn ">
                <section class="GD-Tabs">
                    <div class="row">
                        <div class="col-md-12">
                            <ul class="nav nav-tabs GD-Tabs__tabs d-none d-sm-flex js-pp-ul" id="tabs">
                                {{#tabs}}
                                <li class="GD-Tabs__tabs__li js-pp-li {{active}}">
                                    <a class="GD-Tabs__tabs__li__BTN brandcolor brandbackgroundhover brandcoloractive"
                                        data-toggle="tab" href="#menu{{index}}">
                                        {{fields.tabTitle}}
                                    </a>
                                </li>
                                {{/tabs}}
                            </ul>
                            <div class="tab-content GD-Tabs__content">
                                {{#tabs}}
                                <h4 class="brandcolor GD-Tabs__content__title ">{{fields.tabTitle}}</h4>
                                <div id="menu{{index}}X" class="tab-pane fade in GD-Tabs__content__block {{active}}">
                                    {{#fields}}
                                    {{#galleryslider.length}}
                                    <div class="col-md-12">
                                        <div class="GD-Gallery" ng-controller="productGalleryController"
                                            ng-init="init('@enableZoom', @relatedItems.Count())">
                                          
                                            <div id="mymodal" class="modal fade hidden-xs hidden-sm" role="dialog">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                            <h3 class="modal-title"></h3>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="gallerySlider modalGallerySlider slider slider-modal">
                                                                {{#galleryslider}}
                                                                {{#.}}
                                                                <div
                                                                    class="gallerySliderImageContainer modalGalleryImageContainer mySlides" >
                                                                    <div class="gallerySliderImage">
                                                                        <img loading="lazy" src="{{fields.file.url}}"
                                                                            
                                                                            class="gallerySliderImageImg" style="max-height: 500px;"/>
                                                                    </div>
                                                                </div>
                                                                {{/.}}
                                                                {{/galleryslider}}
                                                            </div>
                                                            <div class="gallerySliderNavigation ">
                                                                <div class="navigationThubnails slider slider-navModal">
                                                                    {{#galleryslider}}
                                                                    {{#.}}
                                                                    <div class="navigationThubnail">
                                                                        <div class="thumbnailImage modalThumbnailImage">
                                                                            <img loading="lazy" src="{{{fields.file.url}}}" class="thumbnailImageImg"/>
                                                                        </div>
                                                                    </div>
                                                                    {{/.}}
                                                                    {{/galleryslider}}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer" style="border-top: none;">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="gallerySlider slider slider-for">
                                                {{#galleryslider}}
                                                {{#.}}
                                                <div class="gallerySliderImageContainer mySlides @easyzoomstyles" style="max-width: unset">
                                                    <div class="gallerySliderImage" data-toggle="modal" data-target="#mymodal"
                                                        data-imageid="{{data-imageid}}"
                                                        data-zoom="@ItemUrlProvider.GetImageURL(image, 'Image', false, new {w=3150, h=2100 } )">
                                                        <img loading="lazy" width="260" height="260" src="{{fields.file.url}}" 
                                                            class="gallerySliderImageImg" />
                                                        <span class="magnifyMe hidden-xs hidden-sm"> <i class="fas fa-search-plus"></i>{{{clickToEnlargeLabel}}}</span>
                                                    </div>
                                                </div>
                                                {{/.}}
                                                {{/galleryslider}}
                                            </div>
                                            <div class="gallerySliderNavigation ">
                                                <div class="navigationThubnails slider slider-nav">
                                                    {{#galleryslider}}
                                                    {{#.}}
                                                    <div class="navigationThubnail">
                                                        <div class="thumbnailImage">
                                                            <img loading="lazy"  loading="lazy" src="{{{fields.file.url}}}" class="thumbnailImageImg"/>
                                                        </div>
                                                    </div>
                                                    {{/.}}
                                                    {{/galleryslider}}
                                                </div>
                                            </div>
                                        </div>
                                    </div> 
                                    {{/galleryslider.length}}
                                    {{#formattedRelatedItems}}
                                    <div class="row">
                                        {{{formattedRelatedItems}}}
                                    </div>
                                    {{/formattedRelatedItems}}
                                    {{#contentItems}}
                                    {{#fields}}
                                    <div class="">
                                        <div class="{{containerClassTopSections}}">
                                            <div class="html-content">
                                                <div class="row">
                                                    {{{formattedTopSections}}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{#hasTabs}}
                                    <div class="container FlexibleGrid  ">
                                    <div class="row">
                                    <div class="col-md-12">
                                    <section class="GD-Tabs">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <ul class="nav nav-tabs GD-Tabs__tabs d-none d-sm-flex js-pp-ul" style="border-bottom:none" id="subTabs">
                                                    {{#subTabs}}
                                                    {{#.}}
                                                    <li class="GD-Tabs__tabs__li {{subTabActive}}">
                                                        <a class="GD-Tabs__tabs__li__BTN brandcolor brandbackgroundhover brandcoloractive"
                                                            data-toggle="tab" href="#subTab{{subTabIndex}}">
                                                            {{fields.tabTitle}}
                                                        </a>
                                                    </li>
                                                    {{/.}}
                                                    {{/subTabs}}
                                                </ul>
                                                <div class="tab-content GD-Tabs__content" id="contentSubTabs">
                                                    {{#subTabs}}
                                                    {{#.}}
                                                    <h4 class="brandcolor GD-Tabs__content__title ">{{fields.tabTitle}}</h4>
                                                    <div id="subTab{{subTabIndex}}X" class="tab-pane fade in GD-Tabs__content__block {{subTabActive}}">
                                                        {{#fields}}
                                                        {{#formatted_sub_section}}
                                                            {{{formatted_sub_section}}}
                                                        {{/formatted_sub_section}}
                                                        {{#contentItem}}
                                                        {{#.}}
                                                        {{#fields}}
                                                        {{#odd_cell_row_background_color}}
                                                        <span class="odd_cell_row_background_color"
                                                            style="display: none;">{{odd_cell_row_background_color}}</span>
                                                        {{/odd_cell_row_background_color}}
                                                        {{/fields}}
                                                        {{/.}}
                                                        {{/contentItem}}
                                                        <section class="container-max-width GD-ProductLibrary">
                                                            <div class="container">
                                                                <div class="row GD-ProductLibrary-cards-wrapper">
                                                                    {{#mediaItems}}
                                                                    {{#.}}
                                                                    {{#fields}}
                                                                    <div class="{{items_per_row}}">
                                                                        <div class="card">
                                                                            <a href={{media_link}} target="_blank" download="filename"
                                                                                class="js-productMediaLink">
                                                                                <picture class="card__image">
                                                                                    <picture>
                                                                                        <img class="img-responsive card__image--border-radius card__image--img-center ls-is-cached pdf-img lazyloaded "
                                                                                            data-was-processed="false" alt="{{file_name}}"
                                                                                            src="{{pdf_image}}">
                                                                                    </picture>
                                                                                </picture>
                                                                                <div class="magnifyingGlassIcon" style="text-align: center;">
                                                                                    <i class=" fas fa-search-plus"></i>
                                                                                </div>
                                                                                <div class="card__content">
                                                                                    <div class="card__content__header">
                                                                                        <h4 class="card__content__header--font-control">
                                                                                            {{{title}}}
                                                                                        </h4>
                                                                                    </div>
                                                                                </div>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                    {{/fields}}
                                                                    {{/.}}
                                                                    {{/mediaItems}}
                                                                </div>
                                                            </div>
                                                        </section>
                                                        {{/fields}}
                                                    </div>
                                                    {{/.}}
                                                    {{/subTabs}}
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                    </div>
                                    </div>
                                    </div>
                                    {{/hasTabs}}
                                    {{/fields}}
                                    {{/contentItems}}
                                    <section class="container-max-width GD-ProductLibrary">
                                        <div class="container">
                                            <div class="row GD-ProductLibrary-cards-wrapper">
                                                {{#mediaItems}}
                                                {{#fields}}
                                                <div
                                                    class="col-xs-12 col-sm-4 col-md-3 column-break layout-{{itemsPerRow}}-column">
                                                    <div class="card">
                                                        <a href={{file.url}} target="_blank" download="filename">
                                                            {{#smallRendition.file.url}}
                                                            <img loading="lazy" class="lazyload card__image--border-radius card__image--img-center pdf-img"
                                                                src="{{smallRendition.file.url}}" data-was-processed="false" alt="{{fileName}}">
                                                            {{/smallRendition.file.url}}
                                                            <div class="magnifyingGlassIcon"
                                                                style="text-align: center;">
                                                                <i class=" fas fa-search-plus"></i>
                                                            </div>
                                                            <div class="card__content">
                                                                <div class="card__content__header">
                                                                    <h4 class="card__content__header--font-control">
                                                                        {{{title}}}</h4>
                                                                </div>
                                                            </div>
                                                            <div class="card__content__description">
                                                                <div class="card__content__description--font-control">
                                                                    {{{subtitle}}}</div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>
                                                {{/fields}}
                                                {{/mediaItems}}
                                            </div>
                                        </div>
                                    </section>
                                    {{#bottomContentItemsM}}
                                    {{#fields}}
                                    <div class="">
                                        <div class="{{containerClassBottomSections}}">
                                            <div class="html-content">
                                                <div class="row">
                                                    {{{formattedBottomSectionsM}}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{/fields}}
                                    {{/bottomContentItemsM}}
                                    {{/fields}}
                                </div>
                                {{/tabs}}
                            </div> 
                        </div>
                    </div> 
                </section>
            </div>
        </div>
    </div>
</div>
{{/showTabs}}
{{{formattedBottomSections}}}
{{/fields}}
{{#hydrateData}}
<div class="pc-data-container-hydrate" data-hydrate="{{hydrateData}}"></div>
{{/hydrateData}}