{{ define "main" }}

{{ $style := resources.Get "assets/css/landing.scss" | resources.ToCSS -}}
<link rel="stylesheet" href="{{ $style.Permalink }}" />
<script>
window.i18nStrings = {
	installChrome: '{{ T "Global.InstallBrowser.Chrome" }}',
	installFirefox: '{{ T "Global.InstallBrowser.Firefox" }}',
	installEdge: '{{ T "Global.InstallBrowser.Edge" }}',
	installUnsupported: '{{ T "Global.Install" }}'
}

window.i18nSplide = {
	next: '{{ T "Global.Carousel.Next" }}',
	prev: '{{ T "Global.Carousel.Prev" }}',
	first: '{{ T "Global.Carousel.First" }}',
	last: '{{ T "Global.Carousel.Last" }}',
	slideX: '{{ T "Global.Carousel.SlideX" ( dict "Count" "%s" ) }}',
}
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/odometer@0.4.8/themes/odometer-theme-default.min.css,npm/@splidejs/splide@4/dist/css/splide.min.css">
<script defer src="https://cdn.jsdelivr.net/combine/npm/odometer@0.4.8/odometer.min.js"></script>
<script defer src="/assets/js/landing.js" type="module"></script>

<section id="intro" class="px-4 pb-0 mb-0 intro-heading text-left">
	<div class="container pt-4 px-3 pb-0 d-flex flex-column justify-content-center text-center" id="intro-info">
		<h1 class="display-4 m-0 mb-3 p-0">{{ T "IndexPage.Intro.Tagline" }}</h1>
		<p class="lead mb-4">{{ T "IndexPage.Intro.Description" }}</p>
		<div id="intro-buttons" class="d-flex align-items-center flex-column flex-md-row justify-content-center">
			<a id="install-intro" class="btn btn-white btn-lg install-btn disabled">
				<p><span id="install-browser-icon"><span class="iconify-inline" data-icon="fa-solid:hourglass-start"></span></span> <span id="install-browser">{{ T "IndexPage.Intro.InstallButton.Loading" }}</span></p>
				<p>{{ T "IndexPage.Intro.InstallButton.Description" }}</p>
			</a>
			<a href="#features" class="btn" id="read-more">{{ T "IndexPage.Intro.ReadMore" }}</a>
		</div>
		<img src="/assets/img/showcase/intro-hero.svg" alt='{{ T "IndexPage.Intro.HeroCaption" }}' class="w-100 pt-4">
	</div>
</section>

<svg id="divider-1" xmlns="http://www.w3.org/2000/svg" version="1.1" class="w-100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
	<path d="M0 0 C 50 100 80 100 100 0 Z"/>
</svg>

<section id="features" class="container text-center py-4">
	<h2>{{ T "IndexPage.Features.Heading" }}</h2>
	<div class="row text-left">
		<div class="col-12 col-lg-6">
			<div class="align-items-center d-flex flex-column flex-md-row">
				<div class="features-icon mb-3 mb-md-2">
					<div class="features-circle">
						<span class="iconify" data-icon="fa-solid:list"></span>
					</div>
				</div>
				<div class="feature-info ml-md-4 mb-3 ml-md-0">
					<h3>{{ T "IndexPage.Features.AddonsHeading" }}</h3>
					<p>{{ T "IndexPage.Features.AddonsParagraph" }}</p>
				</div>
			</div>
			<div class="align-items-center d-flex flex-column flex-md-row">
				<div class="features-icon mb-3 mb-md-2">
					<div class="features-circle">
						<span class="iconify" data-icon="vaadin:cog"></span>
					</div>
				</div>
				<div class="feature-info ml-md-4 mb-3 ml-md-0">
					<h3>{{ T "IndexPage.Features.CustomizableHeading" }}</h3>
					<p>{{ T "IndexPage.Features.CustomizableParagraph" }}</p>
				</div>
			</div>
			<div class="align-items-center d-flex flex-column flex-md-row">
				<div class="features-icon mb-3 mb-md-2">
					<div class="features-circle">
						<span class="iconify" data-icon="fluent:local-language-24-filled"></span>
					</div>
				</div>
				<div class="feature-info ml-md-4 mb-3 ml-md-0">
					<h3>{{ T "IndexPage.Features.InternationalHeading" }}</h3>
					<p>{{ T "IndexPage.Features.InternationalParagraph" }}</p>
				</div>
			</div>
			<div class="align-items-center d-flex flex-column flex-md-row">
				<div class="features-icon mb-3 mb-md-2">
					<div class="features-circle">
						<span class="iconify" data-icon="el:opensource"></span>
					</div>
				</div>
				<div class="feature-info ml-md-4 mb-3 ml-md-0">
					<h3>{{ T "IndexPage.Features.OSHeading" }}</h3>
					<p>{{ T "IndexPage.Features.OSParagraph" }}</p>
				</div>
			</div>
		</div>
		<div class="col-12 col-lg-6" id="intro-img">
			<div class="splide d-flex align-items-stretch position-relative" id="intro-carousel">
				<div class="splide__track">
					<ul class="splide__list align-items-center">
						<li class="splide__slide h-100">
							<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
								{{ partial "youtube" (dict "id" "nQ4N9zlzj0M") }}
							</div>
						</li>
						<li class="splide__slide h-100">
							<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
								<img src="/assets/img/showcase/popup-light.png" alt='{{ T "IndexPage.Intro.Carousel.Popup.Caption" }}' class="show-only-light">
								<img src="/assets/img/showcase/popup-dark.png" alt='{{ T "IndexPage.Intro.Carousel.Popup.Caption" }}' class="show-only-dark">
							</div>
						</li>
						<li class="splide__slide h-100">
							<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
								<img src="/assets/img/showcase/settings-light.png" alt='{{ T "IndexPage.Intro.Carousel.Settings.Caption" }}' class="show-only-light">
								<img src="/assets/img/showcase/settings-dark.png" alt='{{ T "IndexPage.Intro.Carousel.Settings.Caption" }}' class="show-only-dark">
							</div>
						</li>
						<li class="splide__slide h-100">
							<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
								<img src="/assets/img/showcase/demo-1.png" alt='{{ T "IndexPage.Intro.Carousel.Demo.Caption" ( dict "Count" 1 ) }}'>
							</div>
						</li>
						<li class="splide__slide h-100">
							<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
								<img src="/assets/img/showcase/demo-2.png" alt='{{ T "IndexPage.Intro.Carousel.Demo.Caption" 2 }}'>
							</div>
						</li>
						<li class="splide__slide h-100">
							<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
								<img src="/assets/img/showcase/demo-3.png" alt='{{ T "IndexPage.Intro.Carousel.Demo.Caption" 3 }}'>
							</div>
						</li>
						<li class="splide__slide h-100">
							<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
								<img src="/assets/img/showcase/demo-4.png" alt='{{ T "IndexPage.Intro.Carousel.Demo.Caption" 4 }}'>
							</div>
						</li>
					</ul>
				</div>
			</div>	
		</div>
	</div>
</section>

<svg id="divider-2" xmlns="http://www.w3.org/2000/svg" version="1.1" class="w-100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
	<path d="M0 100 C 20 0 50 0 100 100 Z"/>
</svg>

<section id="highlights" class="py-4">
	<h2 class="text-center">{{ T "IndexPage.Highlights.Heading" }}</h2>
	<p class="text-center mb-3">
		{{- .Scratch.Add "open_tag_1" "<a href='" }}
		{{- .Scratch.Add "open_tag_1" ( "/addons" | relLangURL ) }}
		{{- .Scratch.Add "open_tag_1" "' class='white-underline'>" }}
		{{- T "IndexPage.Highlights.Paragraph" ( dict "OpenTag1" ( .Scratch.Get "open_tag_1" ) "CloseTag1" "</a>" )  | safeHTML -}}
	</p>
	<div class="splide" id="highlights-carousel">
		<div class="splide__track">
			<ul class="splide__list align-items-start">
			{{- if ( index $.Site.Data.addons $.Page.Language.Lang ) }}
				{{- template "addon-card" ( index $.Site.Data.addons $.Page.Language.Lang ) -}}
			{{ else }}
				{{- template "addon-card" $.Site.Data.addons.en -}}
			{{ end -}}
			</ul>
		</div>
		<!-- <a class="carousel-control-prev" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">{{ T "IndexPage.Intro.Carousel.Previous" }}</span>
		</a>
		<a class="carousel-control-next" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">{{ T "IndexPage.Intro.Carousel.Next" }}</span>
		</a> -->
	</div>
</section>

<svg id="divider-3" xmlns="http://www.w3.org/2000/svg" version="1.1" class="w-100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
	<path d="M0 0 C 50 100 80 100 100 0 Z"/>
</svg>

<section id="install" class="container text-center py-4">
	<div class="row">
		<div class="col-12 col-lg"></div>
		<div class="col-12 col-lg-auto mb-4 mb-lg-0 mr-lg-3">
			<h2>{{ T "IndexPage.Install.Heading" }}</h2>
			<p>{{ T "IndexPage.Install.Paragraph" }}</p>
			<p>
				<a class="btn btn-success dark-btn-white btn-lg mb-1" href="https://chrome.google.com/webstore/detail/fbeffbjdlemaoicjdapfpikkikjoneco" target="_blank" rel="noopener">
					<span class="iconify-inline" data-icon="simple-icons:googlechrome"></span> {{ T "Global.ChromeShort" }}
				</a>
				<a class="btn btn-success dark-btn-white btn-lg mb-1" href="https://addons.mozilla.org/firefox/addon/scratch-messaging-extension/" target="_blank" rel="noopener">
					<span class="iconify-inline" data-icon="simple-icons:firefoxbrowser"></span> {{ T "Global.FirefoxShort" }}
				</a>
				<a class="btn btn-success dark-btn-white btn-lg mb-1" href="https://microsoftedge.microsoft.com/addons/detail/iliepgjnemckemgnledoipfiilhajdjj" target="_blank" rel="noopener">
					<span class="iconify-inline" data-icon="simple-icons:microsoftedge"></span> {{ T "Global.EdgeShort" }}
				</a>
			</p>
			<p>
				{{- .Scratch.Add "open_tag_2" "<a href='" }}
				{{- .Scratch.Add "open_tag_2" ( "/docs/getting-started/installing#from-source" | relLangURL ) }}
				{{- .Scratch.Add "open_tag_2" "' target='_blank' rel='noopener'>" }}
				{{- T "IndexPage.Install.InstallButton.Other" ( dict "OpenTag1" "<a href='https://github.com/ScratchAddons/ScratchAddons/releases' target='_blank' rel='noopener'>" "CloseTag1" "</a>" "OpenTag2" ( .Scratch.Get "open_tag_2" ) "CloseTag2" "</a>" ) | safeHTML }}
			</p>
		</div>
		<div class="col-12 col-lg-auto ml-lg-3 d-flex flex-column justify-content-center">
			<p id="total-users" style="font-size: 3rem; font-weight: 500; line-height: 3rem;" class="odometer mb-0"></p>
			<p style="font-size: 1.75rem; font-weight: 500;">{{ T "IndexPage.Users" }}</p>
		</div>
		<div class="col-12 col-lg"></div>
	</div>
</section>

<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "WebApplication",
	"name": "Scratch Addons",
	"url": "https://scratchaddons.com",
	"image": "http://scratchaddons.com/assets/img/showcase/demo-1.png",
	"screenshot": "http://scratchaddons.com/assets/img/showcase/demo-1.png",
	"description": "Scratch Addons combines new and existing features and themes for the <a href='https://scratch.mit.edu'>Scratch</a> website and project editor into one easy-to-access and configurable browser extension..",
	"applicationCategory": "http://schema.org/OtherApplication",
	"aggregateRating": {
		"@type": "AggregateRating",
		"ratingValue": "4.713",
		"ratingCount": "475"
	},
	"offers": {
		"@type": "Offer",
		"availability": "http://schema.org/InStock",
		"price": 0,
		"priceCurrency": "USD"
	}
}
</script>

<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "Organization",
	"url": "https://scratchaddons.com",
	"logo": "https://scratchaddons.com/assets/img/icon.svg",
	"name": "Scratch Addons"
}
</script>

{{ end }}

{{- define "addon-card" }}

{{ range . }}

{{ if and ( in .tags "recommended" ) ( fileExists (delimit (slice "static/assets/img/addons/" .id ".png") "") )  }}

<li class="splide__slide">
	<div class="splide__slide card" id="addon-{{ .id }}">
		<div class="card-img-wrapper">
			<img src="/assets/img/addons/{{ .id }}.png" class="card-img-top" alt="{{ .name }}" loading="lazy">
		</div>
		<div class="card-body">
			<h5 class="card-title">{{ .name }}</h5>
			<p class="card-text">{{ .description }}</p>
		</div>
	</div>
</li>

{{ end }}

{{ end }}

{{ end }}