{extend::}-catalog/extend.tpl
{model::}-catalog/model.tpl?v={~conf.index.v}
{rowCONTENTandCOLUMN:}
	<section class="container">
		<style>
			#{div} .boomrow {
				display: grid;
				grid-template-columns: 2fr 1fr;
				grid-gap: 20px;
			}
			@media (max-width: 991px) {
				body.hiddenoverflow {
					overflow: hidden;
				}
				#{div} .boomrow {
					display: block;
				}
				#CONTENT {
					max-width:100%;
				}
				#COLUMN {
					position: sticky;
					bottom:0;
					background-color: white;
				    padding-right: 0px;
				    padding-left: 0px;
				    margin-right: auto;
				    margin-left: auto;
				    z-index:100;
				    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
				}
				#COLUMN.show {
					border: none;
					box-shadow:none;
					position: fixed;
					bottom: 0;
					left:0; 
					right:0;
					height:100%;
				   
				}
			}
		</style>

		<div class="boomrow">
			<div id="CONTENT"></div>
			<div id="COLUMN"></div>
		</div>
	</section>
{CATKITPRESENT:}
	<div>
		<style>
			#{div} .brick .openinfo {
				display:none;
				/*visibility: hidden;*/
			}
			#{div} .brick {
				margin-bottom: 2px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
			#{div} .brick .name {
				order: 1;
			}
			#{div} .brick .kit {
				order: 2;
			}
			#{div} .brick .openinfo {
				color:red
				margin-bottom: 0;
			}
			@media (max-width: 991px) {
				#{div} .brick {
					flex-direction: column;
				}
				#{div} .brick .name {
					order: 2;
				}
				#{div} .brick .kit {
					text-align:right;
					order: 1;
				}
				#{div} .brick .openinfo {
					/*visibility: visible;*/
					margin-bottom: 2px;
					display:inline-block;
				}
				#{div} .brick .openinfo.show {
					display:none;
				}
				
				
			}
		</style>
		{data:show}

	</div>

	<script async type="module">
		
		const div = document.getElementById('{div}');
		const col = document.getElementById('COLUMN');
		const cls = cls => col.getElementsByClassName(cls)
		const tag = tag => col.getElementsByTagName(tag)

		const iscontext = () => {
			if (!window.Controller) return true;
			let layer = Controller.ids[{id}];
			if (!layer) return true;
			return layer.counter == {counter};
		}
		const hide = () => {
			col.classList.remove('show');
			document.body.classList.remove('hiddenoverflow');
			var elements = col.getElementsByClassName('biginfo');
			for (let i = 0; i < elements.length; i++) {
				elements[i].classList.remove('show');
			}

			var elements = col.getElementsByClassName('closeinfo');
			for (let i = 0; i < elements.length; i++) {
				elements[i].classList.remove('show');
			}
			var elements = col.getElementsByClassName('openinfo');
			for (let i = 0; i < elements.length; i++) {
				elements[i].classList.remove('show');
			}
		}
		const show = () => {
			col.classList.add('show');
			document.body.classList.add('hiddenoverflow');
			var elements = col.getElementsByClassName('biginfo');
			for (let i = 0; i < elements.length; i++) {
				elements[i].classList.add('show');
			}

			var elements = col.getElementsByClassName('closeinfo');
			for (let i = 0; i < elements.length; i++) {
				elements[i].classList.add('show');
			}
			var elements = col.getElementsByClassName('openinfo');
			for (let i = 0; i < elements.length; i++) {
				elements[i].classList.add('show');
			}
		}
		
		
		
		var elements = col.getElementsByTagName('a');
		for (let i = 0; i < elements.length; i++) {
			elements[i].addEventListener('click', (e) => {
				if (!iscontext()) return;
				hide();
				e.stopPropagation();
			});
		}
		var elements = col.getElementsByClassName('a');
		for (let i = 0; i < elements.length; i++) {
			elements[i].addEventListener('click', (e) => {
				if (!iscontext()) return;
				if (elements[i].classList.contains('openinfo')) show();
				else hide();
				e.stopPropagation();
			});
		}
		//На мобильном размере развернули, вернули размер пк, перешли в комплектующую, вернулись и уменили до мобильного размера. На мобильном будет криво расскрыто, потому что стили применились с классом show у колонки, который никуда не делся, а внутренние блоки остались в стостянни свёрнутости, так как слой с комплектующими внутри показался снова. Надо или сохранять развёрнутость или сбрасывать раскрытие. В данном случае сохраняем развёрнутость.
		if (col.classList.contains('show')) show();
	</script>
	
	<script asycn type="module">
		import { Load } from "/vendor/akiyatkin/load/Load.js"
		import { Catkit } from "/vendor/akiyatkin/catkit/Catkit.js"

		const div = document.getElementById('{div}');	
		Catkit.hand(div);
	</script>
	{kitopen:}Показать комплектацию
	{posopen:}Навигация по описанию
	{show:}
	<div>
		<div class="brick">
			<div class="name"><b>{pos.Наименование} {pos.article} {pos.Код}</b></div>
			<div class="kit">
				<nobr class="a openinfo">
					{~length(pos.kit)?:kitopen?:posopen}
				</nobr>
			</div>
		</div>
		<div class="biginfo">
			{~length(pos.kit)?:showkits}
		</div>
		{~length(pos.kit)?:showkitcost?(pos.Цена?:showposcost)}
		<div class="between" style="margin-top: 0.5rem">
			{pos.Цена?pos:extend.basketrow}
		</div>
		{:model.basket-script}
	</div>
	{showposcost:}
		<div style="display: flex; justify-content: space-between; align-items: flex-end;">
			<div>Официальная цена:&nbsp;</div><div>{pos:extend.itemcost}</div>
		</div>
	{showkits:}
		<div style="overflow-y: auto">
			{pos.kit::groups}
		</div>
	{showkitcost:}
		<div style="display: flex; justify-content: space-between; align-items: flex-end;">
			<!--<div><b class="openinfo">{pos.article} {pos.item}</b></div>-->
			<div>
				<!--<span class="a openinfo" style="color:red">Показать комплектацию</span>-->
				<!--<span class="a closeinfo" style="color:red">Свернуть</span>-->
			</div>
		</div>
		{pos.Цена?:kitcostshow}
		{kitcostshow:}
		<div style="display: flex; justify-content: space-between; align-items: flex-end;">
			<div style="flex-grow: 1" class="{~sid}">
				<style media="(max-width: 991px)">
					.{~sid} {
						text-align: right;
					}
				</style>
				Цена комплекта ({pos.kitcount}):&nbsp;
			</div>
			<div><b>{pos:extend.itemcost}</b></div>
		</div>
{groups:}
	{::showkit}
{cat::}-catalog/cat.tpl
{odin:}1
{showkit:}
	<div style="margin-bottom: 0.5rem; clear:both">
		<div style="display: flex; justify-content: space-between">
			<div style="display:block; overflow:hidden; text-overflow: ellipsis;">
				<a onclick="//Ascroll.go('#kitlist'); return false;" data-crumb2="false" href="/catalog/{producer_nick}/{article_nick}{item_num!:odin?item_num:cat.slval}">{Наименование}</a>
			</div>
			<div>
				<span {....iscatkit??:deftitle} 
					style="margin-left: 0.5rem"
					class="{....iscatkit??:disabled} btn btn-sm btn-outline-warning catkit-ico catkit del"
					data-article_nick="{article_nick}" 
					data-item_num="{item_num}"
				>-</span>
			</div>
		</div>

		<div style="display: flex;">
			<div>
				<img style="margin-right: 0.25rem" width="40" src="/-imager?src={images.0}&w=40">
			</div>
			<div style="flex-grow: 1; min-width:0">
				<div style="white-space:nowrap; overflow:hidden; text-overflow: ellipsis;">
					{article}
				</div>
				<div style="white-space:nowrap; overflow:hidden; text-overflow: ellipsis;">
					{Код}
				</div>
			</div>
			<div title="Рекомендуемая цена" style="text-align: right; margin-left: 0.5rem">{:extend.itemcost}</div>
		</div>
	</div>
	{deftitle:} title="Комплектация по умолчанию" 
{COMPATIBILITIES:}
	{~length(compatibilities)?:showCOMPATIBILITIES}
	{showCOMPATIBILITIES:}
		<h2 id="kits">Совместимость</h2>
		<div style="display: grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr))">
			{compatibilities::prmykit2}
		</div>
		{prmykit2:}{::prmykit}
		{prmykit:}
			<div style="
					display: flex;
					margin-bottom: 1rem;
					justify-content: center;
					align-items: center;
					background-image:url('/-imager/?w=528&src={images.0}'); 
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					color:white;
				">

				<div style="margin-top: 3rem; margin-bottom: 3rem; 
					padding: 0.5rem;
					text-align:center; width:100%; background-color:rgba(0,0,0,0.5);">{Наименование}<br>
					<a href="/{:cat.pospath}{:cat.mark.set}"><b>{article}</b></a>
				</div>
			</div>

{KITLIST:}
	{~length(kitlist)?:showKITLIST}
	{showKITLIST:}
	<h2 id="kitlist">Компоненты</h2>
	{kitlist::kitlistgroup}
	<script async type="module">
		import { Load } from "/vendor/akiyatkin/load/Load.js"
		import { Catkit } from "/vendor/akiyatkin/catkit/Catkit.js"

		const div = document.getElementById('{div}');	
		Catkit.hand(div);
	</script>
	{kitlistgroup:}	
		<div style="font-size:13px">
			<h3>{~key}</h3>
			{:kitlist-{(data.pos.catkitgroups[~key].tpl|~conf.catkit.tplgroups)}}
		</div>
	{kitlist-table:}

		<div>{::prkit-table}</div>
		{prkit-table:}

			<div style="display: flex; margin-bottom: 0.5rem">
				<div style="margin-right: 0.5rem">
					<a href="/{:cat.pospath}{:cat.mark.set}"><img style="max-width:none; height:auto" src="/-imager/?w=80&src={images.0}"></a>
				</div>
				<div style="flex-grow: 1; min-width:0">
					<div><a href="/{:cat.pospath}{:cat.mark.set}">{Наименование} <b>{article}</b></a></div>
					<div style="display: flex;">
						<div style="flex-grow: 1; margin-right:3px">
							{~length(items)?items::prkititems2item?:prkitone2item}
						</div>
						<div style="white-space: nowrap; text-align: right">
							{~length(items)?items::prkititems2cost?((Цена|...Цена)?:prkitone2cost)}
						</div>
					</div>
				</div>
			</div>

		{prkititems2item:}
			<div style="flex-grow:1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{Код}</div>
		{nocost:}
			<div style="text-align:right">
				<span class="disabled {~inArray(kitid,data.pos.catkits)?:font-weight-bold} catkit add btn btn-sm btn-warning catkit-ico"
				data-article_nick="{...article_nick}" 
				data-item_num="{...item_num}">+</span>
			</div>
		{prkititems2cost:}
			<div>
				{(Цена|...Цена)?:prkititems2costshow}&nbsp;
			</div>
			{prkititems2costshow:}
				{:extend.itemcost}&nbsp;<span class="{~inArray(kitid,data.pos.catkits)?:font-weight-bold} catkit add btn btn-sm btn-warning catkit-ico"
				data-article_nick="{...article_nick}" 
				data-item_num="{...item_num}">+</span>
		{prkitone2item:}
		{prkitone2cost:}
			<div>
				{:extend.itemcost}&nbsp;<span class="{~inArray(kitid,data.pos.catkits)?:font-weight-bold} catkit add btn btn-sm btn-warning catkit-ico"
					data-article_nick="{article_nick}" 
					data-item_num="{item_num}">+</span>
			</div>
	{kitlist-blocks:}
		<div style="display: grid; gap:15px; grid-template-columns: repeat(auto-fill,minmax(167.5px, 1fr))">{::prkit}</div>
		{prkit:}
			<div>
				{images.0?:prkitimg}
				<div>
					<div style="display: flex; flex-direction: column; min-width:0;">
						<div title="{Наименование}" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{Наименование}&nbsp;</div>
						<div style="flex-grow:1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
							<a href="/{:cat.pospath}{:cat.mark.set}">
								<b>{article}</b>
							</a>
						</div>
					</div>
				</div>
				<div class="">
					{~length(items)?items::prkititems?(Цена?:prkitone)}
				</div>
			</div>
			{prkitimg:}<center><img style="max-width: 100%" src="/-imager/?h=400&w=400&crop=1&src={images.0}"></center>
			{prkititems:}
				<div style="display: flex;">
					<div title="{Код}" style="margin-right: 0.25rem; flex-grow:1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{Код}</div>
					<div style="white-space: nowrap;">
						{(~inArray(:strЦена,...itemrows)?Цена?...Цена)?:prkititemscost}
					</div>
					<!-- <div style="white-space: nowrap;">{(Цена|...Цена)?:prkititemscost}</div> -->
				</div>
				{Цена:}Цена
				{prkititemscost:}
				<div style="text-align: right;">{:extend.itemcost}
					
					<span class="{~inArray(kitid,data.pos.catkits)?:font-weight-bold} catkit add btn btn-sm btn-warning catkit-ico"
					data-article_nick="{...article_nick}" 
					data-item_num="{~key}">+</span>
				</div>
				
			{prkitone:}
				<div style="text-align:right">{:extend.itemcost}
					
					<span class="{~inArray(kitid,data.pos.catkits)?:font-weight-bold} catkit add btn btn-sm btn-warning catkit-ico"
					data-article_nick="{article_nick}" 
					data-item_num="{item_num}">+</span>
				</div>
{POSCOLUMN:}
	<div class="stick-cont">
		<style>
			#{div} .stick-cont {
				border-right:1px solid rgba(128, 128, 128, 0.3);
				height:100%;

			}

			#{div} .biginfo {
				margin-bottom: 15px;
			}
			#{div} .stick {
				position: sticky;
				top:0;
			}
			#{div} .stick-el {
				padding: .75rem 1rem 1rem 0;
				font-size:13px;
				max-height: 100vh;
				overflow-y: auto;
				
			}
			#{div} .closeinfo {
				float:right; 
				color:red;
				display:none;
			}
			@media (max-width: 991px) {
				#{div} .closeinfo.show {
					display:inline;
				}
				
				#{div} .biginfo {
					display: none;
				}
				#{div} .biginfo.show {
					display: block;
				}
				
				#{div} .stick-cont {
					border-right:none;
				}
				#{div} .stick-el {
					background-color: rgba(255,255,255,1);
					padding: .75rem 15px;
					height: 100%;
    				overflow-y: auto;
				}
				#{div} .stick {
					position: sticky;
					top:auto;
					bottom:0;
				}
			}
		</style>
		<div class="stick-el stick">
			<div class="biginfo">
				<span class="closeinfo a">Свернуть</span>
				<span onclick="this.dataset.click = true" class="a" data-anchor=".cat-position">Общая информация</span><br>
				{~length(compatibilities)?:linkkits}
				{~length(texts)?:linktexts}
				{~length(features)?:linkfeatures}
				{~length(Видео с Youtube)?:linkyoutube}
				{~length(files)?:linkfiles}
				{~length(kitlist)?:linkkitlist}
				
			</div>
			<div id="CATKITPRESENT"></div>
		</div>
	</div>
	<script type="module">
		// import { Config } from '/vendor/infrajs/config/Config.js'
		const div = document.getElementById('{div}')
		const cls = (cls, el = div) => el.getElementsByClassName(cls)
		const tag = (tag, el = div) => el.getElementsByTagName(tag)
		const menu = cls('biginfo')[0]
		for ( const a of cls('a', menu)) {
			a.addEventListener('click', async () => {
				const { Ascroll } = await import('/vendor/infrajs/ascroll/Ascroll.js')
				//const conf = Config.get('ascroll');
				if (a.dataset.anchor) Ascroll.go(a.dataset.anchor)
			})
			if (a.dataset.click) a.click()
		}
	</script>
	{linkkitlist:}<hr>
	<span class="a" style="border-bottom:none" onclick="this.dataset.click = true" data-anchor="#kitlist"><svg style="position: relative; margin-top:-4px" height="16" viewBox="0 0 512 512" width="16"><path d="m368 511.957031h-309.332031c-32.363281 0-58.667969-26.304687-58.667969-58.667969v-309.332031c0-32.363281 26.304688-58.667969 58.667969-58.667969h181.332031c8.832031 0 16 7.167969 16 16 0 8.832032-7.167969 16-16 16h-181.332031c-14.699219 0-26.667969 11.96875-26.667969 26.667969v309.332031c0 14.699219 11.96875 26.667969 26.667969 26.667969h309.332031c14.699219 0 26.667969-11.96875 26.667969-26.667969v-181.332031c0-8.832031 7.167969-16 16-16s16 7.148438 16 16v181.332031c0 32.363282-26.304688 58.667969-58.667969 58.667969zm0 0"/><path d="m187.136719 340.820312c-4.203125 0-8.300781-1.664062-11.308594-4.691406-3.796875-3.777344-5.417969-9.21875-4.371094-14.445312l15.082031-75.433594c.617188-3.113281 2.152344-5.953125 4.371094-8.171875l220.953125-220.925781c22.867188-22.871094 60.074219-22.871094 82.964844 0 11.070313 11.070312 17.171875 25.792968 17.171875 41.472656s-6.101562 30.398438-17.195312 41.472656l-220.925782 220.949219c-2.21875 2.238281-5.078125 3.753906-8.171875 4.371094l-75.414062 15.082031c-1.046875.214844-2.113281.320312-3.15625.320312zm75.433593-31.082031h.214844zm-45.609374-52.457031-9.410157 47.144531 47.125-9.429687 217.515625-217.511719c5.035156-5.058594 7.808594-11.734375 7.808594-18.859375s-2.773438-13.804688-7.808594-18.859375c-10.367187-10.390625-27.285156-10.390625-37.714844 0zm0 0"/><path d="m453.332031 134.976562c-4.09375 0-8.191406-1.558593-11.304687-4.695312l-60.332032-60.351562c-6.25-6.25-6.25-16.382813 0-22.632813s16.382813-6.25 22.636719 0l60.328125 60.351563c6.25 6.25 6.25 16.382812 0 22.632812-3.136718 3.117188-7.230468 4.695312-11.328125 4.695312zm0 0"/></svg>
	&nbsp;<span>Выбрать компоненты</span></span><hr>
	{linkkits:}<span onclick="this.dataset.click = true" class="a" data-anchor="#kits">Совместимость</span><br>
	{linktexts:}<span onclick="this.dataset.click = true" class="a" data-anchor=".texts">Технические характеристики</span><br>
	{linkfeatures:}<span onclick="this.dataset.click = true" class="a" data-anchor="#features">Особенности</span><br>
	{linkyoutube:}<span onclick="this.dataset.click = true" class="a" data-anchor="#youtubevideo">Отзывы и видео с Youtube</span><br>
	{linkfiles:}<span onclick="this.dataset.click = true" class="a" data-anchor=".files">Файлы</span><br>