{{#if product.print}}
	<div class="print text-left hidden">
		{{#if ![55075, 41542, 69151, 66961].includes(product.all.id) && printThemes.length > 1}}
			<div class="row themes">
				<div class="w-full">
					<label>
						<h3 class="text-lg text-left mt-6 -mb-2 md:m-0">
							{{l.translate('Börja med att välja tema')}}
						</h3>
					</label>
					<div>
						<div class="swiper mt-6 overflow-visible swiper-design-themes">
							<div class="swiper-wrapper mt-4 mb-2.5">
							{{#each printThemes:id}}
								<div class="swiper-slide w-auto cursor-pointer">
									{{#if [55075, 41542, 69151, 66961].includes(product.all.id) }}
										{{#if this.items.0.icon}}
											<img alt="{{l.translate('Mall')}} {{id+1}}" src="{{this.items.0.icon}}" class="theme h-24 mt-2" on-click="switchThemeTo:{{id}}">
										{{else}}
											<img alt="{{l.translate('Mall')}} {{id+1}}" src="{{this.items.0.value}}" class="theme h-24 mt-2" on-click="switchThemeTo:{{id}}">
										{{/if}}
									{{else}}
									<!--add round or rectangular border depending on type of print product-->
									<img src="{{#if this.items.1.icon}}{{this.items.1.icon}}{{else}}{{this.items.1.value}}{{/if}}"
											alt="{{l.translate('Mall')}} {{id+1}}"
											class="theme h-24 mt-2 {{#if (id == (0) && [65829,79672, 83007, 88396, 43649].includes(product.all.id))}}border-2{{elseif id == 0 && [72572, 73873, 79969, 83848, 84531, 85144, 81135, 92463, 94753, 99613, 102177].includes(product.all.id)}}border-2 w-24{{elseif id == (0) && [55076, 51517,65043, 79817, 80521, 85351, 92691, 93251, 85097, 97648].includes(product.all.id)}}border-2 rounded-full{{/if}}"
											on-click="switchThemeTo:{{id}}">
									{{/if}}
								</div>
							{{/each}}
						</div>
						<div class="swiper-scrollbar mb-3"></div>
							<div class="swiper-button-next swiper-design-themes-button-next bg-primary text-white text-2xl rounded-full p-3">
								<img alt="{{l.translate('Bakåtpil')}}" src="{{image_url}}site/icons/pk-arrow-small.svg" />
							</div>
							<div class="swiper-button-prev swiper-design-themes-button-prev bg-primary text-white text-2xl rounded-full p-3">
								<img alt="{{l.translate('Bakåtpil')}}" src="{{image_url}}site/icons/pk-arrow-small.svg" />
							</div>
						</div>
				</div>
			</div>
		{{/if}}
		{{#if [55075, 41542, 69151, 66961].includes(product.all.id)  && printThemes.length > 1}}
			<h3>{{l.translate('Bandfärg')}}</h3>
			<div class="grid grid-cols-5 gap-4 my-2">
			{{#each printThemes:id}}
				<div>
					<img src="{{this.items.0.value}}" class="border border-primary" on-click="switchThemeTo:{{id}}">
				</div>
			{{/each}}
			</div>
		{{/if}}
		{{#if [55075, 41542, 69151, 66961].includes(product.all.id) && printThemes.length > 1}}
			<h3>{{l.translate('Textfärg')}}</h3>
			<div class="grid grid-cols-4 gap-4 my-2">
			{{#each [
				{name:'Guld', color:'#fbe04e', gradient:'linear-gradient(to right, #d9b453 0%,#f4e8ac 35%,#f3e4a5 37%,#ebb14c 64%,#dea740 81%,#e7be66 87%,#faf1b7 100%)'},
					{name:'Silver',
					color:'#e0e0e0',
					gradient:'linear-gradient(90deg, #c0c0c0 0%,#ffffff 50%,#808080 100%)'},
					{name:'Svart',
					color:'#000000'
					},
					{name:'Vit',
					color:'#FFFFFF'}]:id}}
					<div class="{{name}} h-10 w-full inline-block border border-primary" style="background:{{gradient || color}}" on-click="switchColorTo:{{color}}"></div>
			{{/each}}
			</div>
		{{/if}}
		{{#if ![55075, 41542, 69151, 66961].includes(product.all.id) }}
			<div class="flex 2xl:flex-row md:flex-col justify-between">
				<div class="flex flex-1 mr-3 md:mr-0 flex-col">
					<label class="font-semibold font-family-mikado-complete text-left"><span>{{l.translate('Rotera bilden')}}</span></label>
					<input type="range" id="angle-control" on-input="updatePrint" value="0" min="-180" max="180" value="{{product.print.settings.items.0.angle}}"  class="w-full px-0 rounded-lg">
				</div>
				<div class="flex flex-1 flex-col">
					<label class="font-semibold font-family-mikado-complete text-left"><span>{{l.translate('Justera storlek på bilden')}}</span></label>
					<input type="range" id="scale-control" on-input="updatePrint" value="{{product.print.settings.items.0.width}}" min="20" max="{{product.print.settings.items.0.maxscale || 260}}" step="1"  class="w-full px-0 rounded-lg">

				</div>
			</div>
			<div class="row themes">
				<div class="flex my-4 justify-between items-center" id="bilaga">
					<label for="fileupload" class="choosen-file flex-grow mr-3 px-4 py-4 rounded-2xl border border-accent-darker">
						<div class="name leading-none">
							{{!fileList.0.name ? l.translate('Ladda upp din bild') : fileList.0.name}}
						</div>
						<div class="progress">
						</div>
					</label>
					<label for="fileupload" class="bilaga flex flex-wrap">
						<input decorator="fileupload" class="disable-while-uploading hidden" id="fileupload" type="file" name="files[]" data-url="/upload/customerdesign" value="{{files}}" accept="image/png, image/jpeg">
						<span class="w-full uppercase font-semibold items-center px-5 py-3 bg-primary border border-primary rounded-2xl cursor-pointer">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
							</svg>
						</span>
					</label>
				</div>
			</div>
		{{/if}}
		{{#if product.print.numberOfTextFields > 0 }}
			<div class="{{#if ![55075, 41542, 69151, 66961].includes(product.all.id) }}hidden{{/if}}">
				<h3>{{l.translate('Font')}}:</h3>
				<div class="fontListSection my-2">
					<ul id="fontList">
						<span class="select-arrow">▼</span>
						<li id="courgette" class="selected">Courgette</li>
						<li id="bebas-neue">Bebas Neue</li>
						<li id="graduate">Graduate</li>
						<li id="libre-baskerville">Libre Baskerville</li>
						<li id="special-elite">Special Elite</li>
						<li id="cherry-swash">Cherry Swash</li>
						<li id="petit-formal-script">Petit Formal Script</li>
						<li id="arial">Arial</li>
					</ul>
				</div>
			</div>
		{{/if}}
		{{#each product.print.settings.items:id}}
			{{#if this.type == 'text'}}
				<div class="relative border border-accent-darker rounded-2xl mb-4 appearance-none label-floating">
					<input type="text" name="namn" id="namn" on-input="updatePrint"
						placeholder="{{capitalize(l.translate(this.title))}}" value="{{this.value}}"
						class="w-full print-input" autocomplete="off"
					>
					<label for="namn" class="absolute block top-0 text-left pin-t pin-l w-full px-3 py-2 leading-normal cursor-text">{{capitalize(l.translate(this.title))}}</label>
				</div>
			{{/if}}
		{{/each}}
	</div>
{{/if}}
<div class="hidden {{#if product.all.product_type == 2}}md:block{{/if}} mb-8">
	<h1 class="text-product-color" title="{{p.id}}">{{product.all.name}}</h1>
	<div class="text-3xl font-bold font-family-mikado-complete price product-minprice">
		{{#if (product.all.variant_first_buyable.saleprice.value > 0) && (product.all.variant_first_buyable.saleprice.value < product.all.variant_first_buyable.price.value) }}
			<span class="text-danger">{{display_price(product.all.variant_first_buyable.saleprice)}}</span>
			<strike class="ordinary-price">{{display_price(product.all.variant__first_buyable.price)}}</strike>
		{{ else }}
			<span class="text-danger">{{display_price(product.all.variant_first_buyable.price)}}</span>
		{{/if}}
	</div>
	<div class="flex justify-center items-center rating-wrapper">
		<div class="flex mr-4">
			{{#each [1,2,3,4,5]}}
				{{#if (Math.round(product.all.rating) >= this)}}
					<img alt="{{l.translate('Gul krona')}}" class="h-4 ml-1" src="{{image_url}}site/icons/Partyking_krona_betyg_gul_RGB.svg"/>
				{{else}}
					<img alt="{{l.translate('Grå krona')}}" class="h-4 ml-1" src="{{image_url}}site/icons/Partyking_krona_betyg_gra_RGB.svg"/>
				{{/if}}
			{{/each}}
		</div>
		{{#if product.all.product_comments.length > 0 }}
			<div class="underline text-xs text-accent">
				<a data-show="#all-reviews" class="showHide" href="#">
					(
					{{#if product.all.product_comments.length > 249 }}250+
					{{ else }}
						{{product.all.product_comments.length}}
					{{/if}}
					{{l.translate('omdömen')}})
				</a>
			</div>
		{{/if}}
	</div>
</div>
{{#if product.selectedArticle && product.selectedArticle != 0}}
	{{#if product.selectedArticle.status == 0 && !shoppingcart.ignoreStock}}
		<button class="flex w-full text-xl font-medium items-center justify-center py-2 bg-accent-darkest text-white rounded-2xl" disabled>
			{{l.translate('Produkten har utgått')}}
		</button>
	{{elseif product.selectedArticle.instock > 0  ||  product.selectedArticle.nonstock > 0 || shoppingcart.ignoreStock}}
		<div class="row unresponsive mb-6">
			<div class="columns eleven product-add-to-cart" >
				<button on-click="addToCart" value="{{product.selectedArticle}}" class="w-full items-center pk-add-to-cart pk-button-yellow-lg">
					<span id="addToCartText">{{l.translate('Lägg i varukorg')}}</span>
				</button>
			</div>
		</div>
		{{#if product.selectedArticle.instock > 0 && !product.print}}
			<div class="countdown text-accent"></div>
		{{/if}}
	{{else}}
		<Input type="email" name="email" id="email-news-letter" required validate="true" placeholder="{{l.translate('E-post: *')}}" value="{{product.trackProduct.email}}">
		<span class="newsletter pk-checkbox">
			<input type="checkbox" id="newsletter" name="newsletter" />
				<label for="newsletter">
					{{l.translate('Anmäl mig till nyhetsbrev också')}}
				</label>
		</span>
		<button on-click="trackProduct" value="{{product.selectedArticle}}" class="mt-4 w-full pk-button-yellow track-product">
		{{l.translate('Bevaka produkt')}}
		</button>
	{{/if}}
{{else}}
	{{#if product.all.status == 0 && !shoppingcart.ignoreStock}}
		<button class="u-full-width addToCart blue-button" disabled>
			{{l.translate('Produkten har utgått')}}
		</button>
	{{elseif product.all.instock > 0 || product.all.nonstock > 0 || shoppingcart.ignoreStock}}
		<button on-click="addToCart" class="u-full-width addToCart blue-button">
			{{l.translate('Lägg till varukorg')}}
		</button>
		{{#if product.all.instock > 0}}
			<div class="countdown"></div>
		{{/if}}
	{{else}}
		<div class="product-tracking">
			{{l.translate('Tyvärr är denna produkt för tillfälligt slutsåld hos oss. Skriv in dina uppgifter nedan så kontaktar vi dig när produkten finns i lager igen')}}
		</div>
		<Input type="text" name="name" id="name" validate="true" placeholder="{{l.translate('För- och efternamn')}}" value="{{fields.name}}">
		<span class="newsletter pk-checkbox">
			<input type="checkbox" id="newsletter" name="newsletter" checked="{{product.trackProduct.newsletter}}" />
				<label for="newsletter">
					{{l.translate('Anmäl mig till nyhetsbrev också')}}
				</label>
		</span>
		<button on-click="trackProduct" value="{{product.selectedArticle}}" class="w-full track-product">
			{{l.translate('Bevaka produkt')}}
		</button>
	{{/if}}
{{/if}}
<div class="flex my-4 justify-between">
	<div class="font-semibold">
		<h3>{{l.translate("Välj variant:")}}</h3>
	</div>
	{{#if product.all.specification && product.all.edible}}
		<div class="flex items-center space-x-2">
			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
			</svg>
			<span class="cursor-pointer underline showHide" data-show="#size-guide">
				{{l.translate('Visa näringsdeklaration')}}
			</span>
			<div id="size-guide-wrapper"></div>
		</div>
	{{elseif product.all.specification}}
		<div class="flex items-center space-x-2">
			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 rounded-full bg-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
			</svg>
			<span class="cursor-pointer underline showHide" data-show="#size-guide">
				{{l.translate('Visa storleksguide')}}
			</span>
			<div id="size-guide-wrapper"></div>
		</div>
	{{/if}}
</div>
{{#if product.articles.length > 0}}
	<div class="product-variants md:-mx-4 divide-y divide-gray-200 divide-solid">
		{{#each product.articles:id}}
			{{#if !this.is_accessory }}
				{{#if id == 5 && !product.articles[5].is_accessory && product.articles.length > 5 && !product.showAllAlternatives}}
					<button on-click="showAllAlternatives" class="font-semibold py-1 cursor-pointer rounded-t-lg bg-primary w-full text-center show-more">
						{{l.translate('Visa fler')}}
					</button>
				{{/if}}
				<label for="article_{{id}}" class="product-variant cursor-pointer py-2 px-4 flex w-full {{#if (id >= (product.variants.length + 5) && !product.showAllAccessories && this.is_accessory && product.accessories.length > 5) || (id > 4 && !product.showAllAlternatives && !this.is_accessory)}}hidden{{/if}} {{#if status == 0 && !shoppingcart.ignoreStock}}disabled{{/if}}">
					<div class="flex items-center col-span-1">
						<input type="radio"
							id='article_{{id}}'
							name='{{product.selectedArticle}}'
							class="pk-radio" value='{{this}}'
						>
					</div>
					<div class="product-variant-image" for="article_{{id}}">
						<img alt="{{this.variant ? this.variant : this.name}}" class="w-12 mx-2 mix-blend-multiply" src="{{productImage(image_name, 180)}}" data-src="{{productImage(image_name, 180)}}" />
					</div>
					<div class="flex flex-col ml-2 w-full justify-center">
						<div class="flex justify-between font-family-mikado-complete">
							<div for="article_{{id}}">
								<div class='name text-lg font-semibold'>
									{{#if alternative != '' }}
										{{alternative}}
									{{else}}
										{{belongs_to_product.name}}
									{{/if}}
								</div>
							</div>
							<div class="product-variant-price text-lg font-semibold">
								<div class="price">
									{{#if retailerPrice && freightunit}}
										{{display_price(freightunit)}}
									{{elseif (saleprice.value > 0) && (saleprice.value < price.value)}}
										<strike class="ordinary-price">&nbsp;{{display_price(price)}}&nbsp;</strike>
										<span class="sale-price text-danger">{{display_price(saleprice)}}</span>
									{{else}}
										{{display_price(price)}}
									{{/if}}
								</div>
							</div>
						</div>
						<div class="flex justify-between items-center">
							<div class="text-accent text-xs product-variant-artno" for="article_{{id}}">
								<div class='artnr'>
									<span>{{l.translate('Art.nr')}} {{belongs_to_product.id}}-{{this.id}}</span>
								</div>
							</div>
							{{#if status == 0}}
								<span class="text-xs text-danger">{{l.translate("Utgått hos lev.")}}</span>
							{{elseif instock > 19}}
								<span class="text-xs text-available">{{l.translate("Lagervara (%s st)", '20+')}}</span>
							{{elseif instock < 1 || !instock}}
								{{#if nonstock > 19}}
									<span class="text-xs text-secondary">{{l.translate("Beställningsvara (%s st)", '20+')}}</span>
								{{elseif nonstock < 1 || !nonstock}}
									<span class="text-xs text-danger">{{l.translate("Tillfälligt slut")}}</span>
								{{else}}
									<span class="text-xs text-secondary">{{l.translate("Beställningsvara (%s st)", nonstock)}}</span>
								{{/if}}
							{{else}}
								<span class="text-xs text-available"> {{l.translate("Lagervara (%s st)", cart_limit ? instock + "+" : instock)}}</span>
							{{/if}}
						</div>
					</div>
				</label>
			{{/if}}
		{{/each}}
	</div>
{{/if}}