- include 'header.html'
%html{'lang': '{{language}}', 'dir': 'ltr'}
	%head
		%meta{'charset': 'utf-8'}
		%title= name
		- if keywords
			%meta{'name': 'keywords', 'content': '{{keywords}}'}
		- if description
			%meta{'name': 'description', 'content': '{{description}}'}
		%meta{'name': 'theme-color', 'content': '#7EB643'}
		%meta{'name': 'viewport', 'content': 'width=device-width, user-scalable=yes'}
		%script= js_org_hierarchical
		%script= js_org_linear
		%script= js_imgs_hierarchical
		%script= js_imgs_thumb
		%script= js_imgs_small
		%script= js_imgs_dcent
		%script= js_imgs_large
		%script= js_imgs_full
		%script= js_artists
		%script= js_images
		%script= js_social
		%script= js_tags
		%script= js_zips
		%script= js_name
		%script= js_formats
		%script= js_dimens
		%script= js_sizes
		%script= js_mes
		%script= js_canonical_colors
		%script= js_color_repeated
		%script= js_color_list
		%script= js_bodyparts
		%script= js_tag_groups_sorted
		%script= js_all_tags_by_group
		%script= js_tag_groups
		%script= js_sorted_artists
		%script= js_tag_groups_nonempty_sorted
		%script{'defer': 'defer', 'src': './main.js'}
		%link{'rel': 'stylesheet', 'href': './main.css'}
		%link{'rel': 'stylesheet', 'href': './font-awesome-4.7.0/css/font-awesome.min.css'}
		%link{'rel': 'shortcut icon', 'type': 'image/png', 'href': './favicon.png'}
		%link{'rel': 'apple-touch-icon', 'href': './appletouchicon.png'}
		- for me in mes
			%link{'rel': 'me', 'href': '{{me}}'}
	%body
		%header
			.pageWidthConstraint
				%h1.blockdisplay= name
				%section.blockdisplay
					%h2.nodisplay Filter criteria
					%nav#filterNav.filterbar.nodisplay
						Only displaying images with:
						%span.badge
							%i#filterIcon.fa.fa-user{'aria-hidden': 'true'}
							%span= ' '
							%span#filterText Something
							%span= ' '
							%i.fa.fa-times-circle{'aria-hidden': 'true', 'onclick': 'clearFilters()'}
		#galleryBrowser.fullscreenOverlay.nodisplay
			.closeButton{'onclick': 'closeGallery()'}
				%i.fa.fa-2x.fa-times{'aria-hidden': 'true'}
			#galleryImage
			#imageQualities
				#qualityThumb.quality
					%a#downloadThumb
						%i.fa.fa-download{'aria-hidden': 'true'}
					%i#seeThumb.fa.fa-eye{'aria-hidden': 'true'}
					%span Thumbnail
					%span#sizeThumb= '(?)'
				#qualitySmall.quality
					%a#downloadSmall
						%i.fa.fa-download{'aria-hidden': 'true'}
					%i#seeSmall.fa.fa-eye{'aria-hidden': 'true'}
					%span Small
					%span#sizeSmall= '(?)'
				#qualityDcent.quality
					%a#downloadDcent
						%i.fa.fa-download{'aria-hidden': 'true'}
					%i#seeDcent.fa.fa-eye{'aria-hidden': 'true'}
					%span Decent
					%span#sizeDcent= '(?)'
				#qualityLarge.quality
					%a#downloadLarge
						%i.fa.fa-download{'aria-hidden': 'true'}
					%i#seeLarge.fa.fa-eye{'aria-hidden': 'true'}
					%span Large
					%span#sizeLarge= '(?)'
				#qualityFull.quality
					%a#downloadFull
						%i.fa.fa-download{'aria-hidden': 'true'}
					%i#seeFull.fa.fa-eye{'aria-hidden': 'true'}
					%span Full
					%span#sizeFull= '(?)'
		#sideCard
			%h2 Display
			.controlButtons
				%a.showNested.selected{'href': '#'}
					%i.fa.fa-indent
					Nested list
				%a.showListed{'href': '#js:showAsList()'}
					%i.fa.fa-bars
					Plain list
				%a.showFiltered{'href': '#js:buildFilters()'}
					%i.fa.fa-filter
					Filtered list
			%h2 Fast navigation
			.fastNavigation
				- for item in imgs_thumb
					- with info = images[loop.index0]
						.fastNavigationCard{'style': 'background-image: url("{{item}}");', 'id': 'fastnav-{{loop.index0}}'}
		#sideCardShadow
		#sideCardRight
			- for item in imgs_thumb
				- with info = images[loop.index0]
					.rightCard{'id': 'details-{{loop.index0}}'}
						%span.title
							%img.detailPic{'src': '{{item}}'}
							%span= ' '
							%span.titleText= info['name']
						%dl
							- if info['link']
								%dt
									%i.fa.fa-link{'aria-hidden': 'true'}
								%dd
									.link
										%a{'href': '{{info["link"]}}', 'target': '_blank', 'rel': 'noreferrer'}
											{{ info['link'] }}
							- if info['notes']
								%dt
									%i.fa.fa-sticky-note{'aria-hidden': 'true'}
								%dd
									.notes.markdown
										{{ info['notes']|markdown }}
		#sideCardRightShadow
		#filterBuilder.fullscreenOverlay.nodisplay
			.closeButton{'onclick': 'closeFilterBuilder()'}
				%i.fa.fa-2x.fa-times{'aria-hidden': 'true'}
			#availableFilters
				.taggroup
					- for artistk in sorted_artists
						- with artistv=artists[artistk]
							%span.badge{'onclick': 'filterArtist("{{artistk}}")'}
								%i{'aria-hidden': 'true', 'class': 'fa fa-user'}
								%span= ' '
								%span= artistv['name']
				%hr
				- for taggroupk in tag_groups_nonempty_sorted
					.taggroup
						- for tagk in all_tags_by_group.get(taggroupk, [])
							%span.badge{'onclick': 'filterTag("{{tagk}}")'}
								%i{'aria-hidden': 'true', 'class': 'fa fa-{{tags[tagk]["icon"]}}'}
								%span= ' '
								%span= tags[tagk]['name']
					- if not loop.last
						%hr
		%main#main.pageWidthConstraint
			%noscript
				Please enable JavaScript for some features to work.
			%section#nestedElements
				%h2.nodisplay Image list with nested elements
				- for nestedItem in org_hierarchical
					- with item=imgs_hierarchical[nestedItem.item]
						- with info=images[nestedItem.item]
							.card.housingNested{'id': 'nested-{{nestedItem.item}}'}
								%img.cardPic{'src': './{{item}}', 'loading': 'lazy', 'onclick': 'openGallery({{nestedItem.item}})', 'alt': ''}
								.cardBody
									- include 'cardbody.html'
								- if nestedItem.children|length > 0
									.cardBottom.minicardHolder
										- for child in nestedItem.children
											- with subitem=imgs_hierarchical[child]
												- with subinfo=images[child]
													.card.minicard{'id': 'nested-{{child}}', 'onclick': 'openGallery({{child}})'}
														%img.cardPic{'src': './{{subitem}}', 'loading': 'lazy', 'alt': ''}
														.cardBody= subinfo['name']
			%section#listElements.nodisplay
				%h2.nodisplay Image list without nested elements
				- for item in org_linear
					- with info = images[loop.index0]
						.card.housingSimple{'id': 'list-{{loop.index0}}'}
							%img.cardPic{'src': '{{item}}', 'onclick': 'openGallery({{loop.index0}})', 'alt': ''}
							.cardBody
								- include 'cardbody.html'
			%section#colorAccuracy
				%h2.nodisplay Color palette
				.card
					.cardBody
						%h3 Color palette (in practice)
						%span#colorAccuracyJSWall You need to turn JavaScript on for this feature of the site to work.
						#colorAccuracyJSProtectedContent.nodisplay
							%table
								%thead
									%tr
										%th{'rowspan': '2'}
											Art
										- for clr in color_list
											%th
												.rotate270= bodyparts[clr]
									%tr	
										- if color_repeated[False]>0
											- with cs=color_repeated[False]
												%th{'colspan': '{{cs}}'}
													Base colors
										- if color_repeated[True]>0
											- with cs=color_repeated[True]
												%th{'colspan': '{{cs}}'}
													Often mistaken
								%tbody
									%tr
										%th#row_ideal
											Ideal
										- for clr in color_list
											%td{'title': '{%if canonical_colors[clr]["repeated"]%}Same color as "{{bodyparts[canonical_colors[clr]["rootColor"]]}}"{%else%}100% similar to the ideal value{%endif%}', 'style': 'background: {{canonical_colors[clr]["color"]}};', 'class': '{%if canonical_colors[clr]["colorIsLight"]%}blackText{%else%}whiteText{%endif%}'}
												= canonical_colors[clr]['color']
												%br
												- if canonical_colors[clr]["repeated"]
													%i.fa.fa-info-circle{'aria-hidden': 'true'}
												- else
													(100%)
									%tr#row_avg.hideablePaletteItem
										%th
											Mean
										- for clr in color_list
											%td{'id': 'coloravg{{clr}}', 'class': 'clr_{{clr}}'}
									- for item in org_linear
										- with img=loop.index0
											- with info=images[img]
												- if info['color']|length > 0
													%tr{'id': 'row_{{img}}', 'class': 'hideablePaletteItem'}
														%th
															%img.icon64{'src': './{{item}}', 'loading': 'lazy', 'onclick': 'openGallery({{img}})', 'alt': ''}
														- for clr in color_list
															%td{'title': 'Unspecified\nMaybe because it's not visible', 'class': 'clr_{{clr}}'}
																%i.fa.fa-2x.fa-question-circle{'aria-hidden': 'true'}
			%section#downloadPane
				%h2.nodisplay Archive downloads
				.card
					.cardBody
						%h3 Download
						- with tiers='Thumbnails (ZIP),Small images (ZIP),Decently-sized images (ZIP),Large images (ZIP),Best quality (ZIP)'.split(',')
							- for tier in tiers
								%div
									%a{'href': '{{zips[loop.index0]["name"]}}'}
										%i.fa.fa-download{'aria-hidden': 'true'}
										= tier
										[{{zips[loop.index0]['fmtd']}}]
		%footer
			.pageWidthConstraint
				%p.justify All artwork presented here serves the sole purpose of easing artists' effort to browse through references that, otherwise, would be sent via some electronical mean that is more prone to a misunderstanding.
				%p.justify Even though a download button is easily accessible, no right over the images, for whatever purpose, is given.
				%p.justify
					If you drew something presented here and don't want it here, send me a message on
					%a{'href': 'https://twitter.com/SfnerDragon', 'target': '_blank', 'rel': 'noreferrer'} Twitter
					or
					%a{'href': 'https://t.me/Sfner', 'target': '_blank', 'rel': 'noreferrer'} Telegram
					and I'll have it removed as soon as possible.
				%div.right
					%a{'href': 'https://git.adlerneves.com/adler/site_fursona_refs'} Source code