{include 'inc_meta'}
{include 'inc_header'}

{$_modx->regClientScript('/assets/templates/sphera/js/jquery.magnific-popup.min.js')}
{$_modx->regClientCss('/assets/templates/sphera/css/magnific-popup.css')}
{$_modx->regClientScript('/assets/templates/sphera/js/jquery.event.move.js')}
{$_modx->regClientScript('/assets/templates/sphera/js/jquery.twentytwenty.js')}
{$_modx->regClientCss('/assets/templates/sphera/css/twentytwenty.css')}

<div id="wrapperContent">
    {include 'inc_slider'}
    <div class="container">
		<div class="row">
		    {include 'inc_sidebar'}
		    <div id="content" class="nopad static gallery">
		    <div class="right-text" itemscope itemtype="http://schema.org/Product">
                <h1 itemprop="name">{$_modx->resource.pagetitle}</h1>

				{$_modx->resource.content}
				
				{set $resources = $_modx->runSnippet('!pdoResources', [
				    'class' => 'UserFile',
                    'loadModels' => 'UserFiles',
                    'sortby' => 'rank',
                    'sortdir' => 'ASC',
                    'where' => [
                        'UserFile.active' => 1,
                        'UserFile.parent' => $_modx->resource.id,
                    ],
                    'leftJoin' => [
                    	"Thumbs" => [
                    		"class" => "UserFile",
                    		"on" => "Thumbs.parent = UserFile.id AND Thumbs.class = 'UserFile' AND Thumbs.properties LIKE '%\"w\":320,\"h\":300%'"
                    	]
                    ],
                    'select' => [
                    	"UserFile" => "*",
                    	"Thumbs" => "Thumbs.url as thumb",
                    ],
                    'tpl' => 'gallery__item',
                    'showLog' => 0
                ])}
                
                {if $_modx->resource.afterImage && $_modx->resource.beforeImage}
                <div class="gallery__before-after">
                    <img src="{$_modx->resource.beforeImage}" alt="">
                    <img src="{$_modx->resource.afterImage}" alt="">
                </div>
                {/if}
                
                <ul class="gallery__photo-list">
                    {ignore}
                        <script>
                            $(document).ready(function() {
                            	$('.gallery__photo-list li').magnificPopup({
                            		delegate: 'a',
                            		type: 'image',
                            		tLoading: 'Загрузка изображения #%curr%...',
                            		tClose: 'Закрыть (Esc)',
                            		mainClass: 'mfp-fade mfp-img-mobile',
                            		gallery: {
                            			enabled: true,
                            			navigateByImgClick: true,
                            			preload: [0,1],
                            			tPrev: 'Предыдущее фото', // Alt text on left arrow
                                        tNext: 'Следующее фото', // Alt text on right arrow
                            			tCounter: '<span class="mfp-counter">%curr% из %total%</span>'
                            		},
                            		image: {
                            			tError: '<a href="%url%">Изображение #%curr%</a> не может быть загружено.',
                            			titleSrc: function(item) {
                            				return item.el.attr('title') + '<small>Сфераспб.рф</small>';
                            			}
                            		}
                            	});
                            	
                            	$('.gallery__before-after').twentytwenty({default_offset_pct:0.6,orientation:'vertical'})
                            });
                        </script>
                    {/ignore}
                    
                    {$resources?:'К сожалению фотографий не найдено'}
                </ul>
				
				<!--noindex-->
				{if $_modx->resource.formActive == 1}
				    {include 'orderForm' title=$_modx->resource.formTitle subtitle=$_modx->resource.formSubtitle}
				{/if}
				<!--/noindex-->
                   
                <br>
                
                {include 'catergoryMaterials.fenom'}
		    </div>
		    </div>
		</div>
	</div>
	{include 'partners.fenom'}
</div>

{include 'inc_footer'}